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 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
JavaScript面向对象精要(上部)
Sep 12 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
vue+eslint+vscode配置教程
Aug 09 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
js实现小时钟效果
Mar 25 Javascript
javascript实现搜索筛选功能实例代码
Nov 12 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
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
php中socket通信机制实例详解
2015/01/03 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
thinkphp 抓取网站的内容并且保存到本地的实例详解
2017/08/25 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
UserData用法总结 lanyu出品
2010/07/01 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
vue实现todolist单页面应用
2017/04/11 Javascript
脚手架vue-cli工程webpack的作用和特点
2018/09/29 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
Python基于PyGraphics包实现图片截取功能的方法
2017/12/21 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python中xlrd模块的使用详解
2021/02/01 Python
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
2014/05/15 HTML / CSS
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
党员违纪检讨书
2014/02/18 职场文书
2014离婚协议书范文
2014/09/10 职场文书
群众路线领导班子整改方案
2014/10/25 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
实习生辞职信范文
2015/03/02 职场文书
2016年母亲节寄语
2015/12/04 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
教师师德承诺书2016
2016/03/25 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python