前言

3种创建自定义服务的方式。
1. Factory
2. Service
3. Provider
大家应该知道，AngularJS是后台人员在工作之余发明的，他主要应用了后台早就存在的分层思想。所以我们得了解下分层的作用，如果你是前端人员不了解什么是分层，那么你最好问问你后台的小伙伴。
dao层：就是Model层，在后台时，这一层的作用，就要是写与数据库交互数据的一层，在angularJS里就主要是写ajax的。
service层：主查写逻辑代码的，但在angularJS里也可以持久化数据（充当数据容器），以供不同的controller高用。
controller层：即控制层，在angularJS里就是写控制器的。控制器里尽量不要写那些不必要的逻辑，尽量写在service层里。
所以，就有了创建自定义服务的三种方式。

factory

factory方式创建的服务，作用就是返回一个有属性有方法的对象。相当于：var f = myFactory();

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="myApp" ng-controller="myCtrl">

    <p>{{r}}</p>

</div>

<script>

    //创建模型

    var app = angular.module('myApp', []);

    //通过工厂模式创建自定义服务

    app.factory('myFactory', function() {

        var service = {};//定义一个Object对象'

        service.name = "张三";

        var age;//定义一个私有化的变量

        //对私有属性写getter和setter方法

        service.setAge = function(newAge){

            age = newAge;

        }

        service.getAge = function(){

            return age;

        }

        return service;//返回这个Object对象

    });

    //创建控制器

    app.controller('myCtrl', function($scope, myFactory) {

        myFactory.setAge(20);

        $scope.r =myFactory.getAge();

        alert(myFactory.name);

    });

</script>

</body>

</html>

在自定义服务里注入服务示例，但不能注入$scope作用域对象。

<script>

    var app = angular.module('myApp', []);

    app.factory('myFactory', function($http,$q) {

        var service = {};

        service.name = "张三";

        //请求数据

        service.getData = function(){

            var d = $q.defer();

            $http.get("url")//读取数据的函数。

            .success(function(response) {

                d.resolve(response);

            })

            .error(function(){

                d.reject("error");

            });

            return d.promise;

        }

        return service;

    });

    app.controller('myCtrl', function($scope, myFactory) {

        //alert(myFactory.name);

        myFactory.getData().then(function(data){

            console.log(data);//正确时走这儿

        },function(data){

            alert(data)//错误时走这儿

        });;

    });

</script>

service

通过service方式创建自定义服务，相当于new的一个对象：var s = new myService();，只要把属性和方法添加到this上才可以在controller里调用。

<div ng-app="myApp" ng-controller="myCtrl">

    <h1>{{r}}</h1>

</div>

<script>

    var app = angular.module('myApp', []);

    app.service('myService', function($http,$q) {

        this.name = "service";

        this.myFunc = function (x) {

            return x.toString(16);//转16进制

        }

        this.getData = function(){

            var d = $q.defer();

            $http.get("ursl")//读取数据的函数。

                .success(function(response) {

                d.resolve(response);

            })

                .error(function(){

                alert(0)

                d.reject("error");

            });

            return d.promise;

        }

    });

    app.controller('myCtrl', function($scope, myService) {

        $scope.r = myService.myFunc(255);

        myService.getData().then(function(data){

            console.log(data);//正确时走这儿

        },function(data){

            alert(data)//错误时走这儿

        });

    });

</script>

3.provder

只有provder是能传 .config() 函数的 service。如果想在 service 对象启用之前，先进行模块范围的配置，那就应该选择 provider。需要注意的是：在config函数里注入provider时，名字应该是：providerName+Provider.
使用Provider的优点就是，你可以在Provider对象传递到应用程序的其他部分之前在app.config函数中对其进行修改。
当你使用Provider创建一个service时，唯一的可以在你的控制器中访问的属性和方法是通过$get()函数返回内容。

<body>

<div ng-app="myApp" ng-controller="myCtrl">

</div>

