angularjs1-6,自定义服务
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script> </head>
当你初试Angular 时,很自然地就会往controller 和scope 里堆满不必要的逻辑。一定要早点意识到,
controller 这一层应该很薄;也就是说,应用里大部分的业务逻辑和持久化数据都应该放在service
里。很多人问道,关于如何在controller 该干的事。出于内存性能的考虑,controller 只在需要
的时候才会初始化,一旦不需要就会被抛弃。因此,每次当你切换或刷新页面的时候,Angular 会清空当前的
controller。与此同时,service可以用来永久保存应用的数据,并且这些数据可以在不同的controller之间使用。
Angular 提供了3种方法来创建并注册我们自己的服务。1.Provider2.Factory3.Service
<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}
</div>
<script>
var m1 = angular.module('myApp',[],function($provide){//通过angular.module的第三个参数配置服务
$provide.provider('providerServices01',function(){//providerServices01是服务的名称,第二个参数是函数,自定义的服务。
this.$get=function(){
return {
message:'this is providerServices01'
}
}
})
}); console.log(m1);
m1.controller('firstController',['$scope','providerServices01',function($scope,providerServices01){//在controller中使用服务
console.log(providerServices01);
$scope.name='张三';
}]);
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script> </head> <body ng-app="myApp">
<div ng-controller="firstController">
{{name}} </div>
<script>
var m1 = angular.module('myApp',[]);//module.config配置服务
m1.config(function($provide){
$provide.provider('providerServices01',function(){
this.$get=function(){//服务的方法
return {
message:'this is providerServices01'
}
}
}); $provide.provider('providerServices02',function(){
this.$get=function(){
var _name='';
var service={};
service.setName=function(name){
_name=name;
}
service.getName=function(){
return _name;
}
return service;
}
});
})
console.log(m1); m1.controller('firstController',['$scope','providerServices01','providerServices02',function($scope,providerServices01,providerServices02){
console.log(providerServices01);
providerServices02.setName('李四1111');
$scope.name= providerServices02.getName();
console.log( providerServices02);
}]); </script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script> </head>
//自定义服务
<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}
</div>
<script>
var m1 = angular.module('myApp',[],function($provide){
$provide.provider('providerServices01',function(){
this.$get=function(){//需要get
return 'this is providerServices01';
}
});
$provide.factory('factoryServices01',function(){
return {//不需要$get
message:'this is factoryServices01'
}
});
$provide.factory('factoryServices02',function(){
return 'this is factoryServices01 text';
});
$provide.service('serviceServices01',function(){
return {
message:'this is serviceServices01'
}
})
});
console.log(m1); m1.controller('firstController',['$scope','providerServices01','factoryServices01','factoryServices02','serviceServices01',function($scope,providerServices01,factoryServices01,factoryServices02,serviceServices01){
console.log(providerServices01);
console.log(factoryServices01);
console.log(factoryServices02);
console.log(serviceServices01);
$scope.name='张三';
}]);
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="firstController">
{{name}}
</div>
<script>
var m1 = angular.module('myApp',[]);
m1.provider('providerServices01',function(){
this.$get=function(){
return {
message:'this is providerServices01'
}
}
});
m1.service('serviceServices01',function(){
return {
message:'this is serviceServices01'
}
})
console.log(m1);
m1.controller('firstController',['$scope','providerServices01','serviceServices01',function($scope,providerServices01,serviceServices01){
console.log(providerServices01);
console.log(serviceServices01);
$scope.name='张三';
}]);
</script>
</body>
</html>
angularjs1-6,自定义服务的更多相关文章
- angularJS1笔记-(4)-自定义服务
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- angularjs 自定义服务的三种方式
angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...
- angularJs自定义服务(实现签名和加密)
写在前面: angularJS是google公司主推的js开发优秀框架... 页面展示: 在应用中进行加密是普遍存在的,个人建议在前端实现加密签名(前端加密是否必要来自知乎:http://www.zh ...
- angularJs自定义服务
在AngularJS中,系统内置的服务都是以$开头,所以我们的自定义服务尽量避免以$开头.自定义服务的方式有如下几种: 使用Module的provider方法 使用Module的factory方法 使 ...
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- Dynamics AX 2012 R2 在增强入站端口中找不到自定义服务操作
Reinhard写好自定义服务A,添加好服务操作A1,A2,A3..... 然后,Reinhard在增强的入站端口,选择服务操作时,却找不到这些A1,A2,A3. 查找相关资料 ...
- angularJs 自定义服务 provide 与 factory 的区别
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
- Android系统在新进程中启动自定义服务过程(startService)的原理分析
在编写Android应用程序时,我们一般将一些计算型的逻辑放在一个独立的进程来处理,这样主进程仍然可以流畅地响应界面事件,提高用户体验.Android系统为我们提供了一个Service类,我们可以实现 ...
- angular factory Services provider 自定义服务 工厂
转载于 作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1602.html 1.在app.js 中声明了模块的依赖 var phonecatApp = angular ...
- 通过ModuleImplAdvertisement向自定义服务传递参数
无意中发现通过ModuleImplAdvertisement可以向自定义服务传递参数,有空试一试. —————————————————————————————————————————————————— ...
随机推荐
- HDU1412 {A} + {B}
2019-05-17 10:15:01 每个元素之间有一个空格隔开. 每行最后一的元素后面没有空格,区别于HDU人见人爱A - B 注意使用STL的时候要清空 . a.clear(); #inclu ...
- A - Boy or Girl(set)
Problem description Those days, many boys use beautiful girls' photos as avatars in forums. So it is ...
- 从 Zero 到 Hero ,一文掌握 Python--转
https://www.oschina.net/translate/learning-python-from-zero-to-hero 第一个问题,什么是 Python ?根据 Python 之父 G ...
- 使用NPOI实现简单的Excel导出功能
[1]NPOI是啥? NPOI是指构建在POI 3.x版本之上的一个程序,NPOI可以在没有安装Office的情况下对Word或Excel文档进行读写操作. POI是一个开源的Java读写Excel. ...
- Windows下PHP的redis扩展下载地址
Redis下载地址:http://windows.php.net/downloads/pecl/releases/redis/ igbinary下载地址:http://windows.php.net/ ...
- [ Tools ] [ MobaXterm ] [ SSH ] [ Linux ] 中文顯示解決
預設是無法顯示中文的,需要修改連線的 Terminal Setting
- readonly and const variable
共同点:都是常量: 不同点:const的值必须在编译前确定,通常在声明的同时赋值:而readonly可在运行时确定:
- winform右键菜单
public partial class Form1 : Form { ContextMenuStrip cms; Bitmap bm ; public Form1() { InitializeCom ...
- DP:***24种设计模式--转自刘伟
转自于高人的文章:http://blog.csdn.net/lovelion/article/details/17517213 2012年-2013年,Sunny在CSDN技术博客中陆续发表了100多 ...
- 关于 Windows 10 如何扩展分区与合并分区
前言 相信大部分人都遇见磁盘不够用的问题吧,然后都在后悔当初为什么就给 x 盘分了 10G 的容量吧. 不过没关系,自从 Windows 7 开始( xp 我也不知道有毛有),Windows 自带的磁 ...