14-Angular供应商和自定义服务

在Angular有供应商的概念，可配置Angular的一些服务。

<div ng-controller="Aaa">
    <!-- {{name}} -->
    @@[email protected]@
</div>

<script type="text/javascript">

var m1 = angular.module(‘myApp‘,[]);

m1.config([‘$interpolateProvider‘,function($interpolateProvider){

    //配置表达式 {{}}
    $interpolateProvider.startSymbol(‘@@‘);
    $interpolateProvider.endSymbol(‘@@‘);

}]);

m1.controller(‘Aaa‘,[‘$scope‘,‘$log‘,function($scope,$log){
    $scope.name = ‘xiecg‘;
    $log.debug(‘hello‘);
}]);

</script>

我们以前面提到的$interpolate为例子，配置angular渲染页面的数据的表达式，不在通过{{}}渲染而是@@符号。

<script type="text/javascript">

    var m1 = angular.module(‘myApp‘,[]);
    m1.config([‘$logProvider‘,function($logProvider){
        $logProvider.debugEnabled(false);    //为false禁用debug功能
    }]);
    m1.controller(‘Aaa‘,[‘$scope‘,‘$log‘,function($scope,$log){
        $log.debug(‘hello‘);
    }]);

</script>

这样debug的功能就完全禁用掉。

下面看看angular的自定义服务。

使用 factory 自定义服务，无法使用 config 配置。

<script type="text/javascript">

var m1 = angular.module(‘myApp‘,[]);
m1.factory(‘myService‘,function(){
    return {
        name : ‘xiecg‘,
        getName : function(){
            return this.name;
        }
    };
});

m1.controller(‘Aaa‘,[‘$scope‘,‘myService‘,function($scope,myService){
    console.log(myService.getName());
}]);
</script>

注意我们在controller中引入自定义服务是不带$的，主要是区分内置&自定义。

使用 provider 自定义服务，可以配置 config。

<script type="text/javascript">

var m1 = angular.module(‘myApp‘,[]);

m1.config([‘myServiceProvider‘,function(myServiceProvider){
    console.log(myServiceProvider);
    myServiceProvider.name = ‘XCG‘;
}]);
m1.provider(‘myService‘,function(){
    return {
        name : ‘xiecg‘,
        $get : function(){
            return {
                name : this.name,
                getName : function(){
                    return this.name;
                }
            };
        }
    };
});

m1.controller(‘Aaa‘,[‘$scope‘,‘myService‘,function($scope,myService){
    console.log(myService.getName());
}]);
</script>

依然能获取name值，也可以像前面的章节那样使用 config 配置。

再看一个例子。

<script type="text/javascript">

var m1 = angular.module(‘myApp‘,[]);

m1.config([‘myRandomNumProvider‘,function(myRandomNumProvider){
    myRandomNumProvider.int(true);
}]);
m1.provider(‘myRandomNum‘,function(){
    return {
        bolInt : false,
        int : function(argBol){
            this.bolInt = argBol ? true : false;
        },
        $get : function(){
            var _this = this;
            return function(num1,num2){
                return _this.bolInt ? Math.round(Math.random() * (num2 - num1) + num1) : Math.random() * (num2 - num1) + num1;
            };
        }
    };
});

m1.controller(‘Aaa‘,[‘$scope‘,‘myRandomNum‘,function($scope,myRandomNum){
    console.log(myRandomNum(1,10));
}]);
</script>

获取随机数，注意myService的config，将int设置为true表示整数，false表示有小数。

补充：多个服务间的通信问题。

<script type="text/javascript">

var m1 = angular.module(‘module‘,[]);
m1.factory(‘myService‘,function(){
    return {
        name : ‘xiecg‘,
        getName : function(){
            return this.name;
        }
    };
});

var m2 = angular.module(‘myApp‘,[‘module‘]);    //m2模块需要m1模块的服务，引入m1模块的名字即可
m2.controller(‘Aaa‘,[‘$scope‘,‘myService‘,function($scope,myService){
    console.log(myService);
}]);

</script>

学习笔记，如有不足，请指正！转载请保留原文链接，谢谢。

最後，微博求粉，谢谢。