AngularJSAngularJS笔记—注册服务

      在头里的记中,了解及AngularJS的后台控制得以Controller里面实现.
可是如果拥有的逻辑代码都写及Controller会显得该Controller过于臃肿.
不便宜维护,
AngularJS提供了一个足以依赖注入的方式。我们可以逻辑处理封装到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;
       }
   });

           

            

 

相关文章