angularjs->服务

service

//service()通过构造函数的方式让我们创建service，
// 我们可以使用原型模式替代javaScript原始的对象来定义service。
// 和factory()方法一样我们也可以在函数的定义里面看到服务的注入,
// 参数中可以注入$http(不用就可以不写)

// 第二个参数回调函数能够当做构造函数来执行，创建一个对象
// angular其他的功能部件的工厂函数参数中，传入服务名就可以拿到这个对象
// 也就可以应用这个对象中的属性和方法
service：
Angularjs模块上的一个功能部件，用app.service(服务名，回调函数)语法来创建
在其他Angularjs功能部件的的回调函数的参数列表中，直接输入服务的名字，
就可以拿到一个对象，这个对象是服务函数的回调函数当做构造函数执行之后拿到的对象

html结构：

    <div ng-app='s9.app'>
        <div ng-controller='MainController'>
            {{data}}
        </div>
    </div>

js代码：

var app = angular.module("s9.app",[]);
app.service("MainService",function(){
    this.data = [
        {name: '张三', phone: '18612345673', state: '邀请中'},
        {name: '李四', phone: '18612345674', state: '已接受'},
        {name: '王五', phone: '18612345675', state: '邀请中'},
        {name: '赵六', phone: '18612345676', state: '已拒绝'}
    ];
});
app.controller("MainController",function($scope,MainService){
    $scope['data'] = MainService.data;
})

factory

factory()让我们通过返回一个包含service方法和数据的对象来定义一个service。

html结构

<div ng-app="s9.app">
    <div ng-controller="MainController">
        <div>{{data.array}}</div>
        <div>{{data.name}}</div>
    </div>
</div>

js代码

var app = angular.module("s9.app",[]);
// 第一个参数：服务名
// 第二个参数：回调函数，
app.factory("modelService",function(){
    var serviceObj = {};
    serviceObj.array = [1,2,3,4];
    serviceObj.name = "my factory";
    // 必须有返回值，app.service相当于构造函数来执行，所以不用返回值
    return serviceObj;
});
// 需要的时候注入就可以了（第二个参数）
app.controller("MainController",function($scope,modelService){
    $scope.data = modelService;
})

provider

html

<div>
    <div ng-controller="MainController">
        {{data}}
    </div>
</div>

js代码

var app = angular.module("s9.app",[]);
// 参数一：服务名
// 参数二：回调函数，它返回的对象不是服务对象，是配置对象
// 配置对象的$get字段上的函数，执行之后，返回的对象才是服务对象
app.provider("modelService",function(){
    var url = "http://10.79.1.40";
    var providerObj = {
        // 第一部分
        setUrl: function(newUrl){
            url = newUrl;
        },
        // 第二部分
        // 这个函数返回的对象才是服务对象
        $get: function(){
            var serviceObj = {};
            serviceObj.url = url + ":9080";
            // 有返回值
            return serviceObj;
        }
    }
    // 千万不要忘记返回（返回的是配置对象）
    return providerObj;
});
// app.config()里面设置providerObj中的第一部分
// 也就是：将provider注入到.config()方法里面
// 参数是：服务名 + Provider，这个是angularjs的规定
// config在provider声明之后，其他功能部件执行之前之前
app.config(function(modelServiceProvider){
    modelServiceProvider.setUrl("http://192.168.26.72");
});
// 控制器、服务、run...之类可以调用第二部分的返回对象 serviceObj
// 第二个参数：服务名
// 这样就可以和其他方式一样使用这个service了
app.controller("MainController",function($scope,modelService){
    $scope.data = modelService;
    // modelService 只有一个属性url，
    // modelService也就相当于 $get方法返回的 serviceObj 对象
    console.log(modelService);
})