AngularJS笔记—注册服务

      在近期的笔记中,了然到AngularJS的后台控制能够在Controller里面达成.
可是假设全数的逻辑代码都写到Controller会显得该Controller过于臃肿.
不方便人民群众维护,
AngularJS提供了1个足以借助注入的法门。大家得以将逻辑处理封装到Service中,必要调用只需求引入对应的Service即可.

     Angular 提供了3种办法来创立并注册我们友好的 service.

     1.Factory

     2.Service

     3.Provider

     一. Factory:

  1. 上面营造了三个MyFactory, 用于安装个人消息,并体现个人信息。

Note: 1. 不可能不在中间调用return 不然会报错

         2. 持有的可访问的方式都放到了Service里面

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

       var service = {};
       var _name = '';
       var _age = '';

       service.SetInfo = function(name,age){
             _name = name;
             _age = age;
       }

       service.ShowInfo = function(){
             return _name+':'+_age;
       }

       return service;
  });

            2. 方可将因而function(MyFactory)中校服务登记到Controller中.
控制台就会打字与印刷出Frank:23

  var app = angular.module('myapp')
  app.controller('InjectCtrl',function ($scope,MyFactory) {
       MyFactory.SetInfo('Frank',23);
       console.log(MyFactory.ShowInfo());
  });    

       二. Service

            1. Service与Factory用法差不离,差别在于不须求Return二个对象. 
         

 var app = angular.module('myapp')

  app.controller('InjectCtrl',function ($scope,MyService) {
       MyService.SetInfo('Frank',23);
       console.log(MyService.ShowInfo())
  });

app.service('MyService', function(){
       var _name = '';
       var _age = '';

       this.SetInfo = function(name,age){
              _name = name;
              _age = age;
       }

       this.ShowInfo = function(){
              return _name+':'+_age;
       }
  });

        三. Provider:

            1. Provider: 通过#Get方法达成多少的重返.              

  app.provider('MyProvider',function(){

         var service = {};
       var _name = '';
       var _age = '';

       service.SetInfo = function(name,age){
             _name = name;
             _age = age;
       }

       service.ShowInfo = function(){
             return _name+':'+_age;
       }

       this.$get = function(){
             return service;
       }
   });

           

            

 

相关文章