AngularJS学习笔记--服务的创建方法factory() service() provider()等

最新推荐文章于 2024-04-18 09:43:47 发布

菠萝面包

最新推荐文章于 2024-04-18 09:43:47 发布

阅读量350

点赞数

分类专栏： angularjs 文章标签： angularjs 前端

本文链接：https://blog.csdn.net/youngyet/article/details/69802698

版权

angularjs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

AngularJS提供了5种创建服务的方法：
factory()
service()
provider()
constant()
value()
在不同情况下合理的使用这些方法可以让代码变得简洁。

1、factory

factory(serviceName, getFun),factory()函数可以接收两个参数，分别是服务名以及一个函数，这个函数的返回对象就是服务的实例，当服务被创建时该函数就会被调用。

var myApp = angular.module('myApp',[]);
//通过factory创建FactoryService服务
myApp.factory('FactoryService',function(){
    return{
        changeName:function(person){
            person.name = "Tom";
        }
    };
});
//将FactoryService注入到控制器
myApp.controller('myController',['$scope','FactoryService',function($scope,FactoryService){
    $scope.person={
        name:'Jack',
        age:'20'
    };
    $scope.changeName = function(){
        //在controller内部创建方法，调用FactoryService中定义的具体实现
        FactoryService.changeName($scope.person); 
    };
}]);

通过如下html实例化模块，并测试效果:

<body ng-app="myApp">
    <div ng-controller="myController">
        <h3>{{person.name}}</h3>
        <h3>{{person.age}}</h3>
        <button ng-click="changeName()">Change</button>
    </div>
</body>

2、service

service(serviceName,constructor)，service()函数接收方法名、构造函数两个参数，通过调用构造函数实例化服务对象。

myApp.service('ConstructService',function(){
        this.changeName=function(person){
            person.name = "Tom";
        }
});

或先声明一个构造函数,将其传入service方法

var ServiceConstrustor = function(){
    this.changeName=function(person){
        person.name = "Tom";
    };
};
myApp.service('ConstructService',ServiceConstrustor );

3、provider

provider()是最基础的服务创建方法，其他的服务创建方法都是对provider()的简化。provider接收serviceName和aProvider两个参数，aProvider可以是对象、数组（行内注入格式）或函数，对象（或者函数返回的对象）中一定要定义$get方法，该方法会返回一个实例化的服务。

myApp.provider('ProviderService', function() {
    var newName = 'Tom';
    return {
        $get: function() {
            //定义一系列对象、方法
            function changeName(person) {
                person.name = newName;
            }
            //将一系列对象塞进一个对象作为实例化的服务返回
            return {
                changeName: changeName
            };
        }
    };
});

provider()方法最大的特性是提供了名为serviceName+'Provider'的提供者，该提供者可被注入到config()函数中对服务进行配置，以便在不同模块中改变服务的具体实现。

myApp.provider('NameService', function() {
    var newName = 'Tom';
    return {
        //定义配置方法，可在NameServiceProvider中调用
        changeNewName:function(name){
            newName = name;
        },
        $get:function() {
            function changeName(person) {
                person.name = newName;
            }
            return {
                changeName: changeName
            }
        }
    }

});
//在config函数中注入NameServiceProvider，调用相关函数改变服务的配置
myApp.config(function(NameServiceProvider){
    NameServiceProvider.changeNewName('Keli');
});

菠萝面包

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS学习笔记--服务的创建方法factory() service() provider()等

AngularJS提供了5种创建服务的方法： factory() service() provider() constant() value() 在不同情况下合理的使用这些方法可以让代码变得简洁。1、factoryfactory(serviceName, getFun),factory()函数可以接收两个参数，分别是服务名以及一个函数，这个函数的返
复制链接

扫一扫