发表于: 2017-07-03 22:04:45

1 889


今天完成的事情:学习了一些关于服务的知识,factory,provider,service;给搜索功能添加了没有搜索到数据的情况;做了编辑页面的自适应移动端的功能;给取消按钮增加了ur-sref路径。

明天计划的事情:bootstrap换成ui-bootstrap;下拉列表改为angularjs下拉列表,增加正则判断。

遇到的问题:服务和指令不熟悉,排版很乱。

收获:AngularJS服务service用法

自定义服务

在angular中为提供了三种不同的方式来实现自定义服务,他们分别是系统内置的$provider、module中的service和module中的factory,下面来看看如何使用这三种方式;

1)$provide的使用

Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前,先进行模块范围的配置,那就应该用 provider

var m1 = angular.module('myApp', [], function ($provide) {

    $provide.provider('providerService01', function () {

      this.$get = function () {

        return {

          message: 'this is providerService01'

        }

      }

    })

    $provide.provider('providerService02', function () {

      this.$get = function () {

        var _name = '';

        var service = {};

        service.setName = function (name) {

          _name = name;

        }

        service.getName = function () {

          return _name

        }

        return service;

      }

    })

})

m1.controller('firstController', ['$scope', 'providerService01', 'providerService02', function ($scope, providerService01, providerService02) {

    console.log(providerService01);

    providerService02.setName("李四");

    $scope.name = providerService02.getName();

}])

在使用$provide的使用可以像上面这样直接在module中直接注入$provide,然后再module中依次定义多个服务,当然也可以利用config来完成服务的定义。

var m1=angular.module('myApp',[]);

m1.config(function($provide){

  $provide.provider('providerService01', function () {

    this.$get = function () {

      return {

        message: 'this is providerService011'

      }

    }

  });

  $provide.provider('providerService02', function () {

    this.$get = function () {

      var _name='';

      var service={};

      service.setName=function(name){

        _name=name;

      }

      service.getName=function(){

        return _name

      }

      return service;

    }

  });

})

上面这两种实现方式达到的效果是一样的,所以在使用的时候可以任意选择一种来实现。

2)factory的使用

Factory方法直接把一个函数当成一个对象的$get 方法可以直接返回字符串,用 Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来。你把 service 传进 controller 之后,在 controller 里这个对象里的属性就可以通过 factory 使用了。

var m1 = angular.module('myApp', [], function ($provide) {

  $provide.factory('factoryService01',function(){

    return{

      message:'this is providerServices01'

    }

  })

});

factory的使用比$provide的使用简单一些,可以在factory直接返回已给对象,不在使用$get来实现对象的返回。并且$factory和$provide不仅仅可以返回一个对象还可以返回一个任意的字符串。

3)service的使用

Service 是用"new"关键字实例化的。因此,你应该给"this"添加属性,然后 service 返回"this"。你把service 传进 controller 之后,在 controller 里 "this" 上的属性 就可以通过 service 来使用了

$provide.service('service01',function(){

    return{

      message:'this is providerServices01'

    }

})

service和factory的使用是非常相似的,但是service是不能返回字符串的,而factory既可以返回对象也可以返回任意的字符串。

三者的区别:provider需要借助$get来实现,而其余的两者都不需要。series不能返回字符串,而其他的两个都可以返回。

服务之间的依赖关系

在实现某个功能的时候也许需要多个服务相互依赖才可以完成,那么对于服务之间的关系就需要来管理,例如在完成一个数据验证的功能,这是在jsFiddle中找的一个非常简单的小例子

var app = angular.module('MyApp', []);

app.controller('testC3',function($scope,validate){

  $scope.validateData = validate;

});

app.factory('remoteData',function(){

  var data = {name:'n',value:'v'};

  return data;

});

app.factory('validate',function(remoteData){

  return function(){

    if(remoteData.name=='n'){

      alert('验证通过');

    }

  };

});

服务validate是来验证数据是否合法的功能,但是它需要依赖另外一个服务remoteData来获得数据,但是在factory的参数中,可以直接传入服务remoteData,ng的依赖注入机制便做好了其他工作。不过一定要保证这个参数的名称与服务名称一致,ng是根据名称来识别的。若参数的名次与服务名称不一致,你就必须显示的声明一下,方式如下:

app.factory('validate',['remoteData',function(remoteDataService){

  return function(){

    if(remoteDataService.name=='n'){

      alert('验证通过');

    }

  };

}]);



返回列表 返回列表
评论

    分享到