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


Posted in Javascript onApril 14, 2017

前言

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作
Nov 30 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
浅谈Vue 性能优化之深挖数组
Dec 11 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
Oct 16 Javascript
vscode调试node.js的实现方法
Mar 22 Javascript
基于JavaScript实现的顺序查找算法示例
Apr 14 #Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 #Javascript
angularjs实现首页轮播图效果
Apr 14 #Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 #Javascript
微信小程序 下拉菜单简单实例
Apr 13 #Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 #Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
用于table内容排序
2006/07/21 Javascript
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
Django框架 信号调度原理解析
2019/09/04 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
物流专业毕业生推荐信范文
2013/11/18 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
基层党员对照检查材料
2014/09/24 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
可怜妈妈观后感
2015/06/09 职场文书