AngularJS的service与provider

一.$http服务

   示例：通过$http服务，请求服务器端数据。

		<div ng-controller="LoadDataCtrl">
			<ul>
				<li ng-repeat="user in users">
					{{user.name}}
				</li>
			</ul>
		</div>

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...");
    });
}]);

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

二.factory服务

   自定义service，得以在多个controller中复用，这也是service的本质。

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

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);
            }
        });
    }
]);

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

三.$fiter服务

  

   示例：

		{{ 1304375948024 | date }}
		<br>
		{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}
		<br>
		{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}
		<br>

自定义$filter

{{'Jason'|filter1 }}

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

以上部分内容来自慕课网大漠穷秋老师的视频截图