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 自定义服务的不同的更多相关文章

  1. angular factory Services provider 自定义服务 工厂

    转载于 作者:海底苍鹰地址:http://blog.51yip.com/jsjquery/1602.html 1.在app.js 中声明了模块的依赖 var phonecatApp = angular ...

  2. factory service provide自定义服务

    1.factory factory , 就是你提供一个方法, 该方法返回一个对象的实例, 对于 AngularJS 的 factory 来说, 就是先定义一个对象, 给这个对象添加属性和方法, 然后返 ...

  3. AngularJS Factory Service Provider

    先看看http://www.cnblogs.com/mbydzyr/p/3460501.html http://www.oschina.net/translate/angularjs-factory- ...

  4. AngularJS 讲解五, Factory ,Service , Provider

    一. 首先说一下,为什么要引入Factory,Service和Provider这三个Service层. 1.因为我们不应该在controller层写入大量的业务逻辑和持久化数据,controller层 ...

  5. angularjs 中 Factory,Service,Provider 之间的区别

    本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...

  6. [译]AngularJS中几种Providers(Factory, Service, Provider)的区别

    原文: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/ 什么是Provider? Angula ...

  7. AngularJs学习笔记5——自定义服务

    前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 ...

  8. AngularJS学习---REST和自定义服务(REST and Custom Services) ngResource step 11

    1.切换目录 git checkout step- npm start 2.效果图 效果图和step 10的没有什么差别,这里主要的改动都是代码,代码做了很多优化,这里效果图就不再贴出来了. 3.实现 ...

  9. angula的factory service provider

    本人学了一段时间的angular的服务(factory.service.provider),有了自己的一些对于他们的见解,如果说的对,敬请赐教!!! 以后更新

随机推荐

  1. (原)使用mkl计算特征值和特征向量

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5585271.html 参考文档:mkl官方文档 lapack_int LAPACKE_sgeev(in ...

  2. 关于PS里图层样式的全局光

    勾选“使用全局光”,则各个图层样式的光源角度都会相同. 我在“内阴影”效果里勾选了“使用全局光”,然后我发现当我在“投影”效果和“斜面和浮雕”效果里选择使用全局光时,它们的光源角度自动变成120度, ...

  3. POJ 2488 A Knight's Journey(DFS)

    A Knight's Journey Time Limit: 1000MSMemory Limit: 65536K Total Submissions: 34633Accepted: 11815 De ...

  4. soap和http(转)

    http:是一个客户端和服务器端请求和应答的标准(TCP).http协议其目的是为了提供一种发布和接收http页面的方法 一 http协议的客户端与服务器的交互:由HTTP客户端发起一个请求,建立一个 ...

  5. leiningen安装记录

    Leiningen是Clojure项目管理工具Leiningen is the easiest way to use Clojure,官网:http://leiningen.org/ 1:首先下载Le ...

  6. 苹果开发证书相关BLOG与Delphi IOS环境安装(超详细)

    注:有好的资源,请添加了上传,上传后,通知管理员,删除旧文件,累积相关的学习资源,方便新手学习 一.相关论坛http://www.2ccc.com/ delphi 合子 www.2pascal.com ...

  7. 喜欢的女生快被别人抢走了,我敢怎么抢? - V2EX

    喜欢的女生快被别人抢走了,我敢怎么抢? - V2EX 三大定律镇楼: 第一定律:永远不要以为女生对你有好感.第二定律:告白等于见光死.第三定律:秀恩爱分得快.

  8. find命令笔记

    find 命令: 文件查找:locate:    非实时,模糊匹配,查找是根据全系统文件数据库进行的:# updatedb, 手动生成文件数据库速度快 find:    实时    精确    支持众 ...

  9. telnet 命令使用详解

    1..关于NTLM验证由于Telnet功能太强大,而且也是入侵者使用最频繁的登录手段之一,因此微软公司为Telnet添加了身份验证,称为NTLM验证,它要求Telnet终端除了需要有Telnet服务主 ...

  10. Oracle学习笔记(2)——过程和函数

    过程和函数统称为PL/SQL子程序,通过输入.输出参数或输入/输出参数与其调用者交换信息.他们是被命名的PL/SQL块,被编译后存储在数据库中,以备执行.因此,可以在数据库中直接按名称使用它们. 1. ...