anjular中Service、Factory、Provider的使用与js中创建对象的总结

在学习anjular中Service的使用时，发现和js中的创建对象的方式有一定的联系，所以总结了anjular中Service、Factory、Provider的使用方式与js创建对象的方式

一、先总结下js中创建对象的几种方式

1.工厂模式 

function createObject(username, password) {
    var object = new Object(); //等价于 var object={};
    object.username = username; object.password = password;
    object.get=function(){
        alert(this.username); //等价于alert(a.username)
    }
    return object;
}
var object = createObject("zhangsan", "123"); //此方法没有用new相    当于直接调用函数
object.get(); //zhangsan         

 

特点：每创建一个对象会为方法创建一份独立的空间，较耗内存。因为函数createObject返回了一个对象，创建对象时不用new就直接得到一个对象，。 

 

2.构造函数 

function Person(username, password) {
     //在执行第一行代码前，js引擎会为我们生成一个对象
    this.username =username; this.password = password;
    this.getInfo = function() {
        alert(this.username);
    }
    //此处有一个隐藏的return语句，用于将之前生成的对象返回
    //只有在后面用new的情况下，才会出现注释所述的这两点情况
}
var person = new Person("zhangsan", "123");//用了new才能得到一个对象，否则person的值会为undefuned
person.getInfo(); //zhangsan    

特点：同样每创建一个对象都会为方法开辟一个独立的空间；在实例化对象时必须要用new，这样this才会指向实例化的对象，不用this相当于直接调用函数，得到的person为undefuned。

 

3. 原型方式与构造函数结合 

function Person(username,password) {
    this.username = username;
    this.password = password;
}
Person.prototype.getInfo = function() {
    alert(this.username);
}
var p = new Person("lisi","123456"); //此方式包含了构造函数方式，所以创建对象需要使用new
p.getInfo();

特点：单纯的原型方式是无法使用形参传递参数的。所有的对象共享同一个方法，使用了构造函数的this，创建对象需要new。

 

二、anjularjs创建服务的三种方法 service、factory、provider

 

　　

　　

1.service

(1)service是通过构造函数创建服务，一般直接用this，来操作数据、定义函数。

(2)service()方法很适合使用在功能控制比较多的service里面

(3)不能通过config配置

(4)在定义服务时不进行实例化，控制器调用myService时进行实例化，且只进行实例化一次

 

var myApp = angular.module("myApp",[]);
myApp.service("myService",function(){
    var data1="data1";
    this.data2="data2";
    this.getData1=function(){
        return data1;
    };
});
myApp.controller("myCtr1",["$scope","myService",function($scope,myService){
    $scope.getWay1=function(){
        console.log( myService.getData1() );
    };
    $scope.getWay2=function(){
        console.log( myService.data2 );
    };
}]);

<div ng-controller="myCtr1">
    <button ng-click="getWay1()"></button> //data1
    <button ng-click="getWay2()"></button> //data2
</div>    

2.factory

(1)它是一个可注入的function，它和service的区别就是：factory是普通function，而service是一个构造器(constructor)，这样Angular在调用service时会用new关键字，而调用factory时只是调用普通的function，所以factory必须返回对象才能得到相应的值，而service可以不返回。

(2) 用 Factory 就是创建一个对象，为它添加属性，然后把这个对象返回出来。你把 service 传进 controller 之后，在 controller 里这个对象里的属性就可以通过 factory 使用了。

(3)在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候，factory()是一个非常不错的选择

(4)同service一样在控制器中注入式进行实例化一次，定义时不进行实例化。

 

var app = angular.module('myApp', []);
app.factory('myFactory', function() {
    console.log('instance myFactory');
    var factory = {};
    var data1= "data1";
    factory.data2 = "data2";
    factory.getData1 = function() {
        return data1;
    };
    return factory;
});  

app.controller('myCtrl',["$scope","myFactory",function(){
    $scope.getWay1 = function() {
        alert(myFactory.getData1());
    };
    $scope.getWay2= function() {
        alert(myFactory.data2);
    };
}]);  

<div ng-controller="myCtrl">
        <button ng-click="getWay1()">按钮一</button>   //data1
        <button ng-click="getWay2()">按钮二</button>   //data2
</div>
 

factory也可以这样返回对象：

app.factory('myFactory', function() {
    return {
        getWay1:functory(){
        },
        getWay2:functory(){
        }
    }
});
     

3.provider

(1) Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前，先进行模块范围的配置，那就应该用 provider。

(2)provider在定义时就进行实例化，且进行实例化一次

(3)provider必须有一个$get方法

 

[例一]

var app = angular.module('myApp', []);
app.provider('testProvider', function(){
    console.log('instance testProvider');
    var f = function(name) {
        alert("Hello, " + name);
    };
    this.$get = function(){
        return f;
    };
});

app.controller('myCtrl1', function($scope, testProvider) {
    $scope.onclick1 = function() {
        testProvider("十盏");
    };
});
app.controller('myCtrl2', function($scope , testProvider) {
    $scope.onclick2 = function() {
        testProvider("provider: 十盏");
    };
});

<div ng-controller="myCtrl1">
    <button ng-click = "onclick1()">请点击我1</button> //十盏
</div>
<div ng-controller="myCtrl2">
    <button ng-click = "onclick2()">请点击我2</button>
    //provider: 十盏
</div>

 

[例二]

var app = angular.module('app', []);
app.provider('movie', function () {
    var version;
    return {
       setVersion: function (value) {
            version = value;
        },
        $get: function () {
            return {
                title: 'The Matrix' + ' ' + version
            }
        }
    }
});

app.config(function (movieProvider) {    //在config阶段定义的服务的名字+Provider
    movieProvider.setVersion('Reloaded');
});
app.controller('ctrl', function (movie) {
    expect(movie.title).toEqual('The Matrix Reloaded');
});        

 

　　希望大家多多交流与指正！

 

感谢分享的参考资料：

　　http://blog.csdn.net/u012841667/article/details/52751222

　　https://segmentfault.com/a/1190000003096933