angularjs入门

AngularJS入门之Services

时间:2015-06-11 15:16来源:网络整理 作者:KKWL 点击:
关于AngularJS中的DI 在开始说AngularJS的Service之前,我们先来简单讲讲DI(Dependency Injection,通常中文称之为依赖注入)。 DI是一种软件设计模式,主要为了解决组件获取它的依赖组件的问

关于AngularJS中的DI

在开始说AngularJS的Service之前,我们先来简单讲讲DI(Dependency Injection,通常中文称之为“依赖注入”)。

DI是一种软件设计模式,主要为了解决组件获取它的依赖组件的问题。DI的概念渗透在AngularJS的各个地方,AngularJS使用一个专门的子系统($injector)进行DI管理,这个过程包括了创建组件、解析、获取它的依赖组件,并将这些依赖组件回传给请求组件。

 

我们其实已经在不知不觉中使用DI了(比如在AngularJS自定义Directive中的出现过):

app.directive('myCurrentTime', ['$interval', 'dateFilter', function ($interval, dateFilter) { }

 

上述代码片段在添加Controller时,其中$interval就是Controller中依赖注入Service的推荐方法。由于$injector的存在,对于我们只需将所需服务的名称传入我们的模块即可,底层的工作都将由$injector包办。

$injector的原理如下图:

 

AngularJS中使用DI添加Service的三种方法: 

方式1(内联注解,推荐使用):

app.controller('myController', ['$scope', 'dateFilter', function ($scope, dateFilter) { }]);

 

方式2($inject注解):

1 var MyController = function($scope, dateFilter) { } 4 MyController.$inject = ['$scope', 'dateFilter']; 5 someModule.controller('MyController', MyController);

 

方式3(隐式注解,不推荐使用):

app.controller('myController', function ($scope, dateFilter) { });

 

推荐使用方式1的理由是:

  • 写法上比方法2更简单明了
  • 比方法3更可靠(由于Javascript可以被压缩,AngularJS又是通过解析服务名称找到对应Service的,因此Javascript压缩之后AngularJS将无法找到指定的Service,但字符串不会被压缩,因此单独以字符串指定Service的名称可以避免这个问题)
  •  

    使用方式1或方式2的注意点:

    由于上述第二点原因,AngularJS在编译Html时,由$injector将数组中Service的名称与方法体中的Service进行一一映射。这种映射关系必须遵守由AngularJS的约定:

  • 数组中Service名称的个数必须与方法体中Service名称的个数一致
  • 数组中Service的顺序必须与方法体中Serivce的顺序一致
  •  

    如果为了编码规范需要强制使用显式DI(也就是方式1或者方式2),可使用ng-strict-di属性,这样AngularJS在遇到隐式DI(也就是方式3)时将会报错。

    示例1:

    () { , []); ($scope) { 10 }]); ($scope) { 19 }; ]; , myController2); })();

     

    示例1中,因为body使用了ng-strict-di属性,因此当使用方式1或者方式2的隐式DI时,AngularJS将会抛出如下错误:

     

     AngularJS中的Services:

    AngularJS提供了很多Services,常用的如$http,是集成在AngularJS和核心库中的,另外有一部分如$animate是独立的模块。由于篇幅问题,我们先以$http为例了解一下AngularJS的Service。

    迄今为止我所有的AngularJS系列的文章中,所有的数据均是通过ng-init或者在$scope中初始化数组来完成的。但实际项目中,我们的数据都会从服务器获取。写个例子来演示一下这个过程。

     

    Step 1,创建一个名为data.txt的文件,里面包含一个Json对象:

    { "students": [ { "Name": "Jack", "Age": 21 }, { "Name": "Alice", "Age": 20 }, { "Name": "Tom", "Age": 21 }, { "Name": "Sophie", "Age": 19 } ] }

     

    Step 2,使用$http的get方法获取data.txt的数据,并将数据赋值给$scope.students:

    app.controller('myController', ['$scope', '$http', function ($scope, $http) { $scope.students = []; $http.get('data.txt'). success(function (data, status, headers, config) { $scope.students = data.students; console.log(data); console.log(data.students); console.log($scope.students); }). error(function (data, status, headers, config) { }); }]);

     

    Step 3,使用ng-repeat显示students的信息:

    Name: {{stu.Name}}Age: {{stu.Age}}

     

    完整的Html代码如下:

    ------分隔线----------------------------