angularjs 自定义服务

转载

mb5ff5901795aaf 2016-08-07 19:40:00

文章标签 html ide 回调函数数组自定义 文章分类 Html/CSS 前端开发

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>
var m1 = angular.module('myApp',[]);

//自定义服务
m1.factory('myService',function(){//服务的名字，回调函数（跟controller语法一样，可以是数组）    
    return {
        name : 'hello',
        show : function(){
            return this.name + ':angular';
        }
    };    
});
m1.controller('Aaa',['$scope','myService',function($scope,myService){//使用myService服务（要形参传进去）
    console.log(myService.show());    
}]);



m1.factory('myRandomNum',function(){
    return function(num1,num2){
        return Math.random()*(num2 - num1) + num1;
    };    
});
m1.controller('Aaa',['$scope','myRandomNum',function($scope,myRandomNum){    
    console.log( myRandomNum(-3,6) );    
}]);



m1.factory('myService',function(){    
    return {
        name : 'hello',
        show : function(){
            return this.name + ':angular';
        }
    };    
});

m1.provider('myService',function(){    
    return {
        name : 'hello',    
        $get : function(){    
            return {
                name : this.name,
                show : function(){
                    return this.name + ':angular';
                }
            };            
        }
    };    
});

m1.config(['myServiceProvider',function(myServiceProvider){    
    console.log(myServiceProvider);    
    myServiceProvider.name = 'hi';    
}]);

m1.controller('Aaa',['$scope','myService',function($scope,myService){    
    console.log(myService.show());    
}]);

m1.provider('myRandomNum',function(){    
    return {
        bolInt : false,
        int : function(argBol){
            if(argBol){
                this.bolInt = true;
            }
            else{
                this.bolInt = 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.config(['myRandomNumProvider',function(myRandomNumProvider){    
    myRandomNumProvider.int(false);    
}]);

m1.controller('Aaa',['$scope','myRandomNum',function($scope,myRandomNum){    
    console.log( myRandomNum(-3,6) );    
}]);

</script>
</head>

<body>
<div ng-controller="Aaa">
   
</div>
</body>
</html>

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module('module1',[]);
m1.factory('myService',function(){
    return {
        name : 'hello',
        show : function(){
            return this.name + ':angular';
        }
    };
});

var m2 = angular.module('myApp',['module1']);
m2.controller('Aaa',['$scope','myService',function($scope,myService){
    console.log(myService.show());
}]);

</script>
</head>

<body>
<div ng-controller="Aaa">
   
</div>
</body>
</html>

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script src="service.js"></script>
<script>


var m2 = angular.module('myApp',['module1']);

m2.controller('Aaa',['$scope','myService',function($scope,myService){
    
    console.log(myService.show());
    
}]);



</script>
</head>

<body>
<div ng-controller="Aaa">
   
</div>
</body>
</html>

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script src="service.js"></script>
<script>


var m2 = angular.module('myApp',['module1']);

m1.config(['myServiceProvider',function(myServiceProvider){
    
    myServiceProvider.name = 'hi';
    
}]);

m2.controller('Aaa',['$scope','myService',function($scope,myService){
    
    console.log(myService.show());
    
}]);



</script>
</head>

<body>
<div ng-controller="Aaa">
   
</div>
</body>
</html>

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
<script>

var m1 = angular.module('myApp',[]);
m1.service('myService',FnService);//FnService是回调函数（也可以使数组[]），跟controller语法一样，
function FnService(){
    this.name = 'hello';
}
FnService.prototype.age = 20;

m1.controller('Aaa',['$scope','myService',function($scope,myService){    
    console.log(myService.name);
    console.log(myService.age);    
}]);

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

m1.constant('myService','hello angular');
//m1.value('myService','hello angular');
m1.config(['myService',function(myService){
    console.log(myService);
}]);

m1.controller('Aaa',['$scope','myService',function($scope,myService){
    
    console.log(myService);
    
}]);

</script>
</head>

<body>
<div ng-controller="Aaa">
   
</div>
</body>
</html>