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. jxl读和取Excel文件

    请参看下面链接: jxl如何读和取excle中的数据

  2. cmd下操作mysql

      将mysql 安装目录下 的bin 添加到 windows 环境变量        步骤:        我的电脑 ->高级->环境变量->path->选择一个用户-> ...

  3. js各种验证文本框输入格式

    不能为空 <input onblur="if(this.value.replace(/^ +| +$/g,'')=='')alert('不能为空!')"> 只能输入英文 ...

  4. js编程风格

    1.缩进层级,建议四个空格. 2.语句结尾使用分号. 3.行的长度不超过80个字符. 4.换行建议加两个缩进,即8个空格. 5.合理的利用空行. 6.命名: 6.1 变量,驼峰式大小写,有小写字母开始 ...

  5. 小插曲之变量和字符串 - 零基础入门学习Python003

    小插曲之变量和字符串 让编程改变世界 Change the world by program 变量 (此处只是省略N多细节,详细通过视频学习) 变量名就像我们现实社会的名字,把一个值赋值给一个名字时, ...

  6. sql每五秒插入一条数据 一次插入N条数据

    1建立数据表 create table projectManage ( ID int identity primary key not null, projectName )not null, man ...

  7. wordpress教程之the_author_meta()显示用户的信息

    描述 模板标签函数the_author_meta可以显示用户数据.如果该函数在文章主循环(Loop)中,则不必指定作者的ID值,标签所显示的就是当前文章作者的内容.如果在主循环(Loop)外,则需要指 ...

  8. 处理事件的方式：两种类的覆盖处理（自己管理，覆盖专用事件函数；自己统一管理，覆盖QWidget::Event通用函数），一种对象的处理（父控件统一管理，即安装过滤器），两种全局处理（QCoreApplication安装过滤器；覆盖notify方法）

    虽然只有一句话,但却是我自己的心得. 特别注意,bool QCoreApplication::notify(QObject *receiver, QEvent *event) 明确指明了要发送的对象, ...

  9. socket基础(二)

    Microsoft.Net Framework为应用程序访问Internet提供了分层的.可扩展的以及受管辖的网络服务,其名字空间System.Net和System.Net.Sockets包含丰富的类 ...

  10. SQL Server索引设计 <第五篇>

    SQL Server索引的设计主要考虑因素如下: 检查WHERE条件和连接条件列: 使用窄索引: 检查列的选择性: 检查列的数据类型: 考虑列顺序: 考虑索引类型(聚集索引OR非聚集索引): 一.检查 ...