首页 > 代码库 > angularjs-factory,provider,service,constant,value,decorator

angularjs-factory,provider,service,constant,value,decorator

1、factory

用 Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来。你把 service 传进 controller 之后,在 controller 里这个对象里的属性就可以通过 factory 使用了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://www.mamicode.com/angular.min.js"></script>
    <script>
        angular.module(‘mod‘, [])
            //定义工厂模块-factory
            .factory(‘fact‘, [function () {                      
                return {
                    str:"testfactory",
                    sum:function (n1,n2) {
                        return n1+n2
                    }
                };
            }])
            //添加依赖注入模块fact
            .controller(‘testCtrl‘, [‘$scope‘,‘fact‘, function ($scope,fact) {
                alert(fact.str)
            }])
    </script>
</head>
<body ng-app=‘mod‘ ng-controller=‘testCtrl‘>
    
</body>
</html>

2、provide

Providers 是唯一一种你可以传进 .config() 函数的 service。当你想要在 service 对象启用之前,先进行模块范围的配置,那就应该用 provider。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://www.mamicode.com/angular.min.js"></script>
    <script>
        angular.module(‘mod‘, [])
            .controller(‘modCtrl‘, [‘$scope‘,‘prod‘, function ($scope,prod) {
                 alert(prod.a+prod.b)
            }])
            .provider(‘prod‘, [function () {              
                this.$get = [function() {
                    return {
                        a:12,
                        b:15
                    };
                }];
            }])
    </script>
</head>
<body ng-app=‘mod‘ ng-controller=‘modCtrl‘>
    
</body>
</html>

3、service

Service 是用"new"关键字实例化的。因此,你应该给"this"添加属性,然后 service 返回"this"。你把 service 传进 controller 之后,在controller里 "this" 上的属性就可以通过 service 来使用了。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://www.mamicode.com/angular.min.js"></script>
    <script>
        angular.module(‘mod‘, [])
            .service(‘serv‘, [function () {
                this.a=12
            }])
            .controller(‘modCtrl‘, [‘$scope‘,‘serv‘, function ($scope,serv) {
                alert(serv.a)
            }])
    </script>
</head>
<body ng-app=‘mod‘ ng-controller=‘modCtrl‘>
    
</body>
</html>

4、constant与value

constant不可修饰

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://www.mamicode.com/angular.min.js"></script>
    <script>
        angular.module(‘mod‘, [])
            .constant(‘VERSION‘, ‘5.0.3‘)
            .value(‘name‘, ‘cisco‘)
            .controller(‘modCtrl‘, [‘$scope‘,‘VERSION‘,‘name‘, function ($scope,VERSION,name) {
                alert(name+‘:‘+VERSION)
            }])
    </script>
</head>
<body ng-app=‘mod‘ ng-controller=‘modCtrl‘>
    
</body>
</html>

5、decorator

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://www.mamicode.com/angular.min.js"></script>
    <script>
        angular.module(‘mod‘, [])
            .constant(‘VERSION‘, ‘5.0.3‘)
            .value(‘name‘, ‘cisco‘)
            .controller(‘modCtrl‘, [‘$scope‘,‘VERSION‘,‘name‘,‘prod‘, function ($scope,VERSION,name,prod) {
                alert(name+‘ ‘+prod.nxos+‘‘+prod.type+‘ ‘+prod.date+‘ ‘+VERSION)
            }])
            .provider(‘prod‘, [function () {
                this.$get = [function() {
                    return {
                        nxos:‘nxos‘,
                        type:‘5548‘
                    };
                }];
            }])
            .decorator(‘prod‘,function ($delegate) {
                $delegate.date=‘2007.1.10‘
                return $delegate
            })
    </script>
</head>
<body ng-app=‘mod‘ ng-controller=‘modCtrl‘>
    
</body>
</html>


angularjs-factory,provider,service,constant,value,decorator