angularjs自定义组件开发ppt课件

AngularJS自定义组件开发,.,主要内容,第一部分：什么是AngularJs? 第二部分：五大特性 第三部分：简单的例子 第四部分：模块化 第五部分：指令 第六部分：AngularJS的优势与缺点,.,什么是AngularJS,AngularJS是协助搭建单页面工程的开源前端框架。它通过MVC模式使得开发与测试变得更容易。 AngularJS试图成为WEB应用中的一种端对端的解决方案。它将指导开发整个应用。 AngularJS于2009年发布第一个版本，由Google进行维护，压缩版94k。,.,AngularJS五大特性,双向数据绑定 -实现了把model与view完全绑定在一起，model变化，view也变化，反之亦然。MVC -吸收了传统的MVC设计模式针但又并不执行传统意义上的MVC，更接近于MVVM(Moodel-View-ViewModel)。模板-在AngularJS中，模板相当于HTML文件被浏览器解析到DOM中，AngularJS遍历这些DOM，也就是说AuguarJS把模板当做DOM来操作，去生成一些指令来完成对view的数据绑定。指令-可以用来创建自定义的标签，也可以用来装饰元素或者操作DOM属性。依赖注入-AngularJS拥有内建的依赖注入子系统，可以帮助开发人员更容易的开发，理解和测试应用。,.,AngularJs的核心思想,UI视图,数据模型,视图、数据双向更新,这个过程由AngularJs自动进行开发者无需关注,在AngularJS中通过数据视图双向绑定实现。,.,AngularJs的核心思想,遵循MVC模式开发。,.,如何使用,.,简单的例子-编写html, 按名字排序 按年龄排序 phone.name phone.snippet phone.age ,ng-app：AngularJS程序入口，对该标签内的元素进行初始化。ng-controller：在当前元素范围内绑定指定的控制器(controller)。ng-model：指定当前元素与数据模型（$scope）中的属性绑定，如果数据模型中没有此属性，会自动新建一个。ng-repeat：循环$scope中的属性，类似于#each beansxxx：花括号表示读取某一属性值filter、orderBy：过滤器。filter可以根据指定的属性过滤数据(例子里是quer属性)。orderBy是排序过滤器。这两个过滤器都是内置的。过滤器是可自定义的。,.,简单的例子-编写控制器,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,functionc1是控制器的名字，ser1、ser2是控制器所依赖的服务，以声明的方式注入到控制器中。例子中注入了$scope(数据模型)、$http(封装了ajax的服务)。这两个服务都是angularjs内置服务，服务是可以自定义的。$scope.phones = data; 在这个地方后台返回的数据应用到了数据模型中，这时前台UI会自动响应更新。,.,模块化, name | test var myAppModule = angular.module(myApp,); myAppModule.filter(test,function() return function(name) return hello, +name+!; ; ); myAppModule.controller(myAppCtrl,$scope,function($scope) $scope.name=xingoo; ); ,首先，通过全局变量angular创建模块myAppModule 第一个参数是绑定的应用app名称，这个app标识了页面中angular的入口点，类似main函数的作用。第二个参数里面标识了依赖的模块。模块化作用： 1 增加了模块的可重用性2 通过定义模块，实现加载顺序的自定义3 在单元测试中，不必加载所有的内容,.,模块化,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,functionc1是控制器的名字，ser1、ser2是控制器所依赖的服务，以声明的方式注入到控制器中。例子中注入了$scope(数据模型)、$http(封装了ajax的服务)。这两个服务都是angularjs内置服务，服务是可以自定义的。$scope.phones = data; 在这个地方后台返回的数据应用到了数据模型中，这时前台UI会自动响应更新。,.,AngularJS 指令,AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变成“特定领域语言(Domain Specific Language，简称DSL)”，是用来扩展浏览器能力的技术之一，在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行，这使得指令可以为DOM指定行为，或者改变它。AngularJS通过称为指令的新属性来扩展的HTML，带有前缀ng-，我们也可以称之为“指令属性”，它就是绑定在DOM元素上的函数，可以调用方法、定义行为、绑定controller及$scope对象、操作DOM，等等。,例如：ng-app ng-controller ng-src xxx ng-repeat ng-model 等,.,AngularJS 指令,myAppModule.directive(xingoo,function() return restrict:AECM, template:hello my directive, repalce:true );,一般指令的写法：,1 restrict：定义了标签的使用方法，一共四种，分别是AECM2 template：定义标签的模板。里面是用于替换自定义标签的字符串3 repalce：是否支持替换4 transclude：是否支持内嵌,.,如何使用指令,A attribute属性：当做属性来使用 eg： E element元素：当做标签元素来使用 eg： C class类：当做CSS样式来使用 eg： M comments注释：当做注释使用（这种方式在1.2版本下亲测不可用！） eg： 注：一般来说推荐，当做属性和元素来使用。当想要在现有的html标签上扩展属性时，采用属性的方式。当想要自定义标签时，采用标签的形式。想要使用那种方式，必须要在定义directive中的restrict里 面 声明对应的字母。,.,指令内嵌使用,使用transclude属性，设置为true。 并使用ng-transclude属性，定义内部嵌套的位置。transclude的作用可以简化地理解成：把标签替换成我们所编写的HTML模板，但是标签内部的内容保持不变。,.,如何使用指令,link，添加相应事件，方法中有三个参数： 1 scope，作用域，用于调用相 应的作用域的方法。 2 element，指代创建的标签 3 attr，用于扩展属性注：1 标签中属性使用驼峰法命名，在指令中要转换成全部小写。2 指令中调用的仅仅是属性的名字，没有方法括号。3 应用时，属性对应的值是该控制器内声明的执行方法。,.,如何使用指令,.,最后，感谢您的聆听。,.,