angularjs factory,service,provider 自定义服务的不同
angularjs框架学了有一段时间了，感觉很好用。可以把angularjs的app理解成php的class，controller是控制器，而内置服务和自定义服务就可以理解成models了。angularjs的内置服务多，例如：$scope,$rootScope,$http,$q,$resource,$routeProvider等等，下面来说一下怎么自定义服务
一，factory,service,provider自定义服务，services.js
'use strict';
/* Services */
var phonecatServices = angular.module('phonecatServices', []);
phonecatServices.factory('facetorytest', ['$window', //factory方式
function($window){
var test = {
firstname:"tank",
lastname:function(){
return "zhang";
}
};
$window.alert('aaaa'); //内置服务可以注入
return test;
}
]);
phonecatServices.service('servicetest', ['$window', //service方式
function($window){
$window.alert('bbbb'); //内置服务可以注入
this.firstname = "tank";
this.lastname = function(){
return "zhang";
}
}
]);
phonecatServices.provider('providertest',[ //provider方式，内置服务不可以注入
function(){
this.test = {
"firstname":"tank",
"lastname":"zhang"
}
this.$get = function () {
return this.test;
};
}
]);
二，controller调用自定义模块，controllers.js
'use strict';
/* Controllers */
var phonecatControllers = angular.module('phonecatControllers', []);
//写过js function的对这种调用方式，很熟悉，服务名称不能变
function TestCtrl($scope,facetorytest,servicetest,providertest) {
$scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname();
$scope.servicetest = servicetest.firstname+" "+servicetest.lastname();
$scope.providertest = providertest.firstname+" "+providertest.lastname;
}
//这种调用方式根jquery非常的像，服务名称也不能变
phonecatControllers.controller('TestCtrl',function($scope,facetorytest,servicetest,providertest) {
$scope.facetorytest = facetorytest.firstname+" "+facetorytest.lastname();
$scope.servicetest = servicetest.firstname+" "+servicetest.lastname();
$scope.providertest = providertest.firstname+" "+providertest.lastname;
});
//以注入的方式来调用，服务名称可以改变
phonecatControllers.controller('TestCtrl',['$scope',"facetorytest","servicetest","providertest",
function($scope,facetory111,service111,provider111) { //自定义,服务名称
$scope.facetorytest = facetory111.firstname+" "+facetory111.lastname();
$scope.servicetest = service111.firstname+" "+service111.lastname();
$scope.providertest = provider111.firstname+" "+provider111.lastname;
}
]);
三，创建app把上面的service和controller接合到一起。app.js
'use strict';
/* App Module */
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers', //上面定义的controller
'phonecatServices' //上面自定义的服务
]);
四，html中显示
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body > <div ng-controller="TestCtrl">
<p>{{facetorytest}}</p>
<p>{{servicetest}}</p>
<p>{{providertest}}</p>
</div> </body>
</html> 显示结果： tank zhang
tank zhang
tank zhang
五，错误纠正
在网上看到，有人说service是不能注入内置服务器的，但是实际操作结果是provider是不能注入内置服务的。我用的angularjs的版本是AngularJS v1.2.14
phonecatServices.provider('providertest',['$window',
function($window){
$window.alert('cccc'); //报错
this.test = {
"firstname":"tank",
"lastname":"zhang"
}
this.$get = function () {
return this.test;
};
}
]);
原文链接：http://blog.51yip.com/jsjquery/1606.html
angularjs factory,service,provider 自定义服务的不同的更多相关文章
- angular factory Services provider 自定义服务 工厂
转载于 作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1602.html 1.在app.js 中声明了模块的依赖 var phonecatApp = angular ...
- factory service provide自定义服务
1.factory factory , 就是你提供一个方法, 该方法返回一个对象的实例, 对于 AngularJS 的 factory 来说, 就是先定义一个对象, 给这个对象添加属性和方法, 然后返 ...
- AngularJS Factory Service Provider
先看看http://www.cnblogs.com/mbydzyr/p/3460501.html http://www.oschina.net/translate/angularjs-factory- ...
- AngularJS 讲解五, Factory ,Service , Provider
一. 首先说一下,为什么要引入Factory,Service和Provider这三个Service层. 1.因为我们不应该在controller层写入大量的业务逻辑和持久化数据,controller层 ...
- angularjs 中 Factory,Service,Provider 之间的区别
本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...
- [译]AngularJS中几种Providers(Factory, Service, Provider)的区别
原文: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/ 什么是Provider? Angula ...
- AngularJs学习笔记5——自定义服务
前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 ...
- AngularJS学习---REST和自定义服务(REST and Custom Services) ngResource step 11
1.切换目录 git checkout step- npm start 2.效果图 效果图和step 10的没有什么差别,这里主要的改动都是代码,代码做了很多优化,这里效果图就不再贴出来了. 3.实现 ...
- angula的factory service provider
本人学了一段时间的angular的服务(factory.service.provider),有了自己的一些对于他们的见解,如果说的对,敬请赐教!!! 以后更新
随机推荐
- I - u Calculate e
Description A simple mathematical formula for e is where n is allowed to go to infinity. This can ac ...
- Java的String&StringBuffer&StringBuilder
一:String类 1.String对象的初始化 由于String对象特别用,所以在对String对象进行初始化时,Java提供了一种简化的特殊语法,格式如下: String s = "ab ...
- symfony配置
1.获取配置的一些变量 在HttpFoundation/Kernel.php 文件里面有函数 getKernelParameters ()可以获取一些配置变量的数组.有需要可以从那里获取. 2.配置s ...
- 【转】实战Nginx与PHP（FastCGI）的安装、配置与优化
原文连接:http://ixdba.blog.51cto.com/2895551/806622 原文作者:南非蚂蚁 转载注明以上信息 一.什么是 FastCGIFastCGI是一个可伸缩地.高速地在H ...
- 【3】python核心编程 第五章-数字
1.用大写字母 “L”表示长整数 尽管 Python 也支持用小写字母 L 标记的长整型,但是我们郑重推荐您仅使用大写的 “L”, 这样能有效避免数字1 和小写L 的混淆.Python 在显示长整数类 ...
- IClone地形编辑器结合T4M插件在Unity3D使用
通过IClone编辑器打造的地形,经过T4M插件的转化后,资源占用极少,比在Unity中自己刷出来的地形再通过T4M转化的要小的的多多了,非常适合用在手机上. IClone地形编辑器下载地址: 如果对 ...
- Android创建和使用数据库详细指南(1)
http://database.51cto.com/art/200903/113334.htm 数据库支持每个应用程序无论大小的生命线,除非你的应用程序只处理简单的数据,那么就需要一个数据库系统存储你 ...
- ant的入门 配置与安装
最近需要用ant来生成文件,java类.我才开始了解了这个工具.仔细看了一下,感觉这个小工具的强大功能. 博主也是初学者,在网上收集了资料,尝试了配置:感觉有些高手写得不错变引用之. 配置如下: 以上 ...
- Randomized QuickSelect
In this blog, we give a solution for Quick Select. Here, we have an improvement. The idea is to rand ...
- Valid Palindrome 解答
Question Given a string, determine if it is a palindrome, considering only alphanumeric characters a ...