AngularJS之自定义服务详解(factory、service、provider)

前言

1、3种创建自定义服务的方式。

  1. Factory
  2. Service
  3. Provider

2、大家应该知道，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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS内置指令

    指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西. 内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突. 首先从一些常见的内置指令开始. 先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.

  • Angularjs全局变量被作用域监听的正确姿势

    如果你只想知道结论: $scope.$watch($rootScope.xxx,function(newVal,oldVal){ //do something }) 马上就有人问为什么不是: $rootScope.$watch("xxx",function(newVal,oldVal){ //do something }) 从我最近的一个bug来说说为什么要用第一种方式. 逻辑如图,一开始我使用了 $rootScope.$watch 的写法.因为 angularjs 在 $rootSc

  • AngularJS中的指令全面解析(必看)

    AngularJS中的指令全面解析(必看)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJS这个框架的指令系统,本人也是初学,查阅了一些资料,要是有一些说的不好的地方,万望指出. 指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.那么一个AngularJS指令在HTML代码

  • AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值

    在"AngularJS中自定义有关一个表格的Directive"中自定义了一个有关表格的Direcitve,其表格的表现方式是这样的: <table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper> 以上

  • AngularJS实现元素显示和隐藏的几个案例

    AngularJS实现元素显示和隐藏的几个案例

    案例一:控制html元素显示和隐藏有n种方法:html的hidden.css的display.jquery的hide()和show().bootstrap的.hide.今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态.监听函数.if判断.选择dom.设置dom,5行代码搞不定吧,而且毫无技术含量. 看代码: <!DOCTYPE html> <html ng-app> <head> <meta charset="utf-8&qu

  • angularJS中router的使用指南

    这几天看了angularjs和backbone,大看了解了knockout和emberjs,刚刚上网看到了一个angular的router的demo,现在顺便记下来 复制代码 代码如下: <!--- DEMO_INDEX.html --> <!doctype html> <head> <meta charset="utf-8"> <title>route</title> </head><br>

  • AngularJS基于provider实现全局变量的读取和赋值方法

    本文实例讲述了AngularJS基于provider实现全局变量的读取和赋值方法.分享给大家供大家参考,具体如下: 简单全局变量的设置 1,通过var 直接定义global variable,这根纯js是一样的. 2,用angularjs value来设置全局变量 . 3,用angularjs constant来设置全局变量 . 示例代码如下: 在app文件中,声明三种变量 'use strict'; /* App Module */ var test2 = 'tank'; //方法1,定义全局

  • Angularjs 设置全局变量的方法总结

    AngularJS 设置全局变量的三种方法 angularjs自身有二种,设置全局变量的方法,在加上js的设置全局变量的方法,总共有三种.要实现的功能是,在ng-app中定义的全局变量,在不同的ng-controller里都可以使用. 1,通过var 直接定义global variable,这根纯js是一样的. 2,用angularjs value来设置全局变量 . 3,用angularjs constant来设置全局变量 . 下面用一个例子,来说明,上面3种方法: 实例: 1,在app模块中,

  • angularJS Provider、factory、service详解及实例代码

    factory 用 Factory 就是创建一个对象,为它添加属性,然后把这个对象返回出来.你把 service 传进 controller 之后,在 controller 里这个对象里的属性就可以通过 factory 使用了. app.controller('myFactoryCtrl', function($scope, myFactory){ $scope.artist = myFactory.getArtis(); }); app.factory('myFactory', functio

  • angularjs 处理多个异步请求方法汇总

    在实际业务中经常需要等待几个请求完成后再进行下一步操作.但angularjs中$http不支持同步的请求. 解决方法一: 复制代码 代码如下: $http.get('url1').success(function (d1) {         $http.get('url2').success(function (d2) {             //处理逻辑         });     }); 解决方法二: then中的方法会按顺序执行. 复制代码 代码如下: var app = ang

  • AngularJS入门教程之学习环境搭建

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设备,然后查看设备的详细信息. 本教程将向您展示AngularJS怎样使得web应用更智能更灵活,而且不需要各种扩展程序或插件. 通过本教程的学习,您将: 1.阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图. 2.学习如何使用AngularJ

  • AngularJS实现表单验证

    虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>     <p&

随机推荐