4.3

Services都是单例的，就是说在一个应用中，每一个Serice对象只会被实例化一次（用$injector服务)，主要负责提供一个接口把特定函数需要的方法放在一起，我们就拿上一章见过的$http Service来举例，他就提供了访问底层浏览器的XMLHttpRequest对象的方法，相较于调用底层的XMLHttpRequest对象，$http API使用起来相当的简单。

Angular内建了很多服务供我们日常使用，这些服务对于在复杂应用中建立自己的Services都是相当有用的。

AngularJS让我们可以轻松的创建自己的services，仅仅注册service即可，一旦注册，Angular编译器就可以找到并加载他作为依赖供程序运行时使用，

最常见的创建方法就是用angular.module API 的factory模式

 angular.module('myApp.services', [])
  .factory('githubService', function() {
    var serviceInstance = {};
    // 我们的第一个服务
    return serviceInstance;
  });
 

当然，我们也可以使用内建的$provide service来创建service。

这个服务并没有做实际的事情，但是他向我们展示了如何去定义一个service。创建一个service就是简单的返回一个函数，这个函数返回一个对象。这个对象是在创建应用实例的时候创建的（记住，这个对象是单例对象）

我们可以在这个纵贯整个应用的单例对象里处理特定的需求，在上面的例子中，我们开始创建了GitHub service，

接下来让我们添加一些有实际意义的代码去调用GitHub的API：

 angular.module('myApp.services', [])
  .factory('githubService', ['$http', function($http) {
    var doRequest = function(username, path) {
      return $http({
        method: 'JSONP',
        url: 'https://api.github.com/users/'  + username + '/'  + path + '?callback=JSON_CALLBACK'
      });
    }
    return {
      events: function(username) { return  doRequest(username, 'events'); },
    };
  }]);
 

我们创建了一个只有一个方法的GitHub Service，events可以获取到给定的GitHub用户最新的GitHub事件，为了把这个服务添加到我们的controller中。我们建立一个controller并加载（或者注入）githubService作为运行时依赖，我们把service的名字作为参数传递给controller 函数（使用中括号[])

 app.controller('ServiceController', ['$scope', 'githubService',
    function($scope, githubService) {
}]);
 

请注意，这种依赖注入的写法对于js压缩是安全的，我们会在以后的章节中深入导论这件事情。

我们的githubService注入到我们的ServiceController后，我们就可以像使用其他服务（我们前面提到的$http服务）一样的使用githubService了。

我们来修改一下我们的示例代码，对于我们视图中给出的GitHub用户名，调用GitHub API，就像我们在数据绑定第三章节看到的，我们绑定username属性到视图中

 <div ng-controller="ServiceController">
  <label for="username">Type in a GitHub username</label>
  <input type="text" ng-model="username" placeholder="Enter a GitHub username, like auser" />
  <pre ng-show="username">{{ events }}</pre>
</div>
 

现在我们可以监视 $scope.username属性，基于双向数据绑定，只要我们修改了视图，对应的model数据也会修改

 app.controller('ServiceController', ['$scope', 'githubService',
    function($scope, githubService) {
    // Watch for changes on the username property.
    // If there is a change, run the function
    $scope.$watch('username', function(newUsername) {
            // uses the $http service to call the GitHub API
            // and returns the resulting promise
      githubService.events(newUsername)
        .success(function(data, status, headers) {
                    // the success function wraps the response in data
                    // so we need to call data.data to fetch the raw data
          $scope.events = data.data;
        })
    });
}]);
 

