慕课网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次（阈值）就停止监听并报错