每多学一点知识,就少写一行代码。

前言

首先,了解 一下ng的一些概念:

上面的这些概念基本上就是ng的全部。每一部分都可以自由定义,使用时通过各种要素的相互配合来实现我们的业务需求。

模块(module)

每个ng应用都默认加载一个模块“ng”,该组件内部提供了一些常用的功能,我们可以直接使用使用他们,但这些功能可能没法完成我们的需求。因此ng另外还封装了一些其它模块,如ngAnimate、ngResource、ngRoute等,这些模块分别提供了一些各不相同的功能,注入进来我们就可以完全使用他们。我们也可以通过angular.module来创造、注册和加载模块。 一个模块是 一组服务,指令,控制器,过滤函数和配置信息的集合。

angular.module

我们可以通过angular.module(name, [requires], [configFn])创造一个模块。模块名是绑定到模板中ngApp值,requires是需要依赖加载的模块,configFn是requires加载完成之后的初始化工作。返回一个带有其它方法和属性的模块。

自定义服务$provide

当你想在当前模块的控制器去引用另一模板的控制器功能时,可以自定义一个相关服务,然后在需要该服务的控制器中显示声明依赖该服务,这样就可在多个控制器中使用同一段逻辑代码。 ng提供服务的过程涉及它的依赖注入机制。而injector注册服务的方法。 (1)provider方法:注册一个服务提供函数。 该函数是一个构造函数,通过内部的$get属性来提供一个服务。

var fn = function() {this.;};}.provider(‘test’, fn);});myApp.controller(‘myCtrl’, function($scope, test) {console.log(test);});

上面是一种定义服务的方法,不常用,而且我也没搞懂,汗。。。 (2)factory方法 是provider方法的简写,相当于provider(name, {get方法即可,而service方法传入的是一个构造函数。即service返回的是一个对象,而factory方法 可以是一个数字或字符串。例如ng入门实例中的phonecat程序内部定义的ajax服务使用的就是factory方法,返回请求的json字符串。

phonecatServices.factory(‘Phone’, [‘$resource’, (‘phones/:phoneId.json’, {}, {query: {method:’GET’, params:{phoneId:’phones’}, isArray:true}}); }]);

(3)value方法 相当于provider方法中的$get属性函数不需要参数且直接返回值的情况。provider方法中的test服务例子可直接简写:

myApp.value(‘test’,”China”);

传入值可以是字符串、数字、数组、对象和函数。 (4)constant方法 和value方法功能类似,即给一个服务名绑定一个常量,该常量可以是字符串、数字、数组、对象和函数。区别就是通过constant方法注册的服务能够被注入进module的配置中,而且不能被decorator方法修改。 (5)decorator(name, decorator)方法 中断一个服务的初始化,修改这个服务。参数name是已经定义但需要被修改的服务名。

var myApp = angular.module(‘myApp’, []).config([‘test’, function(test) {console.log(test.name);}]).constant(‘test’,{name:”constant”}).value(‘valueTest’,{name:’value’}).decorator({name: ‘decoration’};}).controller(‘myCtrl’, [‘valueTest’, function(valueTest) {console.log(valueTest.name);}]);自定义指令directive

通过前面的学习,我们慢慢发现,ng中的功能都是通过在相应模板中绑定功能的指令来完成。如

<div ng-controller=”Controller”> Hello /> > =/> > =/> > <br/></div>

而ng的指令绑定方式有element names,attributes,comment,class names

==”my-dir: exp;”></span>

ng不仅提供了一些简单的指令供我们使用,同时也允许我们自定义指令。通过模块中的directiveAPI可以定义指令,而最简单的定义指令方式是直接返回一个函数:

angular.module(‘myApp’, []).directive(‘myLink’, function($interval, dateFilter) {return function link(scope, element, attrs) {var format,timeoutId;function updateTime() {element.text(dateFilter(new Date(), format));}scope.$watch(attrs.myLink, function(value) {format = value;updateTime();});// 注册$destoty事件,防止内存泄露问题// 当编译的DOM被销毁时触发element.on(‘$destroy’, function() {$interval.cancel(timeoutId);});// start the UI update process; save the timeoutId for cancelingtimeoutId = $interval(function() {updateTime(); // update DOM}, 1000);}});

指令名必须是驼峰格式的命名,而直接直接返回函数的形式等同于复杂指令定义方式中的返回link函数

angular.module(‘myApp’, []).directive(‘myCurrentTime’, function($interval, dateFilter) {function link(scope, element, attrs) {var format,timeoutId;function updateTime() {element.text(dateFilter(new Date(), format));}scope.$watch(attrs.myCurrentTime, function(value) {format = value;updateTime();});// 注册$destoty事件,防止内存泄露问题// 当编译的DOM被销毁时触发element.on(‘$destroy’, function() {$interval.cancel(timeoutId);});// start the UI update process; save the timeoutId for cancelingtimeoutId = $interval(function() {updateTime(); // update DOM}, 1000);}return {link: link};});

即定义指令的复杂形式是返回一个对象,对象含有以下几种可能用到的属性:

而更像是听见了天地间冥冥中的呼唤,

每多学一点知识,就少写一行代码。

相关文章:

你感兴趣的文章:

标签云: