Angular JS
一、Angular入门
1.AngularJS 是什么？
-
google 开源的 前端JS 结构化框架；
-
动态展示页面数据，并与用户交互；
-
优点：
- 双向数据绑定
- 声明式依赖注入
- 解耦应用逻辑，数据模型和视图；
- 完善的页面指令
- 定制表单验证
- Ajax封装
二、四个重要概念
1.双向数据绑定
-
View(视图)：页面（标签、指令、表达式）
-
Model(模型)：作用域对象（属性、方法）
-
数据绑定：数据从一个位置自动流向另一个位置
View -->Model Model-->View
单向数据绑定
- view-->model : ng-init
- model-->view : {{name}}
双向数据绑定
- model <--> View : ng-model
2.依赖注入
-
依赖的对象被别人(调用者)自动注入进入
-
注入的方式；
-
内部自建：不动态
全局变量：污染全局环境
形参：这种最好
-
angualr就是通过声明式依赖注入， 来得到作用域对象
-
形参名不能随便定义（只是针对当前这种写法）
3.MVC模式
M: Model, 即模型, 在angular中:
- 为scope
- 储存数据的容器
- 提供操作数据的方法
V: View, 即视图, 在angular中:
* 为页面
* 包括: html/css/directive/expression
* 显示Model的数据
* 将数据同步到Model
* 与用户交互
C: Controller, 即控制器, 在angular中:
* 为angular的Controller
* 初始化Model数据
* 为Model添加行为方法
4.MVVM模式
- M: Model, 即数据模型, 在angular中:
- 为scope中的各个数据对象
- V: View, 即视图, 在angular中:
- 为页面
- VM: ViewModel, 即视图模型, 在angular中:
- 为scope对象
- 在angular中controller不再是架构的核心，在MVVM中只是起辅助作用，用来辅助$scope对象，即VM层
三、四个重要对象
1.作用域
- 是一个js实例对象
- 这个对象的属性、方法， 页面都可以直接引用、操作
- ng-app指令： 内部创建一个根作用域（$rootScope）, 是所有其它作用域的父对象
2.控制器
- 也是一个对象，是我们View与Model之间的桥梁
- 当我们使用了ng-controller指令， 内部就会创建控制器对象
- 但我们同时得提供控制器的构造函数（必须定义一个$scope的形参）
- 每定义一个ng-controller指令， 内部就会创建一个新的作用域对象（$scope）, 并自动注入构造函数中,在函数内部可以直接使用$scope对象。
3.模块
- 也是一个对象
- 创建模块对象： angular.module('模块名', [依赖的模块])
- 通过模块添加控制器：
- module.controller('MyController', function($scope){//操作$scope的语句})
- angular的整体设计也是多模块的
- 核心模块： angular.js
- 扩展模块： angular-router.js, angular-message.js, angular-animate.js
000
