angularjs总结
一、介绍
AngularJS是一款由Google公司开发维护的前端MVC框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率。
jQuery只是一个类库(类库指的是一系列函数的集合)以DOM做为驱动(核心),而AngularJS则一个框架(诸多类库的集合)以数据和逻辑做为驱动(核心)。
MVC是一种开发模式,由模型(Model)、视图(View)、控制器(Controller)3部分构成,采用这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见。
模型(Model)一般用来处理数据(读取/设置),一般指操作数据库。
视图(View)一般用来展示数据,比如通过HTML展示。
控制器(Controller)一般用做连接模型和视图的桥梁。
二、模块化(Module)
1、定义应用(view)
通过为任一HTML标签添加ng-app属性,可以指定一个应用,表示此标签所包裹的内容都属于应用(App)的一部分。
2、定义模块(model)
AngularJS提供了一个全局对象angular,在此全局对象下存在若干的方法,其中angular.module()方法用来定义一个模块。
angular.module(‘模块名’,[依赖的其它模块])
注:应用(App)其本质也是一个模块(一个比较大的模块)。
3、定义控制器
控制器(Controller)作为连接模型(Model)和视图(View)的桥梁存在,所以当我们定义好了控制器以后也就定义好了模型和视图。
app.controller(“控制器名”,[依赖的服务,function(依赖的服务){
])
模型(Model)数据是要展示到视图(View)上的,所以需要将控制器(Controller)关联到视图(View)上,通过为HTML标签添加ng-controller属性并赋值相应的控制器(Controller)的名称,就确立了关联关系。
三、指令
1、内置指令ng开头
1)ng-app 指定应用根元素,至少有一个元素指定了此属性。
不能写在<head>上
2)ng-controller指定控制器。
3)ng-repeat=“(key,value) in 循环的数组”
4)ng-switch on、ng-switch-when可以对数据进行筛选
<ling-repeat="item in items" ng-switch on="item">
<spanng-switch-when="css">{{item}}</span>
</li>
当item=“css”时,才显示span
ng-switch on中的是判断的变量,相当于swich(中的变量);