AI 助理
备案控制台
开发者社区 云计算 文章 正文

angularjs 自定义服务

2017-11-15 951
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 
<!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，如需转载请自行联系原作者
范大脚脚
目录
相关文章
hust_hwu
|
移动开发 前端开发 JavaScript
AngularJS 技术深入解析
AngularJS 是一个流行的 JavaScript 框架，用于构建动态的单页面应用程序（SPA）。它提供了一种优雅而强大的方式来开发前端应用，具有出色的数据绑定、模块化和可扩展性等特性。本文将深入探讨 AngularJS 的一些关键技术。
hust_hwu
121 0
学吧太深了
angularjs使用过滤器
angularjs使用过滤器
学吧太深了
54 0
andyahui
|
JSON 前端开发 JavaScript
总结—angularjs项目
总结—angularjs项目
andyahui
248 0
总结—angularjs项目
青夜之衫
|
数据格式 JSON JavaScript
【AngularJS】—— 5 表单
青夜之衫
758 0
技术小阿哥
angularjs 基础
技术小阿哥
1026 0
范大脚脚
|
Web App开发 JavaScript 前端开发
angularjs1-过滤器
范大脚脚
849 0
技术小牛人
|
JavaScript
angularjs-创建自定义服务
技术小牛人
739 0
zting科技
|
JavaScript
Angularjs 过滤器
zting科技
1012 0
范大脚脚
|
JSON 数据格式
angularjs 过滤器
范大脚脚
948 0
科技小能手
|
Web App开发 JavaScript
AngularJS 动态模板
科技小能手
1145 0

热门文章

最新文章

  • 1
    四大触点，教你从“用户视角”构建数据分析体系
  • 2
    Spring-boot+Dubbo应用启停源码分析
  • 3
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 4
    RocketMq-Request-Reply消息
  • 5
    Confluence 6 手动添加用户
  • 6
    2013年4月20日 通用权限管理系统组件V3.8功能改进说明
  • 7
    Configuring EIGRP Unequal-Cost Paths
  • 8
    PowerShell 指定关键词遍历文件内容
  • 9
    Windows时间服务出现故障 向用户发送错误的时间
  • 10
    三种dedecms调用相关文章的方法
  • 1
    《鸿蒙HarmonyOS应用开发从入门到精通（第2版）》简介
    41
  • 2
    《Python 助力：人工智能模型的“瘦身”与“加速”之旅》
    105
  • 3
    《非计算机专业者：Python 开启人工智能职业新航道》
    31
  • 4
    《Python赋能：智绘智慧城市新蓝图》
    36
  • 5
    《智育新篇：点亮学生人工智能伦理与社会责任之光》
    40
  • 6
    《数据主权：人工智能时代的核心基石与挑战》
    28
  • 7
    鸿蒙HarmonyOS应用开发 | 探索 HarmonyOS Next-从开发到实战掌握 HarmonyOS Next 的分布式能力
    104
  • 8
    鸿蒙原生开发环境的创新与性能优化：从工具到跨平台支持的全方位提升
    258
  • 9
    鸿蒙HarmonyOS应用开发 | 「鸿蒙技术分享」HarmonyOS NEXT元服务卡片实战体验
    153
  • 10
    Qwen-Coder：通过Qwen 2.5模型实现智能代码生成的技术实践
    35

    • 相关课程

    更多
  • AngularJS 快速入门

    • 相关电子书

    更多
  • Angular从零到一
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    DataWorks