码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS笔记---注册服务

时间:2015-06-17 11:09:49      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

      在前面的笔记中,了解到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;
       }
   });

           

            

 

AngularJS笔记---注册服务

标签:

原文地址:http://www.cnblogs.com/FourLeafCloverZc/p/4578863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!