详解Angular中的自定义服务Service、Provider以及Factory


Posted in Javascript onApril 22, 2017

背景来源于前段时间的一场面试,面试官看着我Angular控制器中添加各种功能重复的方法,脸都发绿了,不过还是耐心地跟我指出提高Angular代码复用性需要Service、Provider和Factory三种复用性很高的方法,遂习之,以下是我的学习成果:

先说说Factory:

通过注册.factory('my注册名',方法()),返回一个对象,你就能在控制器中引入这个方法并访问这个对象:
例子:

<!-- factory模式 -->
  <div ng-controller="theFactoryCtrl">
    <h3>Factory模式</h3>
    <ul>
      <li ng-repeat="i in names">
        {{i}}
      </li>
    </ul>

  </div>

JS代码:

/*工厂模式,注入参数中调用的是这个函数里的返回值*/
  app.factory("myFactory",function(){

    var args = arguments;
    var obj = {}

    obj.exec = function(){
      var arr = [];
      for(let i = 0; i<arguments.length; i++){
        arr.push(arguments[i]);
      }
      return arr;
    }
    return obj;
  })
app.controller("theFactoryCtrl",function ($scope,myFactory) {

    $scope.names = myFactory.exec("张三的歌","赵四的舞","老王贼六");

  })

效果:

详解Angular中的自定义服务Service、Provider以及Factory

Service:

在service使用构造函数的方法去用它,在控制器中是以new的方式引入,所以可以调用service中定义的属性

HTML:

<!-- service模式 -->
  <div ng-controller="theServiceCtrl">
    <h3>Service模式</h3>
    <p>prop:{{prop}}</p>
    <p>num:{{num}}</p>
  </div>

JS:

app.controller("theServiceCtrl",function($scope,myService){
    $scope.prop = myService.prop("呵呵");
    $scope.num = myService.num;
  })
/*Service是new出来的,所以可以直接调用里面的属性*/
  app.service("myService",function(){
    this.num = Math.floor(Math.random()*10);//0到10的随机数
    this.prop = function(arg){
      return arg;
    };
  })

效果:

详解Angular中的自定义服务Service、Provider以及Factory

Provider:

如果你想在创建服务之前先对服务进行配置,那么你需要provider,因为provider可以通过定义config,并在$get中访问config
HTML:

<!-- provider模式 -->
  <div ng-controller="theProviderCtrl">
    <h3>Provider模式</h3>
    <p>姓名:{{info.name}}</p>
    <p>部队:{{info.squad}}</p>
    <p>职务:{{info.role}}</p>
  </div>

JS:

/*使用$get方法关联对应的config*/
  app.provider("myProvider",function(){

    this.$get = function(){

      return {
        name : "朱子明",
        squad : "八路军386旅独立团",
        role : this.roleSet

      }
    }

  })
  /*名字必须符合规范:xxxxxxProvider*/
  app.config(function(myProviderProvider){
    myProviderProvider.roleSet = "保卫干事"
  })
app.controller("theProviderCtrl",function($scope,myProvider){
    $scope.info = {
      name : myProvider.name,
      squad : myProvider.squad,
      role : myProvider.role

    }
  })

效果:

详解Angular中的自定义服务Service、Provider以及Factory

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

Javascript 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
全面解析node 表单的图片上传
Nov 21 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
Vue表单及表单绑定方法
Sep 04 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
Ionic2调用本地SQlite实例
Apr 22 #Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 #Javascript
移动端使用localResizeIMG4压缩图片
Apr 22 #Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 #Javascript
AngularJS的脏检查深入分析
Apr 22 #Javascript
在node中如何使用 ES6
Apr 22 #Javascript
JS实现异步上传压缩图片
Apr 22 #Javascript
You might like
PHP中的string类型使用说明
2010/07/27 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
情人节之礼 js项链效果
2012/02/13 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
2014/05/11 Javascript
JS 使用for循环遍历子节点查找元素
2014/09/06 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
jQuery实现模拟marquee标签效果
2015/07/14 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
javascript浏览器用户代理检测脚本实现方法
2017/10/27 Javascript
微信小程序自定义导航栏实例代码
2019/04/05 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
Python设计模式之代理模式简单示例
2018/01/09 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
基于Python log 的正确打开方式
2018/04/28 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
追悼会子女答谢词
2014/01/28 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
信访工作个人总结
2015/03/03 职场文书
党员进社区活动总结
2015/05/07 职场文书
提档介绍信范文
2015/10/22 职场文书