一、Angular特点：

1、双向数据绑定，主打卖点

2、MVVM 模型，把视图和逻辑分开

3、依赖注入

个人感觉，在Angular中，视图对应 HTML 模板，视图逻辑对应directive 和 controller。

二、模块

Angular 中通过模块来管理命名空间，可以通过不同的模块来隔离不同页面的逻辑。所虽然它称作 “module”，但其实更像是一个命名空间，或者叫一个包。

通过 angular.module(“name”, [/依赖/]) 来声明一个模块。Angular中的模块声明周期分两步，一个是配置阶段，一个是运行阶段。

angular.module(“app-name”, [])

.config(function() { //配置阶段，先执行

})

.run(function() { //运行阶段，后执行

});

一般我们给按页面划分模块，也可以把整个应用都声明成一个模块，然后通过模块来启动整个页面的逻辑。

可以把run当做main函数，如果有一些在应用启动时需要执行的代码，比如判断当前有没有登录，可以放在run函数中。

三、双向数据绑定

双向数据绑定是 Angular 的主打特色。一般我的数据都是单向绑定的，也就是当JS中的变量发生变化的时候更新到DOM，但是大部分时候并不会在DOM中的值变化的时候去自动更新JS中的变量。

看一个双向绑定的例子：

 <input ng-model=“user.name" type="text" placeholder="Your name">

 <h1>Hello {{ user.name }}</h1>

这样就实现了一个双向绑定，当在input中输入值的时候，h1中的值会立刻发生变化。

因为JS传值的问题，建议绑定的时候总是通过对象属性而不是通过直接传值的方式来做。

四、控制器（controller）

在 Angular 中，控制器的作用就是创建新的作用域，Angular创建一个控制器的时候都会为其创建一个$scope，这个$scope就是一个新的作用域。当然你可以声明这个作用域和父作用域的关系，到底是隔离还是继承。

在angular中这样声明一个控制器：

 app.module(“home”, [])

      .controller(“MyController”, function($scope) {

           $scope.name = “Mr Lee”;

      });

在HTML中这样使用

 <div MyController>{{name}}</div>

 <!— 或者这样 —>

 <MyController>{{name}}</div>

 <!— 还有通过class或者注释等方式都可以使用 —>

Angular 是一个 MVVM 模型，即 Model - View - ViewModel，其中的 ViewModel 是视图对应的Model，在Angular中就是 $scope。因此 $scope的作用就是存放与对应视图相关的数据。比如上例中我们就是存储了一个名字，如果是一个个人名片，我们存储的就是这个人的基本信息。

在 Angular 中 , 存在一个$rootScope，所有的其他$scope形成了一颗以$rootScope为根节点的树。每一个 $scope 都负责对应视图的数据存储，业务逻辑等。

在一个 controller 的作用域范围内，可以直接使用 $scope 上的属性，比如你的$scope是这样声明的：

 $scope = { name: “Lily”, sayName: function(){alert($scope.name{});

那么你在HTML中可以这么使用 scope

 <h2>name: {{name}}</h2>

 <button ng-click=“sayName()”>say name</button>

前端框架之Angular （一）