angularjs总结

一、介绍

AngularJS是一款由Google公司开发维护的前端MVC框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率。

jQuery只是一个类库(类库指的是一系列函数的集合)以DOM做为驱动(核心),而AngularJS则一个框架(诸多类库的集合)以数据逻辑做为驱动(核心)。

MVC是一种开发模式,由模型(Model)、视图(View)、控制器(Controller)3部分构成,采用这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见。

模型(Model)一般用来处理数据(读取/设置),一般指操作数据库。

视图(View)一般用来展示数据,比如通过HTML展示。

控制器(Controller)一般用做连接模型和视图的桥梁。

二、模块化(Module)

1、定义应用(view)

通过为任一HTML标签添加ng-app属性,可以指定一个应用,表示此标签所包裹的内容都属于应用(App)的一部分。

angularjs总结

2、定义模块(model)

AngularJS提供了一个全局对象angular,在此全局对象下存在若干的方法,其中angular.module()方法用来定义一个模块。

angularjs总结

angular.module(‘模块名’,[依赖的其它模块])

注:应用(App)其本质也是一个模块(一个比较大的模块)。

3、定义控制器

控制器(Controller)作为连接模型(Model)和视图(View)的桥梁存在,所以当我们定义好了控制器以后也就定义好了模型和视图。

angularjs总结

       app.controller(“控制器名”,[依赖的服务,function(依赖的服务){

])

模型(Model)数据是要展示到视图(View)上的,所以需要将控制器(Controller)关联到视图(View)上,通过为HTML标签添加ng-controller属性并赋值相应的控制器(Controller)的名称,就确立了关联关系。

angularjs总结

三、指令

1、内置指令ng开头

1)ng-app 指定应用根元素,至少有一个元素指定了此属性。

不能写在<head>上

2)ng-controller指定控制器。

3)ng-repeat=“(key,value) in 循环的数组”

4ng-switch onng-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(中的变量);

angularjs总结

angularjs总结

angularjs总结

angularjs总结

angularjs总结

angularjs总结

angularjs总结

angularjs总结

angularjs总结

angularjs总结

angularjs总结