AngularJS注册和使用服务和常量(provider、factory、service、constant、value)

1.   简介

AngularJS采用MVC架构,提供了服务的注册和以依赖注入方式使用服务的机制。服务是功能(方法)和数据(常量)的抽象,比如系统中关于用户信息相关的功能(头像、昵称、签名、生日、性别等信息的获取与修改)抽象后集中在一个对象中,那么这个对象就可以视为一个服务。服务可以通过angular.Module(常以var app = angular.module(‘my-app‘,[])方式获取)和$provider(以依赖注入方式获取)对象注册,常以依赖注入的方式使用使用。

每个服务有一个(字符串类型的)名字,在注册时提供,依赖注入子系统通过服务名获得服务对象。服务是单例的,因此每次获取到的服务都是同一个服务对象。

下面通过一个简单的示例来说明如何在代码中注册和使用服务,以及可能遇到的一个坑(依赖注入器$injector找不到服务Error: [$injector:unpr] Unknown provider: XXXXXX。通过查看源码发现angular注册服务时会在服务名后自动添加后缀"Provider",我之前有遇到依赖注入器死活找不到对应服务名,在我往依赖注入变量名后手动添加Provider后运行成功,但此问题没能重现,因此不能详解)。这个示例很简单,只是显示通过服务注册的5种方式(provider、factory、service、constant、value)注册服务(和数据),然后通过依赖注入的方式获取服务和数据,之后在网页上显示出。

5种方式中,后4种都是依赖于provider方式实现的,5种方式依次更特殊,更不灵活,注册也因此变得更简单。

2.   provider方式

用provider注册服务常见的调用形式是:

var app = angular.module(‘app‘, []);
app.provider(‘StarProvider‘, function () {
    console.log(‘provider constructor‘)
    //必须定义$get函数
    this.$get = function () {
        console.log(‘provider $get func‘)
        var counter = 0;
        var obj = function () {
        };
        obj.favorite = function () {
            return ‘李嘉欣x‘ + counter++;
        };
        return obj;
    }
});

provider函数中的重点是第二个参数,这个参数中必须定义$get函数,这将成为取得服务对象的getter函数。

3.   factory方式

factory方式注册时,形式上类似provider,不同的是,第二个参数是一个工厂函数,该函数是一个有返回值的函数,返回值就是服务对象,angular在实现factory方式时,就是将factory第二个参数作为一个新对象的$get属性传递给provider,作为其第二个参数。

代码形式通常为:

app.factory(‘StarFactory‘, function () {
    console.log(‘factory constructor‘)
    var c = 0;
    var fac = {};        // 常先定义一个服务对象,然后定义其服务接口
    fac.favorite = function () {
        return ‘关之琳x‘ + c++;
    };
    return fac;
});

4.   service方式

factory到service的特殊化程序类似provider到factory,service的第二个参数不使用factory中的工厂模式,第二个参数就是服务对象的构造器,其中定义的公有属性就是服务的服务接口。可见,不像factory方式,service方式不再在第二个参数(可执行对象)中定义服务对象(上例中的fac变量),因其就是服务对象本身。以该方式注册服务的代码常以以下形式出现:

app.service(‘StarService‘, function () {
    console.log(‘service constructor‘)
    var c = 0;
    this.favorite = function () {        //常以this.xxx方式定义服务接口
        return ‘蓝洁瑛x‘ + c++;
    }
})

5.   constant、value方式

这两种方式用以注册常量(不变的量,并非就一定是字符串或数值类型),二者区别小,且不常被我使用,不详解,注册代码形式为:

app.constant(‘StarConstant‘, ‘邱淑贞-const‘);
app.value(‘StarValue‘, ‘梅艳芳-val‘);

6.   服务使用方式(依赖注入)

