对angularJs中2种自定义服务的实例讲解


Posted in Javascript onSeptember 30, 2018

本篇文章介绍2种自定义服务的方式,一种是用factory,一种是用service

一、首先介绍使用factory来进行自定义服务

1.html

<div ng-app="module" ng-controller="ctrl">
  <table border="1" width="600">
    <tr>
      <td>网站名称</td>
      <td>网址</td>
    </tr>
    <tr ng-repeat="v in data">
      <td>{{v.name}}</td>
      <td>{{v.url}}</td>
    </tr>
  </table>
</div>
<script>
  var m = angular.module('module', []);
  //factory定义服务videoServer
  m.factory('videoServer', ['$http', function ($http) {
    return {
      /* 第一种方式      
        get: function (callback) {
        $http({url: '1.php'}).then(function (response) {
          callback(response);
        });
      }*/
      //第二种方式
      all: function () {
        return $http({url: '1.php'});
      }
    };
  }]);
  //在控制器中使用videoServer服务,与自带的服务使用方式一样
  m.controller('ctrl', ['$scope', 'videoServer', function ($scope, videoServer) {
    /*第一种方式
    videoServer.get(function (response) {
      $scope.data = response.data;
    });
    */
    //第二种方式
    videoServer.all().then(function (response) {
      $scope.data = response.data;
    });
  }]);
</script>

1.php

<?php
$data = [
  [ 'name' => '百度', 'url' => 'www.baidu.com' ],
  [ 'name' => '谷歌', 'url' => 'google.com' ],
];
echo json_encode($data,JSON_UNESCAPED_UNICODE);

二、使用service来进行自定义服务

2.html

<div ng-app="module" ng-controller="ctrl">
  <table border="1" width="600">
    <tr>
      <td>网站名称</td>
      <td>网址</td>
    </tr>
    <tr ng-repeat="v in data">
      <td>{{v.name}}</td>
      <td>{{v.url}}</td>
    </tr>
  </table>
</div>
<script>

  var m = angular.module('module', []);
  //service自定义服务videoServer
  m.service('videoServer', ['$http', function($http){
    this.get=function(){
      return $http({method:'get',url:'2.php'}).then(function(response){
        return response.data;
      })
    }
  }])
   //在控制器中使用videoServer服务,与自带的服务使用方式一样
  m.controller('ctrl', ['$scope', 'videoServer', function ($scope, videoServer) {
    videoServer.get().then(function (data) {
      $scope.data = data;
    });
  }]);
</script>

2.php

<?php
$data = [
  [ 'name' => '百度', 'url' => 'www.baidu.com' ],
  [ 'name' => '谷歌', 'url' => 'google.com' ],
];
echo json_encode($data,JSON_UNESCAPED_UNICODE);

以上这篇对angularJs中2种自定义服务的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
深入理解javascript原型链和继承
Sep 23 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
JS中Map和ForEach的区别
Feb 05 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 #Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 #Javascript
VUE 配置vue-devtools调试工具及安装方法
Sep 30 #Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 #Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 #jQuery
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 #Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 #Javascript
You might like
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
php curl模拟post请求小实例
2013/11/13 PHP
php正则表达式学习笔记
2015/11/13 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
详解python3百度指数抓取实例
2016/12/12 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
在cmd中查看python的安装路径方法
2019/07/03 Python
python对csv文件追加写入列的方法
2019/08/01 Python
python中time库的实例使用方法
2019/10/31 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
举例讲解Python装饰器
2020/12/24 Python
全球工业:Global Industrial
2020/02/01 全球购物
Linux内核产生并发的原因
2016/11/08 面试题
中文系学生自荐信范文
2013/11/13 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
闭幕式主持词
2014/04/02 职场文书
宣传活动总结范文
2014/07/01 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python