《AngularJS的介绍》PPT课件

《《AngularJS的介绍》PPT课件》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、AngularJS的介绍内容提要第一部分：什么是AngularJs?第二部分：一个简单的例子第三部分：四大特性（MVC，模块化，双向数据绑定，指令）第四部分：依赖注入第五部分：服务，路由，过滤器第六部分：AngularJS的优势与缺点第一部分什么是AngularJs?什么是AngularJs?AngularJS是协助搭建单页面工程的开源前端框架。它通过MVC模式使得开发与测试变得更容易。AngularJS试图成为WEB应用中的一种端对端的解决方案。它将指导开发整个应用。AngularJS于2009年发布第一个版本，由Google进行维护，

2、压缩版94k。AngularJs的核心思想将视图与业务逻辑解耦。在AngularJS中通过数据视图双向绑定实现。这将提高代码的可测试性。UI视图数据模型视图、数据双向更新这个过程由AngularJs自动进行开发者无需关注遵循MVC模式开发，鼓励视图、数据、逻辑组件间松耦合。视图控制器服务A服务B服务C服务D通过依赖注入解耦通过数据、视图双向绑定解耦将测试与应用程序编写同等重要。在编写模块同时编写测试。因为各组件的松耦合，使得这种测试得以实现。应用程序页面端与服务器端解耦。两方只需定义好通信API，即可并行开发。一个简单的例子来看看使用An

3、gularJs怎么做控制器服务UI视图操作数据模型注入服务第一步：编写HTML第三步：编写服务，例如数据过滤等第二步：编写控制器，利用服务操作数据模型几乎没有DOM操作，更专注于业务逻辑！编写HTML按名字排序按年龄排序

<

4、ling-repeat="phoneinphones

5、filter:quer

6、orderBy:sortType">{{phone.name}}

{{phone.snippet}}

{{phone.age}}

7、pe）中的属性绑定，如果数据模型中没有此属性，会自动新建一个。ng-repeat：循环$scope中的属性，类似于{{#eachbeans}}{{xxx}}：花括号表示读取某一属性值filter、orderBy：过滤器。filter可以根据指定的属性过滤数据(例子里是quer属性)。orderBy是排序过滤器。这两个过滤器都是内置的。过滤器是可自定义的。编写控制器ControllervarPhoneListCtrl=['$scope','$http',function($scope,$http){$http.get('../json/te

8、st-1.json').success(function(data){$scope.phones=data;});$scope.sortType='age';}];PhoneListCtrl控制器。控制器的声明方式是varc1=['ser1','ser2',function]c1是控制器的名字，ser1、ser2是控制器所依赖的服务，以声明的方式注入到控制器中。例子中注入了$scope(数据模型)、$http(封装了ajax的服务)。这两个服务都是angularjs内置服务，服务是可以自定义的。$scope.phones=data;在这个

9、地方后台返回的数据应用到了数据模型中，这时前台UI会自动响应更新。四大核心特性模块化MVC指令双向数据绑定模块在AngularJS中，模块负责组织、启动、实例化应用。模块的简单写法：angular.module('modulename',[x1,x2])//依赖于x1、x2模块.directive('directiveName',function(){}).factory('a',function(){return123;})//创建服务.filter('b',function(){})//创建过滤器.value('d',123)//创建

10、变量，创建后可修改.contract('c',324)//创建常量创建后不可修改双向数据绑定目前为止，js中唯一实现双向数据绑定