一、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>