慕课网AngularJS实战课程笔记

基础概念

前端框架与前端类库

类库：函数集合。其内容是封装一些实现复杂功能的或可复用的代码，目的是提高编码工作的效率。举例：jQuery, GreenSock(JS动画库)，mootools（JS API封装库），zeptojs（移动端jQuery）……

参考：常用JavaScript类库与框架总结

（补充：JavaScript全栈开发必备工具）

框架：一种设计模式或几种模式组合的体现。改变以DOM操作为核心的前端工作流，向后端工作方式靠拢。针对某些领域或场景提供完整解决方案，提高开发效率。举例：AngularJS，React，Vue.js……

AngularJS 1.x 四大特性

①MVC

②模块化（依赖注入，服务）

③指令

④双向数据绑定

前端开发环境/工具组合

代码编辑：sublime、webstorm

断点调试：浏览器开发者工具、batarang（AngularJS定制）

版本管理：git

代码合并压缩混淆：grunt，gulp

依赖管理：bower，npm

单元测试：Karma（容器）+Jasmine（测试语法）

集成（e2e）测试：protractor

轻量级服务器：http-server（基于node.js的HTTP接口）

核心：node.js

参考：

开发工具等综合性资源！！！

AngularJS端到端测试

Controller

一个Controller控制一小块View（单一功能）

在Controller中不操作DOM（在指令中操作）

在Controller中不做数据过滤或格式化（$filter服务、表单控件）

Controller彼此不会调用，通过scope的继承或事件机制通信

Controller不继承，复用的代码写进服务（Service/Provider/factory…）

模块

项目结构

HTML：引入资源文件的index.html和放模板html代码的文件夹

CSS：单独文件夹

图片等资源：单独文件夹

framework文件夹：angular.js等引入的框架

JS：module创建注入和配置（app.js），controller创建和配置（controllers.js），指令（directives.js），过滤器（filters.js），服务（services.js），路由（routes.js）

依赖管理（包、配置文件……）

测试（单元、端到端）

模块划分

一个总的app模块为入口，controller、directives、services、routes、filters分别放一个模块中。app模块依赖这些模块

指令

核心配置项（config）

restrict

（匹配模式）：Attribute Element coMment Class （AEMC）

template

（HTML模板代码）：”HTML代码”

templateUrl

：”HTML模板文件的地址”

//模板缓存服务$templateCache，可在多个指令内使用同一个模板

模板替换方式

replace

: true，替换指令（包括本身和子元素）

transclude

: true，保留指令子元素的内容。需要template中用ng-transclude属性指定接收内容的元素

指令的运行（加载→编译→链接）

编译

compile：function(elem,attrs,transclude){...}

//一般不写

链接

link: function(scope, elem, attrs, contrller){...}

compile

和

link

同时存在，以

compile

为主，

link

失效

compile

与

link

的区别：

compile

：对指令的模板进行转换

link

：在model和view之间建立关联，注册监听事件。监控model的变化：

$scope.$watch('变量名',回调)

注意“防抖动”：使用$timeout服务延迟发送

在link阶段scope才绑定，在compile阶段不能操作scope

同一指令多个实例，compile只执行一次，link每个实例都执行一次

交互

指令与controller：scope.函数。

scope.$apply(函数/Angular表达式)

指令之间：配置项scope、controller、require ​

独立scope

配置项scope取值为空对象（

{}

）

绑定策略：

{ 变量名：绑定策略}

@

：字符串变量的双向绑定

=

：对象变量的双向绑定

&

：在指令中绑定父级scope的函数

内置指令(官方文档)

a、form、各式input、ngInclude、script

指令库

angular-ui

服务

$http服务：

$http({配置对象}).success(function).error(function)

（promise风格）

自定义Service注意：①命名不要用’$’开头②注入时系统在前，自定义在后

特性：

①服务是单例的

②注入机制：先由$injector实例化

③存在于整个应用的生命周期（可用来共享数据）

Service、Factory、Provider、Constant、Value本质上都是Provider，而语法上有差异。

数据格式化专用服务：$filter。内置格式化方式，也可以自定义。

路由

原生：ng-route

扩展插件：ui-router，可以嵌套

子模板指令 ui-view

状态指令 ui-sref

嵌套：状态可以有子状态。用点标记：

父状态.子状态

表单

Angular表格插件：ng-grid

form指令

扩展form元素：允许嵌套、自动校验、防止重复提交

给input增加type属性（HTML5更多）

添加4个css类样式

AngularJS表单基础

AngularJS Form 进阶：远程校验和自定义输入项

双向数据绑定

$scope——树

根：$rootScope，每个模块只有一个。

子scope可以继承父scope的属性和方法。

传播事件：

$emit()

，向上（根）

$broadcast()

，向下（包含兄弟）

scope对象：

属性（在scope构造函数中添加）：内部id……

方法（在prototype中）：new、watch、digest、eval……

eval调用parse服务解析计算内嵌Angular表达式

$digest机制——对象深比较：缓存上一次对象的全部值，与新对象逐一比较

不适合树型结构（对象嵌套对象），性能差。

数据绑定关键点：

观察者模式：一个Model绑定多个View

判断Model是否变化：脏值检查遍历watch列表，有变化应用就进入digest循环，直到值不再变化就应用新值，继续遍历$watch列表。遍历完成时即Model稳定，再更新View

判断深层嵌套的Model某属性是否变化，对象深比较

A、B两方法互相watch，避免“振荡”——TTL：连续检测到10次（阈值）就停止监听并报错