《AngularJS有用开发技巧(推举)_.docx》由会员分享，可在线阅读，更多相关《AngularJS有用开发技巧(推举)_.docx（12页珍藏版）》请在三一文库上搜索。
1、AngularJS有用开发技巧(推举)_ 一、开端 Angular JS 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它供应web应用的架构，无需进行手工DOM操作。 AngularJS很小，只有60K，兼容主流扫瞄器，与jQuery 配合良好。 二、基础原则了解 angular的一些入门了解 一、基础学问 1.angular放弃了IE8 2.四大核心分别是mvc、模块化、指令系统、双向数据绑定 二、一些原则 1.不要复用controller，一个掌握器一般只负责一小块视图。 2.不要在controller里面操作dom。 3.不要在contorller里面做数据格式化，n
2、g有很好的表单控件。 4.不要在controller里面做数据过滤操作，有$filter服务。 5.一般状况下，controller是不会相互调用的，掌握器之间的交互会通过大事进行。 6.angular利用指令来复用view。 7.$scope是一个树型结构，与DOM标签平行。 8.子$scope对象会继承父$scope上的属性和方法。 9.每一个angular应用只有一个$rootScope对象。（一般位于ng-app上）。 10.可以用angular.element($0).scope()进行调试。 11.用法ngRoute进行视图之间的路由。 三、HTML页面最常用且有用的angular
3、内置指令 .ng-class（适用于类似点赞、关注等某个样式会由于某个操作转变的状况） ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。ng-class 指令的值可以是字符串，对象，或一个数组。 假如是字符串，多个类名用法空格分隔。 假如是对象，需要用法 key-value 对，key 是一个布尔值，value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。 假如是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。 建议的两种用法方式： 一、字符串形式，代码如下： i class=icon ng-class=true:ion-ios
4、-heart,false:ion-ios-heart-outlineAccountInfo.isFocus ng-click=wetherFocus() /i 这样的意思就是，i标签有一个基础类为icon,ng-class则绑定了一个动态的类，而这个类要取哪一个值则由AccountInfo.isFocus的值是true或者false来决定，若其值为true则i标签会添加ion-ios-heart这个类，若其值为false则i标签会添加ion-ios-heart-outline 这个类。i标签还绑定了一个ng-click的大事，在这个大事里面除了处理相应的规律之外，还决定AccountInfo.
5、isFocus的值。这样的话，当发生点击操作的时候，自然就转变i标签相应的类，继而表现出不同的样式了。 二、key-value的样式，代码如下： i class=icon ng-class=ion-ios-heart:isIos,ion-android-heart:isAndroid /i 明显，由代码则可以看出，这样的含义就是当isIos为true的时候就会取ion-ios-heart这个类，当isAndroid的值为true的时候，就会取ion-android-heart这个类。 .ng-show和ng-hide(适用于对于不同的状况显示两种不同的内容时) ng-show 指令在表达式为
6、true 时显示指定的 HTML 元素，否则隐蔽指定的 HTML 元素。 ng-hide 指令在表达式为 true 时隐蔽指定的 HTML 元素，否则显示指定的 HTML 元素。 哈哈，看着就是水火不容的兄弟。 例子如下： div class=keyboard span class=keyboardIcon ng-click=toggleMenu()/span /div div class=footer-menu ul class=menu-list ng-show=menuState . /ul div class=footer-send ng-hide=menuState . /div 设
7、置一个布尔变量menuState（实际开发中你可以用表达式，三目运算式等等），当其为true的时候，ng-show的内容会显示，ng-hide的内容会隐蔽。反之则反之。 .ng-switch(适用于在多种状况下显示不同的内容时) ng-switch 指令依据表达式显示或隐蔽对应的部分。 对应的子元素用法 ng-switch-when 指令，假如匹配选中选择显示，其他为匹配的则移除。 通过用法 ng-switch-default 指令设置默认选项，假如都没有匹配的状况，默认选项会显示。 例子： div ng-switch=essayType div class=list-cart ng-swit
8、ch-when=4 . /div div class=list-cart left-pic ng-switch-when=3 . /div div class=single-pic ng-switch-when=1 . /div div class=single-pic ng-switch-when=2 . /div div class=single-pic ng-switch-default . /div /div .ng-model(这里主要说一下ng-model奇妙的小坑坑) ng-model 指令绑定了 HTML 表单元素到 scope 变量中。 假如 scope 中不存在变量, 将会
9、创建它。ng-model常用于input, select, textarea等元素。 如下代码： div class=WhatISay textarea name=my-massage-detail ng-model=content class=my-massage-detail placeholder=请输入留言 /textarea a class=button btnng-click=submitMes()提交/abr/div 根据定义，理论上来说我们提交的时候，挺直在controller里面猎取在页面定义了的ng-model的值，是可以的。但是事实上这样是不行行的。亲测发觉输出了一个un
10、defined，而且，假如在controller里面定义ng-model的初始值的话，猎取到的就是初始值而不是转变后的最新值。 查找了一些资料，也许意思就是说。angular限制了我们的一些定义。我们只能用法一个非原始的对象来传递参数。 什么意思呢。略微改一下上面的例子，如下： html代码： div class=WhatISay textarea name=my-massage-detail ng-model=model.content class=my-massage-detail placeholder=请输入留言 /textarea a class=button btnng-click
11、=submitMes()提交/a /div controller代码： $scope.model = ; $scope.model.content = ; $scope.submitMes=function() console.log($scope.model.content); 就是我们是定义了一个对象，然后把ng-model定义为这个对象里面的一个属性这样来处理的。这样子，我们就得到了ng-model的最新值了。 还有一种比较简洁的方式就是挺直把ng-model作为参数传进去就好了。 例子如下： /HTML代码 input type=text ng-model=code button ng
12、-click=setCode(code)Login/buttonbr /controller代码 $scope.setCode = function(code) alert(code); 四、数据交互有用技巧 Promise的利用 ES6定义了Promise对象。这个对象挺好用的，格外是用在与后台交互的时候。既预防回调过深，又可以针对一些状况做统一处理，还提高了代码的可读性。在angularJs里面也封装了这样一个服务，就是$q。 $q是做为angularjs的一个服务而存在的，只是对promise异步编程模式的一个简化实现版。defer对象(延迟对象)可以通$q.defer()猎取，该对象有
13、三个方法: resolve(value):向promise对象异步执行体发送消息告诉他我已经胜利完成任务，value即为发送的消息。 reject(value): 向promise对象异步执行体发送消息告诉他我已经不行能完成这个任务了，value即为发送的消息。 notify(value): 向promise对象异步执行体发送消息告诉他我现在任务完成的状况，value即为发送的消息。 这些消息发送完promise会调用现有的回调函数。 promise即与这个defer对象的承诺对象。promise对象可以通过defer.promise猎取,promise对象的一些方法： then(succes
14、sCallback,errorCallback,notifyCallback):参数为不同消息下的不同回调函数，defer发送不同的消息执行不同的回调函数，消息作为这些回调函数的参数传递。返回值为回一个promise对象为支持链式调用而存在。当第一个defer对象发送消 息后，后面的promise对应的defer对象也会发送消息，但是发送的消息不一样，不管第一个defer对象发送的是reject还是resolve，其次个及其以后的都是发送的resolve，消息是可传递的。 catch(errorCallback):then(null,errorCallback)的缩写。 finally(cal
15、lback):相当于then(callback,callback)的缩写，这个finally中的方法不接受参数，却可以将defer发送的消息和消息类型胜利传递到下一个then中。 defer():用来生成一个延迟对象 var defer =$q.defer(); reject():参数接收错误消息，相当于在回调函数中抛出一个特别，然后在下一个then中调用错误的回调函数。 all()：参数接收为一个promise数组，返回一个新的单一promise对象，当这些promise对象对应defer对象全部解决这个单一promise对象才会解决，当这些promise对象中有一个被reject了，这个单
16、一promise同样的被reject了。 when():接收第一个参数为一个任意值或者是一个promise对象，其他3个同promise的then方法,返回值为一个promise对象。第一个参数若不是promise对象则挺直运行success回调且消息为这个对象，若为promise那么返回的promise其实就是对这个promise 类型的参数的一个包装而已，被传入的这个promise对应的defer发送的消息，会被我们when函数返回的promise对象所接收到。 具体用法如下： 在angular中，定义一个特地用来交互的服务。 get: function (url, options) br
17、 var deferred = $q.defer(); br showTip(); $http.get(url, options).success(function (data) hideTip(); if (data.Success) deferred.resolve(data); else deferred.reject(data.Message); ).error(function (data) hideTip(); deferred.reject(data); ); return deferred.promise; /controller里面的调用 get(url,params) .then(function (data) /这里是successCallback ,function (data) /这里是errorCallback ); 这样，我们就可以在每个恳求发出时统肯定义一些提示，然后恳求结束之后隐蔽这些提示。这段代码中，也许意思就是，当恳求胜利的时候，就会调用deferred.resolve(data)，把状态设置为胜利，这样就会自动执行then里面的第一个函数即successCallback，并把恳求到的数据data传递进去。而当恳求失败的时候，则会调用其次个函数，即errorCallback。 以上所述是我给大家介绍的AngularJS有用的开发技巧 .