关闭

[置顶] angularJS学习小结——service

5093人阅读 评论(11) 收藏 举报
分类:


   引言


   最近在项目中用到了关于angularJS中的服务相关的知识,在起初学习这个东西的时候就了解到这个东西在项目


中是经常被用到的,在angular中也是比较重要的一块,所以今天小编就总结一些关于service的知识。


   认识Service


   关于service我们一点都不陌生,不论实在c#中还是java中我们经常会遇到service的概念,其实service的作用


就是对外提供某种特定的功能,也就是我们经常说的“为了实现某个功能而调用哪个服务”是一样的道理,他们一般


是一个独立的模块,ng服务是这样的定义的:


   Angular services are singletons objects or functions that carry out specific tasks common to web apps.

   1、它是一个单利对象或函数,对外提供特定的功能。


   2、它与我们自己定义一个function然后在其他地方调用不同,因为服务被定义在一个模块中,所以它的作用范


围是可以被我们来管理的,ng避免全局变量污染意识是非常强的。


   自定义服务


   在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('验证通过');
        }
    };
}]);


  小结


  以上是小编在学习angularJS服务的一些总结,这些都是入门的知识,在这和大家分享一下,如果想要对服务有更


层的理解还需要我们在项目中好好的研究。

3
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

angularjs学习总结 详细教程

1 前言 前端技术的发展是如此之快,各种优秀技术、优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢。 AngularJS是google在维护,其在国外已经十分火热,可是国...
  • yy374864125
  • yy374864125
  • 2014-11-21 15:15
  • 59234

:angularjs学习总结(~~很详细的教程) 很不错的一篇帖子 适合快速了解angularjs整体结构 有个整体印象

1 前言 前端技术的发展是如此之快,各种优秀技术、优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢。 AngularJS是google在维护,其在国外已经十分火热...
  • zhang1027963459
  • zhang1027963459
  • 2016-02-26 10:17
  • 6059

angularJS学习小结——$apply方法和$watch方法

引言    最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了 解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些ang...
  • u013045437
  • u013045437
  • 2016-05-09 21:18
  • 12360

angularJS学习小结——filter

引言    filter过滤器对于我们来说并不陌生,他和我们现实生活中的过滤器的意思差不多,它的作用就是接收一个输 入的值,然后按照某个规则进行处理然后输出最后的结果,例如我们输入一个数字,然...
  • u013045437
  • u013045437
  • 2016-05-08 10:45
  • 2534

Web Service学习小结——WSDL文档中的节点与java类的联系

WSDL:是web service description language的首字母缩写。意思是web服务描述语言。  那么他到底描述了什么东西呢?  根据我这几天在网上的各种信息收录。它主要描述...
  • luman1991
  • luman1991
  • 2016-08-19 17:08
  • 878

中间件小结——第四部分:Web Service规范

分类: (1) 面向商业应用的 Web Service(Business-Oriented Web Service) (2) 面向最终用户的 Web Service(Customer-Orient...
  • sundenskyqq
  • sundenskyqq
  • 2012-03-02 19:29
  • 1057

AngularJS实际项目应用——Service层介绍

所谓的Service层就是如何调用后台的rest api,你可能觉得这有什么可设计的?不就是用$http或者$resource直接调用就行了吗?如果这样写,在简单的应用中还行,但程序一旦复杂起来,$h...
  • kittyjie
  • kittyjie
  • 2017-02-20 15:36
  • 1006

深究AngularJS——自定义服务详解(factory、service、provider)

前言 3种创建自定义服务的方式。  FactoryServiceProvider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想。所以我们...
  • zmm13298329239
  • zmm13298329239
  • 2017-04-17 11:55
  • 207

使用angularjs1.x构建前台开发框架(六)——service的引用

angularjs service 引用
  • lqlqlq007
  • lqlqlq007
  • 2016-11-13 12:06
  • 351

深究AngularJS——自定义服务详解(factory、service、provider)

前言 3种创建自定义服务的方式。 FactoryServiceProvider 大家应该知道,AngularJS是后台人员在工作之余发明的,他主要应用了后台早就存在的分层思想。所以我们得了解下分...
  • xiaozhi_2016
  • xiaozhi_2016
  • 2017-06-08 17:49
  • 297
    个人资料
    • 访问:529962次
    • 积分:18161
    • 等级:
    • 排名:第601名
    • 原创:272篇
    • 转载:20篇
    • 译文:0篇
    • 评论:5654条
    和我交谈
    点击这里给我发消息 点击这里给我发消息
    时间你好?
    博客专栏
    最新评论