概述
- 概述
- 2009年诞生,后被Google收购
- 适用于以数据操作为主的SPA应用
- 与jQuery的关系:基于jQ又高于jQ
- 所有的操作不再是以元素为中心,而是以业务数据为中心
MVC模式
-
Model:模型,即业务数据
- 由保存在一定范围内的变量来担当
- 声明模型数据的两种方法
- 使用ngInit指令声明
- 使用Controller声明
- 声明模型数据的两种方法
- 由保存在一定范围内的变量来担当
-
View:视图,负责呈现业务数据
- 由 HTML+指令 来担当
-
Controller:控制器,负责操作业务数据
- 由模块中特定的函数担当 module.controller('', fn)
双向数据绑定
-
方向1:Model=>View
- 大部分的指令都实现了方向1的绑定
-
方向2:View=>Model
- ngModel指令实现了方向2的绑定
依赖注入
-
如何压缩CSS/JS文件
- yui-compressor
-
一个对象的由框架来创建,其所依赖的对象也由框架来创建
- 根据形参名来创建
-
体现的设计原则:迪米特法则
模块化设计
-
体现的设计原则:高内聚低耦合
-
模块中可以声明的组件
- controller
- 操作模型数据
- filter
- 对数据输出进行格式化
- directive
- 增强HTML功能
- service
- 在控制器之间提供公用的服务
- provider
- function
- object
- type
- ...
- controller
-
模块有两种
- 官方提供的模块
- ng
- directive
- ngApp
- ngInit
- ngController
- ngModel
- ngBind
- ngRepeat
- ngIf
- ngShow/ngHide
- ngDisabled
- ngChecked
- ngSrc
- ngClick
- ngStyle
- ngClass
- ...
- filter
- lowercase
- uppercase
- number
- currency
- date
- ...
- service
- $rootScope
- 在全局范围内共享模型数据
- $http
- 发起异步XHR请求
- $interval
- 周期性定时器
- $timeout
- 一次性定时器
- $location
- 读取/修改当前的URL
- $log
- 日志输出服务
- ...
- $rootScope
- function
- angular.module( )
- angular.forEach( )
- ...
- directive
- ngRoute
- directive
- ngView
- provider
- $routeProvider
- 声明路由字典
- $routeProvider
- directive
- ngAnimate
- ngTouch
- ...
- ng
- 用户自定义的模块
- angular.module('模块名', [依赖列表])
- 官方提供的模块