详解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 相关文章推荐
JavaScript Eval 函数使用
Mar 23 Javascript
javascript中节点的最近的相关节点访问方法
Mar 20 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
Aug 24 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
详解ES6中的 Set Map 数据结构学习总结
Nov 06 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
详解node.js 事件循环
Jul 22 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
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判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
javascript常见用法总结
2014/05/22 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
pygame播放音乐的方法
2015/05/19 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python语言描述连续子数组的最大和
2018/01/04 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
英国绿色商店:Natural Collection
2019/05/03 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
物流合作计划书
2014/01/10 职场文书
养成教育经验材料
2014/05/26 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
社团个人总结范文
2015/03/05 职场文书