因为返回了$http promise(像我们上一章一样），我们可以像直接调用$http service一样的去调用.success方法

在这个示例中，我们注意到输入框内容改变前有一些延迟，如果我们不设置延迟，那么我们就会对键入输入框的每一个字符调用GitHub API，这并不是我们想要的，我们可以使用内建的$timeout服务来实现这种延迟。

如果想使用$timeout服务，我们只要简单的把他注入到我们的githubService中就可以了

 app.controller('ServiceController', ['$scope', '$timeout', 'githubService',
    function($scope, $timeout, githubService) {
}]);
 

注意我们要遵守Angular services依赖注入的规范：自定义的service要写在内建的Angular services之后，自定义的service之间是没有先后顺序的。

我们现在就可以使用$timeout服务了，在本例中，在输入框内容的改变间隔如果没有超过350毫秒，$timeout service不会发送任何网络请求。换句话说，如果在键盘输入时超过350毫秒，我们就假定用户已经完成输入，我们就可以开始向GitHub发送请求

 app.controller('ServiceController', ['$scope', '$timeout', 'githubService',
  function($scope, $timeout, githubService) {
    // The same example as above, plus the $timeout service
    var timeout;
    $scope.$watch('username', function(newVal) {
      if (newVal) {
        if (timeout) $timeout.cancel(timeout);
        timeout = $timeout(function() {
          githubService.events(newVal)
          .success(function(data, status) {
            $scope.events = data.data;
          });
        }, 350);
      }
    });
  }]);
 

从这应用开始，我们只看到了Services是如何把简单的功能整合在一起，Services还可以在多个controllers之间共享数据。比如，如果我们的应用有一个设置页面供用户设置他们的GitHub username，那么我们就要需要把username与其他controllers共享。

这个系列的最后一章我们会讨论路由以及如何在多页面中跳转。

为了在controllers之间共享username，我们需要在service中存储username，记住，在应用的生命周期中Service是一直存在的，所以可以把username安全的存储在这里

 angular.module('myApp.services', [])
  .factory('githubService', ['$http', function($http) {
    var githubUsername;
    var doRequest = function(path) {
      return $http({
        method: 'JSONP',
        url: 'https://api.github.com/users/'  + githubUsername + '/'  + path + '?callback=JSON_CALLBACK'
      });
    }
    return {
      events: function() { return  doRequest('events'); },
      setUsername: function(newUsername) { githubUsername = newUsername; }
    };
  }]);
 

现在，我们的service中有了setUsername方法，方便我们设置GitHub用户名，在应用的任何controller中，我们都可以调用events()方法，而根本不用操心在scope对象中的username设置是否正确。

我们应用里的Services

在我们的应用里，我们需要为3个元素创建对应的服务：audio元素，player元素，nprService。最简单的就是audio service，切记，不要在controller中有任何的操控DOM的行为，如果这么做会污染你的controller并留下潜在的隐患。

在我们的应用中，PlayerController中有一个audio element元素的实例

 app.controller('PlayerController', ['$scope', '$http', 
  function($scope, $http) {
  var audio = document.createElement('audio');
  $scope.audio = audio;
  // ...
 

我们可以建立一个单例audio service，而不是在controller中设置audio元素

 app.factory('audio', ['$document', function($document) {
  var audio = $document[0].createElement('audio');
  return audio;
}]);
 

注意：我们使用了另一个内建服务$document服务，这个服务就是window.document元素（所有html页面里javascript的根对象）的引用。

现在，在我们的PlayController中我们可以引用这个audio元素，而不是在controller中建立这个audio元素

 app.controller('PlayerController', ['$scope', '$http', 'audio',
  function($scope, $http, audio) {
  $scope.audio = audio;
 

尽管看起来我们并没有增强代码的功能或者让代码更加清晰，但是如果有一天，PlayerController不再需要audio service了，我们只需要简单删除这个依赖就可以了。到那个时候你就能切身体会到这种代码写法的妙处了！

注意：现在我们可以在其他应用中共享audio service了，因为他并没有绑定特定于本应用的功能

为了看到效果，我们来建立下一个服务： player service，在我们的当前循环中，我们附加了play()和stop()方法到PlayController中。这些方法只跟playing audio有关，所以并没有必要绑定到PlayController，总之，使用PlayController调用player service API来操作播放器，而并不需要知道操作细节是最好不过的了。

让我们来创建player service，我们需要注入我们刚刚创建的还热乎的audio service 到 player service

 app.factory('player', ['audio', function(audio) {
  var player = {};
  return player;
}]);
 

现在我们可以把原先定义在PlayerController中play()方法挪到player service中了，我们还需要添加stop方法并存储播放器状态。

 app.factory('player', ['audio', function(audio) {
  var player = {
    playing: false,
    current: null,
    ready: false,
    play: function(program) {
      // If we are playing, stop the current playback
      if (player.playing) player.stop();
      var url = program.audio[0].format.mp4.$text; // from the npr API
      player.current = program; // Store the current program
      audio.src = url;
      audio.play(); // Start playback of the url
      player.playing = true
    },
    stop: function() {
      if (player.playing) {
        audio.pause(); // stop playback
        // Clear the state of the player
        player.ready = player.playing = false; 
        player.current = null;
      }
    }
  };
  return player;
}]);
 

现在我们已经拥有功能完善的play() and stop()方法，我们不需要使用PlayerController来管理跟播放相关的操作，只需要把控制权交给PlayController里的player service即可

 app.controller('PlayerController', ['$scope', 'player',
  function($scope, player) {
  $scope.player = player;
}]);
 

为了解决这个问题，我们需要使用$rootScope服务（另一个Angular的内建服务）来捕获audio元素的ended事件，我们注入$rootScope服务并创建audio元素的事件监听器

 app.factory('player', ['audio', '$rootScope', 
  function(audio, $rootScope) {
  var player = {
    playing: false,
    ready: true,
    // ...
  };
  audio.addEventListener('ended', function() {
    $rootScope.$apply(player.stop());
  });
  return player;
}]);
 

在这种情况下，为了需要捕获事件而使用了$rootScope service，注意我们调用了$rootScope.$apply()。因为ended事件会触发外围Angular event loop.我们会在后续的文章中讨论event loop。

最后，我们可以获取当前播放节目的详细信息，比如，我们创建一个方法获取当前事件和当前audio的播放间隔（我们会用这个参数显示当前的播放进度）。

 app.factory('player', ['audio', '$rootScope', 
  function(audio, $rootScope) {
  var player = {
    playing: false,
    // ...
    currentTime: function() {
      return audio.currentTime;
    },
    currentDuration: function() {
      return parseInt(audio.duration);
    }
  }
  };
  return player;
}]);
 

在audio元素中存在timeupdate事件，我们可以根据这个事件更新播放进度

 audio.addEventListener('timeupdate', function(evt) {
    $rootScope.$apply(function() {
      player.progress = player.currentTime();
      player.progress_percent = player.progress / player.currentDuration();
    });
  });
 

最后，我们一个添加canplay事件来表示视图中的audio是否准备就绪

 app.factory('player', ['audio', '$rootScope', 
  function(audio, $rootScope) {
  var player = {
    playing: false,
    ready: false,
    // ...
  }
  audio.addEventListener('canplay', function(evt) {
    $rootScope.$apply(function() {
      player.ready = true;
    });
  });
  return player;
}]);
 

现在，我们有了player service，我们需要操作nprLink directive 来让播放器 ’play’，而不是用$scope(注意，这么做是可选的，我们也可以在PlayerController中创建play()和stop()方法）

在directive中，我们需要引用本地scope的player，代码如下：

 app.directive('nprLink', function() {
  return {
    restrict: 'EA',
    require: ['^ngModel'],
    replace: true,
    scope: {
      ngModel: '=',
      player: '='
    },
    templateUrl: '/code/views/nprListItem',
    link: function(scope, ele, attr) {
      scope.duration = scope.ngModel.audio[0].duration.$text;
    }
  }
});
 

现在，为了跟我们已有的模板整合，我们需要更新 index.html的npr-link调用方式

 <npr-link ng-model="program" player="player"></npr-link>
 

在视图界面，我们调用play.play(ngModel),而不是play(ngModel).

 <div class="nprLink row" player="player" ng-click="player.play(ngModel)">
  <span class="name large-8 columns">
    <button class="large-2 small-2 playButton columns" ng-click="ngModel.play(ngModel)"><div class="triangle"></div></button>
    <div class="large-10 small-10 columns">
      <div class="row">
        <span class="large-12">{{ ngModel.title.$text }}</span>
      </div>
      <div class="row">
        <div class="small-1 columns"></div>
        <div class="small-2 columns push-8"><a href="{{ ngModel.link[0].$text }}">Link</a></div>
      </div>
    </div>
  </span>
</div>
 

逻辑上，我们需要添加播放器视图到总体视图上，因为我们可以封装player数据和状态。查看playerView directive 和 template。

我们来创建最后一个service，nprService，这个service很像 githubService，我们用$http service来获取NPR的最新节目

 app.factory('nprService', ['$http', function($http) {
    var doRequest = function(apiKey) {
      return $http({
        method: 'JSONP',
        url: nprUrl + '&apiKey='  + apiKey + '&callback=JSON_CALLBACK'
      });
    }
    return {
      programs: function(apiKey) { return  doRequest(apiKey); }
    };
  }]);
 

在PlayerController，我们调用nprService的programs()（调用$http service）

 app.controller('PlayerController', ['$scope', 'nprService', 'player', 
  function($scope, nprService, player) {
  $scope.player = player;
  nprService.programs(apiKey)
    .success(function(data, status) {
      $scope.programs = data.list.story;
    });
}]);
 

我们建议使用promises来简化API，但是为了展示的目的，我们在下一个post会简单介绍promises。

当PlayerController初始化后，我们的nprService会获取最新节目，这样我们在nprService service中就成功封装了获取NPR节目的功能。另外，我们添加RelatedController在侧边栏显示当前播放节目的相关内容。当我们的player service中获取到最新节目时，我们将$watc这个player.current属性并显示跟这个属性相关的内容。

 app.controller('RelatedController', ['$scope', 'player',
  function($scope, player) {
  $scope.player = player;
  $scope.$watch('player.current', function(program) {
    if (program) {
      $scope.related = [];
      angular.forEach(program.relatedLink, function(link) {
        $scope.related.push({
          link: link.link[0].$text, 
          caption: link.caption.$text
        });
      });
    }
  });
}]);
 

在 HTML 代码中， we just reference the related links like we did with our NPR programs, using the ng-repeat directive:

 <div class="large-4 small-4 columns" ng-controller="RelatedController">
  <h2>Related content</h2>
  <ul id="related">
    <li ng-repeat="s in related"><a href="{{ s.link }}">{{ s.caption }}</a></li>
  </ul>
</div>
 

只要player.current内容改变，显示的相关内容也会改变。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

angular权威教程(ng-book2)--第3章 Angular的工作原理
3.1 应用 1.利用angular-cli创建一个项目 1.ng new inventory_app #创建一个新的项目 2.ng generate component product #新建一个组件 2.一个组件的构建方法 Component({selector: single-component,inputs: [name, age],template: <div></div>, }) class Si…...
2024/4/21 15:42:13
双眼皮抽脂导致眼皮松弛
...
2024/4/21 15:42:11
双眼皮肿胀能热敷吗
...
2024/4/28 20:19:54
隔完双眼皮一直流泪
...
2024/4/21 15:42:09
埋线双眼皮术后可以吃鱼么
...
2024/4/20 17:09:35
做了双眼皮多久直接可以洗脸
...
2024/4/20 14:51:08
做双眼皮13 天没消肿
...
2024/4/20 14:51:07
做了双眼皮迟迟不消肿怎么办
...
2024/4/20 14:51:06
割双眼皮后眼模糊
...
2024/4/23 8:14:50
双眼皮全切抽脂大概多长时间消肿
...
2024/4/24 0:00:37
互联网巨头终极战场：得开发者得天下
文章经授权转载自甲子光年（ID：jazzyear）21世纪什么最贵？开发者。1983 年，一批开发者受邀到加州蒙特利（Monterey）参加苹果开发者大会，这是6月4日开幕的第25届WWDC（苹果世界…...
2024/4/20 14:51:03
个人作业——软件产品案例分析
关于华为软件开发云的案例分析第一部分-调研评测评测： 软件的bug，功能评测，黑箱测试下载并使用，描述最简单直观的个人第一次上手体验。因为我是比较后面开始使用的，所以之前就听说这个东西挺难找的，所…...
2024/4/20 14:51:02
Ubuntu安装及配置脚本
Ubuntu安装及配置脚本安装Ubuntu略安装系统后删除libreoffice安装必备软件安装oh my zsh配置zsh样式安装与配置zsh插件安装zinit添加sudo发现环境安装与配置brew配置代理配置java环境配置环境增加java软链安装开发工具安装配置IDEA配置程序启动快捷方式解决idea中文输入法问题安…...
2024/4/20 13:44:16
双眼皮持续水肿
...
2024/4/27 23:39:40
Vue知识点笔记（基础篇）
一、什么Vue 1、Vue的特点： 遵循 MVVM 模式。编码简洁，体积小，运行效率高，适合移动/PC端开发。Vue本身只关注 UI ，可以轻松引入Vue插件和其它第三库开发项目。 2、Vue与其他前端 JS 框架关联借鉴 angular 的模板 …...
2024/4/30 0:50:10
从增查改删到贡献开源：我的 2017 年度总结
区区一年的时间足够发生太多事情。去年的这个时候，我肯定不会想到现在的我会在厦门去往杭州参加 D2 的高铁上写下这篇总结。回顾 2017，有太多的事情值得记下，这里谨挑出和前端相关的地方和大家分享吧。小事记今年年中，我辞掉了毕…...
2024/4/20 14:50:57
Facebook 否认 AI 失控；俄罗斯研发反人脸辨识技术；
（点击上方蓝字，快速关注我们）参考：开源中国、腾讯科技、雷锋网、solidot、cnBeta、IT之家等0、俄罗斯科网高层，研发反人脸辨识技术人脸辨识技术日渐普及，不过人脸辨识技术的广泛应用，也有机会构…...
2024/4/20 14:51:01
几种编辑器的区别
1、HBuilder 简介：HBuilder是专为前端开发打造的开发工具，具有飞一样的编码、最全的语法库和浏览器兼容数据、可以方便的制作手机APP、最保护眼睛的绿柔设计等特点。支持HTML、CSS、JS、PHP的快速开发。从开放注册以来深受广大前端朋友们的喜爱。优点…...
2024/4/27 2:31:44
HBuilder 代码助手
代码输入法：一个数字，少敲10下键盘。按下候选列表前的数字，自动把该候选项输入到编辑区，你将不用把所有字都敲一遍了。当然除了数字选择，跳字输入也是支持的。代码块：一个代码块，少敲20下键盘…...
2024/4/26 21:42:01
数字技术战略：开发者体验 —— 内部工具的“最后一公里”
这是一篇迟来的文章，我本应该在很早之前写完，但是一直都发现时机不够成熟。去年，在经历了多个低代码前端项目的售前，以及一个低代码项目的技术实践强化，国内的 IT 企业缺乏对于『开发者体验』缺乏系统性的思考。来&…...
2024/4/21 15:42:06

4.3

相关文章

最新文章