AngularJS基于factory创建自定义服务的方法详解


Posted in Javascript onMay 25, 2017

本文实例讲述了AngularJS基于factory创建自定义服务的方法。分享给大家供大家参考,具体如下:

为什么要创建自定义服务?

很简单,不想让控制器显得过于“臃肿”,而且服务可复用。针对性强,每个服务对应不同的功能。

这里介绍如何使用factory创建自定义服务,并且使用他。

例子1:

<!--HTML-->
<div ng-controller="showTheName">
  <h1 ng-bind="name"></h1>
</div>
/*js*/
var app = angular.module("routingDemoApp",[]);
app.factory("showName",function(){
  var NameFactory = {};
  NameFactory.name = "张三";
  return NameFactory;
});
app.controller("showTheName",function($scope,showName){
  $scope.name = showName.name;
});

使用factroy来创建一个服务和创建一个控制器非常像,只是创建服务需要返回这个服务的对象。这里的对象就是NameFactory 。一般的写法是在函数的一开始就创建一个变量对象,而后在进行对象里面属性以及方法的设置,最后返回这个对象即可。

在控制器使用自定义的服务与使用AngularJS自带的服务几乎一样,只是名字的前面没有美元($)符号。在注入了自定义的服务后,控制器中就可以随意的使用该控制器返回的对象的属性和方法了。

自定义服务还有个更强大的玩法,就是在创建自定义服务的同时将已经创建好的服务注入。以上一篇博文的基础为例,使用自定义服务来实现读取AJAX文件。(JSON文件可参考前面一篇《AngularJS读取JSON及XML文件的方法》,这里不给出了)

<!--html-->
<div class="panel panel-default" ng-controller="AjaxJson">
  <div class="panel-body">
    <table class="table table-striped table-hover">
      <thead>
      <tr>
        <td>名</td>
        <td>种类</td>
        <td>价格</td>
        <td>保质期</td>
      </tr>
      </thead>
      <tbody>
      <tr ng-hide="products.length">
        <td colspan="4" class="text-center">没有数据</td>
      </tr>
      <tr ng-repeat="item in products">
        <td ng-bind="item.name"></td>
        <td ng-bind="item.category"></td>
        <td ng-bind="item.price"></td>
        <td ng-bind="item.expiry"></td>
      </tr>
      </tbody>
    </table>
    <p><button ng-click="LoadJson()">加载JSON数据</button></p>
  </div>
</div>
/*JS*/
app.factory("loadJSON",function($http,$q){
  var loadJson ={};
  loadJson.loadjson = function(){
    var d = $q.defer();
    $http({
      url:"json.json",
      method:"GET"
    })
      .success(function(response){
      d.resolve(response);
    })
      .error(function(){
        d.reject(alert("出错"));
      });
    return d.promise;
  };
  return loadJson;
});
app.controller("AjaxJson",function($scope,loadJSON){
  $scope.LoadJson = function () {
    loadJSON.loadjson().then(function(data){
      $scope.products = data;
    },function(){
      alert("出错");
    })
  }
});

步骤如下:

1)将$http,$q 注入到匿名函数中。
2)创建一个变量对象,命名为loadJson。
3)在该对象中创建一个方法,命名为loadjson()。
4)创建一个变量d,赋予它$q.difer()方法。
5)使用http({})创建一个promise对象,并返回该promise对象。
6)返回ladJson对象。服务创建完毕。
7)在控制器中注入该服务,使用then()方法对自定义服务返回的承诺进行操作。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
Element input树型下拉框的实现代码
Dec 21 Javascript
vue ssr 实现方式(学习笔记)
Jan 18 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 #Javascript
bootstrap+jQuery实现的动态进度条功能示例
May 25 #jQuery
基于VUE选择上传图片并页面显示(图片可删除)
May 25 #Javascript
jQuery滚动插件scrollable.js用法分析
May 25 #jQuery
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 #Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 #Javascript
vue-router实现webApp切换页面动画效果代码
May 25 #Javascript
You might like
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
jquery提升性能最佳实践小结
2010/12/06 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
BootStrap Fileinput初始化时的一些参数
2016/12/30 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
浅谈angular2路由预加载策略
2017/10/04 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
Python学习笔记之os模块使用总结
2014/11/03 Python
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
浅谈Python中的闭包
2015/07/08 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
详解Python 正则表达式模块
2018/11/05 Python
python实现AES加密与解密
2019/03/28 Python
django API 中接口的互相调用实例
2020/04/01 Python
keras.layer.input()用法说明
2020/06/16 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
大学生通用个人的自我评价
2014/02/10 职场文书
小学开学典礼主持词
2014/03/19 职场文书
升旗仪式主持词
2014/03/19 职场文书
2014年作风建设工作总结
2014/10/29 职场文书
建议书范文
2015/02/05 职场文书
Golang 正则匹配效率详解
2021/04/25 Golang