美文网首页
Angular之Service篇

Angular之Service篇

作者: codeice | 来源:发表于2016-09-01 19:43 被阅读87次

在AngularJS中,我们经常将通用的业务逻辑封装在服务里面,使公用模块复用率更高,减少重复性代码,提高代码可读性,降低维护成本

我们经常用到业务逻辑,或者是说持久化数据化操作应该放在自定义的服务里面,而不是Controller里面。

自定义服务三方式:

1.provider
Provider是唯一 一种你可以传进 .config() 函数的service。当你想要在 service对象启用之前,先进行模块范围的配置,那就应该用 provider。当我们定义provider时候,我们还必须将返回对象放在this.$get=function(){}

//唯有Provider服务可以被注入到Config中
module.config(['providerServiceProvider', function(providerServiceProvider) {
    providerServiceProvider.name = '这是通过外部config传入的参数名字:Jessie!!!!!!';
}]);

//provider service
module.provider('providerService', function() {
    this.name = '';
    this.$get = function() {
        var _name = '';
        var that = this;
        var service = {
            setName: function(name) {
                _name = name;
            },
            getName: function() {
                _name = name;
            },
            getConfigName: function() {
                return that.name;
            }
        };
        return service;
    }

});

2.service
service方法本身返回一个构造器, Service是用"new"关键字实例化的。 你应该给"this"添加属性, 然后service返回"this"。

//使用service方法
module.service('service', function() {
    var _name = '';
    this.setName = function(name) {
        _name = name;
    }

    this.getName = function() {
        return _name;
    };
});

3.factory
factory 方法直接把一个函数当成一个对象的$get 方法,它可以直接返回字符串,用factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来。

module.factory('factoryService', function() {
    var _name = '';
    var serverce = {};
    var that = this;
    serverce.setName = function(name) {
        _name = name;
    }

    serverce.getName = function() {
        return _name;
    }

    serverce.getConfigName = function() {
        return that.name;
    }
    return serverce;
});

service方法与factory相比,service可以不用生命对象,它直接将某些属性和方法绑定在this上就可以,但是它不可以直接返回字符串,而factory定义的服务必须在里面定义一个对象,将某些公用的方法或者属性绑定在此对象上,然后Return回去。

相关文章

  • Angular之Service篇

    在AngularJS中,我们经常将通用的业务逻辑封装在服务里面,使公用模块复用率更高,减少重复性代码,提高代码可读...

  • Angular之service概念

    service是一个神奇的东西,之前的EventEmitter 一直憋着不写就是在等service的出现,现在se...

  • angular 插件

    插件推荐功能-angular language service angular服务插件 智能提示错误 Auto I...

  • Angular 里的 Service Worker

    从 5.0.0 版本开始,Angular 附带了一个 Service Worker 实现。 Angular 开发人...

  • [翻译]入门angular的 Service Workers

    原文 前期准备 如下的基础知识: Angular service workers介绍. 从5angular.0.0...

  • anguarjs 中的服务

    Angular 提供了3种方法来创建并注册我们自己的 service。 Factory Service Provi...

  • 从 Angular Component 和 Directive

    同 Angular service 的单例特性不同,Angular 组件和指令通常会被多次实例化,比如 HTML ...

  • Angular Service Worker

    Service Worker 就是一段运行在 Web 浏览器中,并为应用管理缓存的脚本。 Angular Serv...

  • angular2之封装service

    快速创建项目大家已经众所周知了,在这里小吓就不提了。 今天就来说说如何创建服务(service),在任何一个组件中...

  • 记录

    ant design 布局 高度100% angular5 jsonp使用 httpclient service ...

网友评论

      本文标题:Angular之Service篇

      本文链接:https://www.haomeiwen.com/subject/hqchettx.html