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,如需转载请自行联系原作者
相关文章
|
JavaScript 开发工具 git
Nuxt3 实战 (三):使用 release-it 自动管理版本号和生成 CHANGELOG
这篇文章介绍了如何使用release-it工具实现以下功能:增加版本号并提交Git、生成变更日志(Changelog)并提交到Git、创建Git标签并推送到远程仓库、发布到npm等软件仓库、在GitHub、GitLab等平台创建发行版。文章还提到了前置知识,介绍了SemVer规范的内容和安装依赖的步骤。在文章的最后,展示了使用release-it生成的效果预览、git打的标签Tag以及待办事项(Todo)。最后还提到了安装NuxtUI。
390 0
Nuxt3 实战 (三):使用 release-it 自动管理版本号和生成 CHANGELOG
|
算法 调度 开发者
操作系统的心脏:深入理解进程调度
本文将探讨操作系统中至关重要的部分——进程调度。进程调度负责管理计算机的CPU时间分配,确保多任务环境中每个进程都能公平地获得处理资源。通过深入分析不同的调度算法,如先来先服务(FCFS)、短作业优先(SJF)和优先级调度,本文揭示了它们的优势、缺陷及适用场景。我们还将讨论现代操作系统如何实现这些算法,并评估多级反馈队列等高级调度策略如何提高系统效率。无论是开发者设计更高效的应用程序,还是用户优化自己的使用体验,了解进程调度的基本原理和实践应用都是不可或缺的一环。
|
机器学习/深度学习 算法 安全
基于图像识别的面瘫检测技术
图像识别是通过计算机对特定情况进行图像采集处理,分析匹配目标,提取特征,训练分类模型等步骤实现,在国内外科学家的努力下,实现了突飞猛进的变化,人们开始将这一技术应用于,医学,农业,安防,交通,车辆领域。在这一背景之下,许多先进的医疗手段都离不开图像识别技术的支持,小到日常的体检如胸片,心电图我们都可以通过自助取片获得计算机提供的初步诊断信息,之后再找医生问诊,大到一些微创手术,脑部ct技术,心脏病理分析,肺结核图像识别,糖尿病患者的视网膜图像技术
643 0
|
存储 数据采集 文件存储
|
域名解析 缓存 开发框架
HTTP报错状态码详解
HTTP报错状态码详解
1649 0
|
缓存 负载均衡 网络协议
再谈网络协议
再谈网络协议
typescript37-class的构造函数实例方法继承(extends
typescript37-class的构造函数实例方法继承(extends
203 0
typescript37-class的构造函数实例方法继承(extends

热门文章

最新文章

下一篇
开通oss服务