anguarjs一个框架适用于以数据操作为主应用飞蝗day02.pdfVIP

AnguarJS是一个JS框架，适用于以数据的CRUD操作为主的SPA应用。

四大特性：

(1)MVC模型

Model：模型，即数据=JS中的变量

View：视图，即数据的呈现=HTML

Controller：控制器，负责操作数据=JSFn

(2)双向数据绑定

(3)依赖注入(DI)

(4)模块化编程

1.AngularJS中的指令（directive）

(1)ngAppANYng-app

(2)ngInitANYng-init=名=值;名=值;

(3)ngRepeat：循环输出当前

用法：ANYng-repeat=valuein数组变量名

ANYng-repeat=(key,value)in数组变量名

类似于JS中的

for(varkinempList){console.log(empList[k]);}

但for..in..遍历的是元素的下标，而ngRepeat遍历的是元素本身。

(4)ngIf：只有表达式值为true时，当前元素才显示；否则当前元素会从DOM树中删除

用法：ANYng-if=布尔表达式

(5)ngBind：用于输出一个表达式的值为当前元素的innerHTML，作用与{{表达式}}基本一样，可以防止

闪动问题。

用法：ANYng-bind=表达式/ANY

(6)ngController：创建一个控制器对象

用法：ANYng-controllerl=控制器函数名

(7)ngValue：将一个模型变量绑定到View（表单输入域）

用法：inputng-value=表达式

2.AngularJS中的表达式(expression)

语法：{{表达式}}

3.AngularJS中的MVC模型：

Model：模型数据，即变量

View：数据展示，即HTML

Controller：创建/修改/删除模型数据，即JS函数

模型数据的两种方式：

(1)ngInit指令——把Model掺杂在View中——不推荐使用

(2)使用控制器模型数据——把Model与View分离——推荐使用

模型数据=控制器=模块(module)

使用控制器来模型数据的步骤：

(1)使用angular.module()函数创建一个模块，并使用ngApp指令确定其作用范围

(2)在模块中使用.controller()函数一个控制器函数，并使用ngController指令在HTML中创建

该控制器的对象

(3)在控制器中使用$scope对象模型数据

angular.module(模块名,[])

.controller(控制器名,function($scope){

$scope.模型数据名=值;

});

htmlng-app=模块名

divng-controller=控制器名

{{模型数据名}}

/div

/html

练习：创建一个新的HTML页面，其中一个模块，