AngularJS的介绍.pptVIP

AngularJS的介绍 内容提要 第一部分：什么是AngularJs? 第二部分：一个简单的例子 第三部分：四大特性（MVC，模块化，双向数据绑定，指令） 第四部分：依赖注入 第五部分：服务，路由，过滤器 第六部分：AngularJS的优势与缺点 第一部分 什么是AngularJs? 什么是AngularJs? AngularJS是协助搭建单页面工程的开源前端框架。它通过MVC模式使得开发与测试变得更容易。 AngularJS试图成为WEB应用中的一种端对端的解决方案。它将指导开发整个应用。 AngularJS于2009年发布第一个版本，由Google进行维护，压缩版94k。 AngularJs的核心思想 将视图与业务逻辑解耦。在AngularJS中通过数据视图双向绑定实现。这将提高代码的可测试性。 UI视图 数据模型 视图、数据双向更新 这个过程由 AngularJs自动进行 开发者无需关注 遵循MVC模式开发，鼓励视图、数据、逻辑组件间松耦合。 将测试与应用程序编写同等重要。在编写模块同时编写测试。因为各组件的松耦合，使得这种测试得以实现。 应用程序页面端与服务器端解耦。两方只需定义好通信API，即可并行开发。 一个简单的例子 来看看使用AngularJs怎么做 几乎没有DOM操作，更专注于业务逻辑！ 编写HTML body ng-app ng-controller=PhoneListCtrl input ng-model=quer/ select ng-model=sortType option value=name 按名字排序/option option value=age 按年龄排序/option /select ul li ng-repeat=phone in phones | filter:quer | orderBy:sortType {{}} p{{phone.snippet}}/p p{{phone.age}}/p p img ng-src={{phone.imsrc}}/ /p /li /ul /body ng-app：AngularJS程序入口，对该标签内的元素进行初始化。 ng-controller：在当前元素范围内绑定指定的控制器(controller)。 ng-model：指定当前元素与数据模型（$scope）中的属性绑定，如果数据模型中没有此属性，会自动新建一个。 ng-repeat：循环$scope中的属性，类似于{{#each beans}} {{xxx}}：花括号表示读取某一属性值 filter、orderBy：过滤器。filter可以根据指定的属性过滤数据(例子里是quer属性)。orderBy是排序过滤器。这两个过滤器都是内置的。过滤器是可自定义的。 编写控制器Controller var PhoneListCtrl = [$scope, $http, function($scope, $http) { $http.get(../json/test-1.json) .success(function(data) { $scope.phones = data; }); $scope.sortType = age; } ]; PhoneListCtrl 控制器。控制器的声明方式是 var c1=[ser1,ser2,function] c1是控制器的名字，ser1、ser2是控制器所依赖的服务，以声明的方式注入到控制器中。例子中注入了$scope(数据模型)、$http(封装了ajax的服务)。这两个服务都是angularjs内置服务，服务是可以自定义的。 $scope.phones = data; 在这个地方后台返回的数据应用到了数据模型中，这时前台UI会自动响应更新。 四大核心特性 模块化 MVC 指令 双向数据绑定 模块 在AngularJS中，模块负责组织、启动、实例化应用。 模块的简单写法： angular.module(modulename, [x1,x2])//依赖于x1、x2模块 .directive(directiveName, function() {}) .factory(a, function() { return 123; })//创建服务 .filter(b,function(){})//创建过滤器 .value(d, 123)//创建变量，创建后可修改 .contract(c,