三种依赖注入使用方式:匿名、内联、显示声明,这三种方式都要求首先声明angular内置服务(名字一般以$打头)。所有自定义provider的各种非常量形式服务(provider、factory、service)在被注册时会被自动添加"Provider"后缀(三种都是,并非provider添加Provider、factory添加Factory、service添加Service)。
1.推断式依赖注入:参数名必须与服务名一致,angular由此推断需要注入的服务
app.provider(‘this-service-name‘, function ($http, $scope, MyOtherService) {})
2.内联:形式:[‘$builtIn1‘, ‘$builtIn2‘, ‘MyOtherService1‘, function(builtIn1Alias, builtIn2Alias,MyOtherService1Alias){}]
app.provider(‘this-service-name‘, [‘$builtIn1‘, ‘$builtIn2‘, ‘MyOtherService1‘, function(builtIn1Alias, builtIn2Alias,MyOtherService1Alias){}])
3.显示声明。将依赖声明到对象的$inject数组。var foo=function(){}; foo.$inject = [‘$builtIn1‘, ‘$builtIn2‘, ‘MyOtherService1‘]
app.factory(‘StarFactory‘, foo)

7.   示例效果及代码

效果如下:

代码压缩包在网盘此处。

时间: 2024-07-30 10:19:33

AngularJS注册和使用服务和常量(provider、factory、service、constant、value)的相关文章

【备忘录】provider, factory, service, hello world example

var myApp = angular.module('myApp', []); //service style, probably the simplest one myApp.service('helloWorldFromService', function() { this.sayHello = function() { return "Hello, World!" }; }); //factory style, more involved but more sophistica

AngularJS 笔记之创建服务方式比较 : factory vs service vs provider 。

首先说一下服务这个东西是用来干嘛的.很多时候我们把太多的数据和逻辑都一股脑儿地往 controller 里放.这样我们的 controller 原来越臃肿.从它们的生命周期可以发现,其实 controller 应该在需要的时候被初始化,不用了就直接被抛弃,释放内存.因此,当我们切换或者刷新页面的时候,angular 就会清空当前的 controller.与所以,service 才应该被用来保存应用业务逻辑和持久化的数据,并且这些数据可以在不同的 controller 之间应用. 那么问题来了,(

AngularJS中的provider,factory,service方法

使用$provide中的provider方法定义服务 前面已经知道了module的定义为angular.module(name,[requires],configFn);configFn参数是配置服务的.ng供服务的过程涉及它的依赖注入机制.AngularJS是用$provider对象来实现自动依赖注入机制的.$provide.provider是一种定义服务的方法.注入机制通过调用provider的$get方法,把得到的对象作为参数进行相关的调用. <!DOCTYPE html> <ht

AngularJS服务及注入--Provider

Provider简介 在AngularJS中,app中的大多数对象通过injector服务初始化和连接在一起. Injector创建两种类型的对象,service对象和特别对象. Service对象由开发者自定义api. 特别对象则遵照AngularJS框架特定的api,这些对象包括:controller, directive, filter or animation. 最详细最全面的是Provider,其他四种(Value, Factory, Service and Constant)只是在P

Angularjs 自定义服务 provide 里 provider 方法 以及 factory、 service 方法以及 provider 供应商的概念

Angularjs 自定义服务 provide 里 provider 方法 以及factory. service 方法以及 provider 供应商的概念 学习要点:1. Angularjs 中的 provider 方法2. Angularjs 中的 factory 方法3. Angularjs 中的 service 方法4. provider 供应商的概念5. 研究 ionic 代码中的 services 当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆

angularjs factory,service,provider 自定义服务的不同

angularjs框架学了有一段时间了,感觉很好用.可以把angularjs的app理解成php的class,controller是控制器,而内置服务和自定义服务就可以理解成models了.angularjs的内置服务多,例如:$scope,$rootScope,$http,$q,$resource,$routeProvider等等,下面来说一下怎么自定义服务 一,factory,service,provider自定义服务,services.js 'use strict'; /* Service

AngularJS中实现日志服务

本篇体验使用AngularJS自定义一个记录日志的服务. 在AngularJS中,服务的一些写法是这样的: var app = angular.module('app',[]); app.provider('providerName', function(){...}); app.service('serviceName', function(){}); app.factory('factoryName', function(){}); 等同于: app.config(['$provide',

如何注册MySQL到服务

注册MySQL到服务必须以管理员身份运行命令行程序cmd.exe输入mysqld -install将MySQL添加到本地服务. 输入net start mysql启动MySQL.

将bat批处理文件注册成windows服务

C:\Users\lenovo>sc create MyService binPath= "C:\Program Files\restartOracle.bat"  type= share start= auto displayname= "AutoStartOracle Services"[SC] CreateService 成功 C:\Users\lenovo>services.msc C:\Users\lenovo>sc help sc qu