Angularjs学习笔记脑图

angularjs

1、第一章 angularjs简介

客户端模板：html 模板

MVC:Model View Controller

数据绑定：模板和上的值和变量绑定

依赖注入：通过应用需要的东西，而不必再创建一次的一种模块化机制

指令：用户增加VIEW层功能的拓展html 标签

2、第二章 Angularjs 应用骨架

1、调用Angularjs

2、ng-app声明angularjs 边界

3、创建基本骨架

1、model

创建容纳数据的模型，模型代码当前应用的状态

2、View

用来展示数据的一些视图

3、Controller

管理模型和视图关系的一些控制器

4、基本的运作流程

1、用户请求起始页

2、用户的浏览器发送http请求，然后下载index.html 页面，这个页面包含了模板

3、angular被加载到页面中，等待页面加载完成，查找ng-app指令，用来定义模板边界

4、angular开始运作，初始化，应用启动，模板被转换成DOM 视图

5、链接服务器加载需要展示给用户的其他数据

5、常用内置指令

ng-repeat

显示列表数据

ng-show:隐藏和显示

ng-class:更具条件加载class

ng-style:更具条件加载样式

ng-href：a标签用于绑定的方法

ng-src:用于加载图片

6、$scope暴露模型数据

7、 $watch用来监控数据模型的变化

双向绑定时，监听变量值得变化,这个方法在使用较大的集合的时候会存在一些性能的问题

8、使用模块

依赖注入：自动解析依赖的机制

9、过滤器

{{expression | filtername:parameter1:parameterN}}

10、路由

使用$route服务切换局部视图，使用$localtion 对页面进行跳转

3、第三章 使用AngularJs 进行开发

包括的文件

js文件

html模板文件

js依赖

静态资源

单元测试

集成测试

配置文件

测试驱动开发TDD karma

单元测试

集成测试

自动

手动

编译压缩

chrome浏览器调试插件:batarang

Model标签页

性能标签页

服务依赖关系

元素属性和访问控制台

使用Yeoman 优化工作流程

预览服务器,代码保存时自动刷新浏览器

包管理功能

构建

PhantomJS单元测试

项目自动化构建

1、合并js压缩

2、文件打上版本号

3、优化图片

4、生成应用缓存清单

和RequireJS 集成

4、第四章 一款AngularJS应用分析

5、服务器交互

$Http服务使用

GET请求

POST请求

设置请求参数

设置HTTP头

缓存响应数据

转换请求和响应

JSON转换

key/value转换

RESTFul 资源

promise模式

$q 和 Promise

拦截响应

安全

JSON漏洞

XSRF 跨站请求伪造

6、第六章 指令

(略)还未升入学习