Service与Provider

bijian1013

浏览: 3227948 次
性别:
来自: 深圳

最近访客更多访客>>

dy.f

godandghost

lovefiger

marsgrayson

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AngularJS

JavaScript AngularJS Service Provider

我们不要试图去复用Controller，当我们发现两个或多个Controller有相同的代码时，我们应该抽取一个服务。

一.使用$http服务

HTTPBasic.html

<html ng-app="MyModule">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script src="framework/angular-1.3.0.14/angular.js"></script>
		<script src="HTTPBasic.js"></script>
	</head>
	<body>
		<div ng-controller="LoadDataCtrl">
			<ul>
				<li ng-repeat="user in users">
					{{user.name}}
				</li>
			</ul>
		</div>
	</body>
</html>

HTTPBasic.js

var myModule=angular.module("MyModule",[]);
myModule.controller('LoadDataCtrl', ['$scope','$http', function($scope,$http){
	$http({
        method: 'GET',
        url: 'data.json'
    }).success(function(data, status, headers, config) {
        console.log("success...");
        console.log(data);
        $scope.users=data;
    }).error(function(data, status, headers, config) {
        console.log("error...");
    });
}]);

data.json

[{
    "name": "《用AngularJS开发下一代WEB应用》"
},{
    "name": "《Ext江湖》"
},{
    "name": "《ActionScript3.0游戏设计基础（第二版）》"
}]

运行结果：

大家看到我是将其放到Tomcat容器中运行的，其实新版的FireFox支持本地Ajax请求，因此，可以直接在FireFox中运行。

二.创建自已的Service

MyService1.html

<html ng-app="MyServiceApp">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.css">
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="MyService1.js"></script>
</head>

<body>
    <div ng-controller="ServiceController">
        <label>用户名</label>
        <input type="text" ng-model="username" placeholder="请输入用户名" />
        <pre ng-show="username">{{users}}</pre>
    </div>
</body>

</html>

MyService1.js

var myServiceApp = angular.module("MyServiceApp", []);
myServiceApp.factory('userListService', ['$http',
    function($http) {
        var doRequest = function(username, path) {
            return $http({
                method: 'GET',
                url: 'users.json'
            });
        }
        return {
            userList: function(username) {
                return doRequest(username, 'userList');
            }
        };
    }
]);

myServiceApp.controller('ServiceController', ['$scope', '$timeout', 'userListService',
    function($scope, $timeout, userListService) {
        var timeout;
        $scope.$watch('username', function(newUserName) {
            if (newUserName) {
                if (timeout) {
                    $timeout.cancel(timeout);
                }
                timeout = $timeout(function() {
                    userListService.userList(newUserName)
                        .success(function(data, status) {
                            $scope.users = data;
                        });
                }, 350);
            }
        });
    }
]);

//...

users.json

《Ext江湖》
《ActionScript3.0游戏设计基础（第二版）》
《用AngularJS开发下一代WEB应用》

运行效果：

当在用户名这个输入框中输入内容后过一小小会，页面就会发请求获取数据在下面展示出来，如下所示：

特别说明：正常我们每按下一个键就会向后台发送一次请求，页面会不断重刷，timeout表示当我们在页面上输入时，延迟指定的时间（这里是350毫秒）才向后台发送请求。

三.Service的特性

1.Service都是单例的

2.Service由$injector负责实例化（也就是说，不要去new一个Service）

3.Service在整个应用的生命周期中存在，可以用来共享数据

4.在需要使用的地方利用依赖注入机制注入Service

5.自定义的Service需要密致的内置的Service后面

6.内置Service的命名以$符号开头，自定义Service应该避免

四.Service、Factory、Provider本质都是Provider

function provider(name, provider_) {
    assertNotHasOwnProperty(name, 'service');
    //如果provider_是函数或是数组，就创建实例
    if (isFunction(provider_) || isArray(provider_)) {
      provider_ = providerInjector.instantiate(provider_);
    }
    //如果是Provider，必须定义一个$get的factory方法
    if (!provider_.$get) {
      throw $injectorMinErr('pget', "Provider '{0}' must define $get factory method.", name);
    }
    //如果命名和前缀在providerCache中能找到，就会将其返回出去
    return providerCache[name + providerSuffix] = provider_;
}

Service、Provider、Factory本质上都是Provider，只是后面的顺序和格式不同

Provider模式是“策略模式”+“抽象工厂模式“的混合体

五.使用$filter服务

1.$filter是用来进行数据格式化的专用服务

2.AngularJS内置了9个filter：currency,date,filter,json,limitTo,lowercase,number,orderBy,uppercase

3.filter可以嵌套使用（用管道符号|分隔）

4.filter是可以传递参数的

5.用户可以定义自已的filter

date使用实例：

Filter.html

<html ng-app="MyModule">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<script src="framework/angular-1.3.0.14/angular.js"></script>
		<script src="Filter.js"></script>
	</head>
	<body>
		{{ 1304375948024 | date }}
		<br>
		{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
		<br>
		{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}
		<br>
	</body>
</html>

Filter.js

var myModule=angular.module("MyModule",[]);

运行结果：

定义自已的filter实例：

MyFilter.html

<html ng-app="MyModule">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="MyFilter.js"></script>
</head>

<body>
    {{'Hello Angular!'|filter1 }}
</body>

</html>

MyFilter.js

var myModule=angular.module("MyModule",[]);
myModule.filter('filter1',function(){
    return function(item){
        return item + 'o(∩_∩)o';
    }
});

运行结果：