angularjs 自定义服务

简介:
<!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>
复制代码

 




本文转自农夫山泉别墅博客园博客,原文链接:http://www.cnblogs.com/yaowen/p/5746941.html,如需转载请自行联系原作者
相关文章
|
10月前
|
移动开发 前端开发 JavaScript
AngularJS 技术深入解析
AngularJS 是一个流行的 JavaScript 框架,用于构建动态的单页面应用程序(SPA)。它提供了一种优雅而强大的方式来开发前端应用,具有出色的数据绑定、模块化和可扩展性等特性。本文将深入探讨 AngularJS 的一些关键技术。
79 0
|
JavaScript
AngularJs错误
AngularJs错误
70 0
|
JSON 前端开发 JavaScript
总结—angularjs项目
总结—angularjs项目
223 0
总结—angularjs项目
|
Web App开发 JavaScript 前端开发
|
JSON 数据格式