<script>

    var app = angular.module('myApp', []);

    //需要注意的是：在注入provider时，名字应该是：providerName+Provider

    app.config(function(myProviderProvider){

        myProviderProvider.setName("大圣");

    });

    app.provider('myProvider', function() {

        var name="";

        var test={"a":1,"b":2};

        //注意的是，setter方法必须是(set+变量首字母大写)格式

        this.setName = function(newName){

            name = newName

        }

        this.$get =function($http,$q){

            return {

                getData : function(){

                    var d = $q.defer();

                    $http.get("url")//读取数据的函数。

                        .success(function(response) {

                            d.resolve(response);

                        })

                        .error(function(){

                            d.reject("error");

                        });

                    return d.promise;

                },

                "lastName":name,

                "test":test

            }

        }

    });

    app.controller('myCtrl', function($scope,myProvider) {

        alert(myProvider.lastName);

        alert(myProvider.test.a)

        myProvider.getData().then(function(data){

            //alert(data)

        },function(data){

            //alert(data)

        });

    });

</script>

</body>

4.在过滤器中注入自定义服务

<body>

<div ng-app="myApp">

    在过滤器中使用服务:

    <h1>{{255 | myFormat}}</h1>

</div>

<script>

    var app = angular.module('myApp', []);

    app.service('hexafy', function() {

        this.myFunc = function (x) {

            return x.toString(16);

        }

    });

    app.filter('myFormat',['hexafy', function(hexafy) {

        return function(x) {

            return hexafy.myFunc(x);

        };

    }]);

</script>

</body>

深究AngularJS——自定义服务详解(factory、service、provider)的更多相关文章

angularJs 自定义服务 provide 与 factory 的区别
<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...
AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
[译]AngularJS中几种Providers(Factory, Service, Provider)的区别
原文: http://blog.xebia.com/2013/09/01/differences-between-providers-in-angularjs/ 什么是Provider? Angula ...
AngularJS开发指南14：AngularJS的服务详解
服务是一种由服务器端带到客户端的特性,它由来已久.AngularJS应用中的服务是一些用依赖注入捆绑在一起的可替换的对象.服务是最常和依赖注入一起用的,它也是AngularJS中的关键特性. 接下来, ...
AngularJs自定义指令详解（5） - link
在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...
Angularjs promise-$q服务详解
var ngApp=angular.module('ngApp',[]); /************************************************************* ...
AngularJs自定义指令详解（6） - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
AngularJs自定义指令详解（9） - terminal
例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
AngularJs自定义指令详解（8） - priority
priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html& ...

随机推荐

（转）RGB接口和i80接口的区别
在嵌入式的主流 LCD屏中主要支持两大类的硬件接口,一种是常见的RGB接口,另外一种是MCU接口.后面因为最早是针对单片机的领域在使用,因此得名.后在中低端手机大量使用,其主要特点是价格便宜的. M ...
XML 入门
XML语法所有 XML 元素都须有关闭标签 XML 标签对大小写敏感 XML 必须正确地嵌套 XML 文档必须有根元素就像HTML一样,HTML必须有<html>根元素.XML也必须有 ...
最短路径问题-Floyd算法
概念最短路径也是图的一个应用,即寻找图中某两个顶点的最短路径长度. 实际应用:例如确定某两个城市间的坐火车最短行车路线长度等. Floyd algorithm 中文名就是弗洛伊德算法. 算法思路:用 ...
本来想用jsonp来跨域请求的，但sb写接口的，不改返回值。。。只得在后台请求接口了。。。
string url = "ssss.com";//demo里的是get请求 HttpWebResponse w = HttpHelper.CreateGetHttpRespons ...
MFC中控件添加了变量后修改
新增一个变量这个变量存在于两个位置,一个是头文件中项目名+Dlg.h文件,另一个是源文件中项目名+Dlg.cpp文件
nginx重写规则配置
https://segmentfault.com/a/1190000002797606 location正则写法一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符 ...
layui时间，table,大图查看，弹出框，获取音频长度，文件上传
1.引入: <link href="../../Scripts/layui-v2.3.0/css/layui.css" rel="stylesheet" ...
静态变量数组实现LRU算法
LRU算法的解释详情请见 https://baike.baidu.com/item/LRU/1269842 这里百度百科给出的比较详细,然后后面有一个例子说 LRU(least recently u ...
Spring装配Bean的过程补充
对上一篇的<Spring装配Bean的过程>的过程说一下,不然真产生了误区. 误区在哪里呢?那就是spring bean的作用域问题. 说哈常用的两种作用域:默认是scope = sing ...
linux 启动时文件系统错误
由于我把/dev/VolGroup00/lvData写在了/etc/fstab中,后面又把这个lv给删除了,导致出现下面开机启动的错误: 解决办法: 1.进入单用户模式下,当修改/etc/fstab时 ...

深究AngularJS——自定义服务详解(factory、service、provider)