首页 > 技术文章 > angularjs注册服务,使用服务

xiaomingge 2017-02-16 17:41 原文

总结了三种angularjs的注册服务,具体见代码
第一种通过provider注册服务:

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <script src="angular.js"></script>
    <script>
        var app = angular.module("myapp",['ng']);
        app.provider('MyProvider',function(){
            var service = {};
            var _name = '';
            var _age = '';
            service.setfunc = function(name,age){
                _fruits = fruits;
                _color = color;
            }
            service.show= function(){
                return _fruits +''+ _color ;
            }
            this.$get = function(){
                return service;
            }
        });
        app.controller("ctrl",function($scope,MyProvider){
            MyProvider.setfunc ('苹果','红色');
            console.log(MyProvider.show());
        })
    </script>
    <title>Document</title>
</head>
<body ng-controller="ctrl">
    
</body>
</html>

第二种通过service注册服务:

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <script src="angular.js"></script>
    <script>
        var app = angular.module("myapp",['ng']);
        app.service('MyService',function(){
            var service = {};
            var _name = '';
            var _age = '';
            this.SetInfo = function(name,age){
                _name = name;
                _age = age;
            }
            this.ShowInfo = function(){
                return _name +':'+ _age;
            }
        });
        app.controller("ctrl",function($scope,MyService){
            MyService.SetInfo('刘晓明',27);
            console.log(MyService.ShowInfo());
            console.log(1111);
        })
    </script>
    <title>Document</title>
</head>
<body ng-controller="ctrl">
    
</body>
</html>

第三种通过factory注册服务:

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <script src="angular.js"></script>
    <script>
        var app = angular.module("myapp",['ng']);
        app.factory('MyFactory',function(){
            var service = {};
            var _name = '';
            var _age = '';
            service.SetInfo = function(name,age){
                _name = name;
                _age = age;
            }
            service.ShowInfo = function(){
                return _name +':'+ _age;
            }
            return service;
        });
        app.controller("ctrl",function($scope,MyFactory){
            MyFactory.SetInfo('刘晓明',27);
            console.log(MyFactory.ShowInfo());
            console.log(1111);
        })
    </script>
    <title>Document</title>
</head>
<body ng-controller="ctrl">
    
</body>
</html>

 

推荐阅读