angularjs中service

当两个或几个controller中有重复的代码时，需要将其抽成一个服务，即service。

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

 注：chrome有跨域问题，无法打开本地'data.json'，解决方法可见另一篇博文。

2、自己编写一个服务

var myServiceApp = angular.module("MyServiceApp", []);
myServiceApp.factory('userListService', ['$http',//这里是自己编写的服务userListService
    function($http) {
        var doRequest = function(username, path) {
            return $http({
                method: 'GET',
                url: 'users.json'
            });
        }
        return {
            userList: function(username) {
                return doRequest(username, 'userList');
            }
        };
    }
]);
//在下面很多controller中都可能用到上述服务，引用即可
myServiceApp.controller('ServiceController', ['$scope', '$timeout', 'userListService',
    function($scope, $timeout, userListService) {
        var timeout;
        $scope.$watch('username', function(newUserName) {//封装了watch，可用于监测模型的变化
            if (newUserName) {
                if (timeout) {//该函数是防止页面抖动的处理（即不是键盘每输入一个字符就向后台发起一个请求）
                    $timeout.cancel(timeout);//延时350毫秒，当350毫秒没有输入时才发起请求
                }
                timeout = $timeout(function() {
                    userListService.userList(newUserName)//可调用服务中的方法
                        .success(function(data, status) {
                            $scope.users = data;
                        });
                }, 350);
            }
        });
    }
]);

//...

自定义服务的特点：

1、不以$符号开头进行命名

2、与内置服务一样需要注入，但是要放在最后一个

service的特点：

1、都是单例的（只有一个实例）

2、由$injector负责实例化（不需new等方法手动实例化）

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

4、在需要使用的地方使用依赖注入机制注入service