码迷，mamicode.com
首页 > Web开发 > 详细

七步从AngularJS菜鸟到专家（6）：服务

时间：2015-07-14 13:27:44      阅读：180      评论：0      收藏：0      [点我收藏+]

标签：

这是＂AngularJS – 七步从菜鸟到专家＂系列的第六篇。

在第一篇，我们展示了如何开始搭建一个AngularaJS应用。在第五篇我们讨论了Angular内建的directives。在这一章，我们来讨论services，整理我们的代码并完成我们的音频播放器应用。

通过这整个系列的教程，我们会开发一个NPR（美国全国公共广播电台）广播的音频播放器，它能显示Morning Edition节目里现在播出的最新故事，并在我们的浏览器里播放。完成版的Demo可以看看这里。

目前为止，我们把注意力都放在了如何把视图绑定到$scope和如何用controller管理数据，从内存和效率角度出 发，controllers仅当需要的时候才会被实例化并在不需要的时候被丢弃掉，这就意味着每一次我们使用route跳转或者重载视图（我们会在下一篇 讨论routing），当前的controller会被销毁。

Services可以让我们在整个应用的生命周期中保存数据并且可以让controllers之间共享数据。

第六部分：Services

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

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

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

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

  1. angular.module(‘myApp.services‘, []) 
  2.   .factory(‘githubService‘, function() { 
  3.     var serviceInstance = {}; 
  4.     // 我们的第一个服务 
  5.     return serviceInstance; 
  6.   }); 

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

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

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

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

  1. angular.module(‘myApp.services‘, []) 
  2.   .factory(‘githubService‘, [‘$http‘, function($http) { 
  3.   
  4.     var doRequest = function(username, path) { 
  5.       return $http({ 
  6.         method: ‘JSONP‘, 
  7.         url: ‘https://api.github.com/users/‘ + username + ‘/‘ + path + ‘?callback=JSON_CALLBACK‘ 
  8.       }); 
  9.     } 
  10.     return { 
  11.       events: function(username) { return doRequest(username, ‘events‘); }, 
  12.     }; 
  13.   }]); 

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

  1. app.controller(‘ServiceController‘, [‘$scope‘, ‘githubService‘, 
  2.     function($scope, githubService) { 
  3. }]); 

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

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

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

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

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

  1. app.controller(‘ServiceController‘, [‘$scope‘, ‘githubService‘, 
  2.     function($scope, githubService) { 
  3.     // Watch for changes on the username property. 
  4.     // If there is a change, run the function 
  5.     $scope.$watch(‘username‘, function(newUsername) { 
  6.             // uses the $http service to call the GitHub API 
  7.             // and returns the resulting promise 
  8.       githubService.events(newUsername) 
  9.         .success(function(data, status, headers) { 
  10.                     // the success function wraps the response in data 
  11.                     // so we need to call data.data to fetch the raw data 
  12.           $scope.events = data.data; 
  13.         }) 
  14.     }); 
  15. }]); 

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

 

 技术分享

（示例截图，请前往原文测试）

 

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

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

  1. app.controller(‘ServiceController‘, [‘$scope‘, ‘$timeout‘, ‘githubService‘, 
  2.     function($scope, $timeout, githubService) { 
  3. }]); 

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

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

  1. app.controller(‘ServiceController‘, [‘$scope‘, ‘$timeout‘, ‘githubService‘, 
  2.   function($scope, $timeout, githubService) { 
  3.     // The same example as above, plus the $timeout service 
  4.     var timeout; 
  5.     $scope.$watch(‘username‘, function(newVal) { 
  6.       if (newVal) { 
  7.         if (timeout) $timeout.cancel(timeout); 
  8.         timeout = $timeout(function() { 
  9.           githubService.events(newVal) 
  10.           .success(function(data, status) { 
  11.             $scope.events = data.data; 
  12.           }); 
  13.         }, 350); 
  14.       } 
  15.     }); 
  16.   }]); 

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

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

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

  1. angular.module(‘myApp.services‘, []) 
  2.   .factory(‘githubService‘, [‘$http‘, function($http) { 
  3.     var githubUsername; 
  4.     var doRequest = function(path) { 
  5.       return $http({ 
  6.         method: ‘JSONP‘, 
  7.         url: ‘https://api.github.com/users/‘ + githubUsername + ‘/‘ + path + ‘?callback=JSON_CALLBACK‘ 
  8.       }); 
  9.     } 
  10.     return { 
  11.       events: function() { return doRequest(‘events‘); }, 
  12.       setUsername: function(newUsername) { githubUsername = newUsername; } 
  13.     }; 
  14.   }]); 

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

我们应用里的Services

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

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

  1. app.controller(‘PlayerController‘, [‘$scope‘, ‘$http‘, 
  2.   function($scope, $http) { 
  3.   var audio = document.createElement(‘audio‘); 
  4.   $scope.audio = audio; 
  5.   // ... 

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

  1. app.factory(‘audio‘, [‘$document‘, function($document) { 
  2.   var audio = $document[0].createElement(‘audio‘); 
  3.   return audio; 
  4. }]); 

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

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

  1. app.controller(‘PlayerController‘, [‘$scope‘, ‘$http‘, ‘audio‘, 
  2.   function($scope, $http, audio) { 
  3.   $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

  1. app.factory(‘player‘, [‘audio‘, function(audio) { 
  2.   var player = {}; 
  3.   return player; 
  4. }]); 

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

  1. app.factory(‘player‘, [‘audio‘, function(audio) { 
  2.   var player = { 
  3.     playing: false, 
  4.     current: null, 
  5.     ready: false, 
  6.   
  7.     play: function(program) { 
  8.       // If we are playing, stop the current playback 
  9.       if (player.playing) player.stop(); 
  10.       var url = program.audio[0].format.mp4.$text; // from the npr API 
  11.       player.current = program; // Store the current program 
  12.       audio.src = url; 
  13.       audio.play(); // Start playback of the url 
  14.       player.playing = true 
  15.     }, 
  16.   
  17.     stop: function() { 
  18.       if (player.playing) { 
  19.         audio.pause(); // stop playback 
  20.         // Clear the state of the player 
  21.         playerplayer.ready = player.playing = false; 
  22.         player.current = null; 
  23.       } 
  24.     } 
  25.   }; 
  26.   return player; 
  27. }]);

 

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

  1. app.controller(‘PlayerController‘, [‘$scope‘, ‘player‘, 
  2.   function($scope, player) { 
  3.   $scope.player = player; 
  4. }]); 

技术分享

（注：示例截图，请到原文测试）

注意：使用player service的时候，我们不需要去考虑audio service，因为player会帮我们处理audio service。

注意：当audio播放结束，我们没有重置播放器的状态，播放器会认为他自己一直在播放

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

  1. app.factory(‘player‘, [‘audio‘, ‘$rootScope‘, 
  2.   function(audio, $rootScope) { 
  3.   var player = { 
  4.     playing: false, 
  5.     ready: true, 
  6.     // ... 
  7.   }; 
  8.   audio.addEventListener(‘ended‘, function() { 
  9.     $rootScope.$apply(player.stop()); 
  10.   }); 
  11.   return player; 
  12. }]); 

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

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

  1. app.factory(‘player‘, [‘audio‘, ‘$rootScope‘, 
  2.   function(audio, $rootScope) { 
  3.   var player = { 
  4.     playing: false, 
  5.     // ... 
  6.     currentTime: function() { 
  7.       return audio.currentTime; 
  8.     }, 
  9.     currentDuration: function() { 
  10.       return parseInt(audio.duration); 
  11.     } 
  12.   } 
  13.   }; 
  14.   return player; 
  15. }]); 

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

  1. audio.addEventListener(‘timeupdate‘, function(evt) { 
  2.     $rootScope.$apply(function() { 
  3.       playerplayer.progress = player.currentTime(); 
  4.       playerplayer.progress_percent = player.progress / player.currentDuration(); 
  5.     }); 
  6.   }); 

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

  1. app.factory(‘player‘, [‘audio‘, ‘$rootScope‘, 
  2.   function(audio, $rootScope) { 
  3.   var player = { 
  4.     playing: false, 
  5.     ready: false, 
  6.     // ... 
  7.   } 
  8.   audio.addEventListener(‘canplay‘, function(evt) { 
  9.     $rootScope.$apply(function() { 
  10.       player.ready = true; 
  11.     }); 
  12.   }); 
  13.   return player; 
  14. }]); 

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

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

  1. app.directive(‘nprLink‘, function() { 
  2.   return { 
  3.     restrict: ‘EA‘, 
  4.     require: [‘^ngModel‘], 
  5.     replace: true, 
  6.     scope: { 
  7.       ngModel: ‘=‘, 
  8.       player: ‘=‘ 
  9.     }, 
  10.     templateUrl: ‘/code/views/nprListItem‘, 
  11.     link: function(scope, ele, attr) { 
  12.       scopescope.duration = scope.ngModel.audio[0].duration.$text; 
  13.     } 
  14.   } 
  15. }); 

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

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

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

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

 

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

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

  1. app.factory(‘nprService‘, [‘$http‘, function($http) { 
  2.     var doRequest = function(apiKey) { 
  3.       return $http({ 
  4.         method: ‘JSONP‘, 
  5.         url: nprUrl + ‘&apiKey=‘ + apiKey + ‘&callback=JSON_CALLBACK‘ 
  6.       }); 
  7.     } 
  8.   
  9.     return { 
  10.       programs: function(apiKey) { return doRequest(apiKey); } 
  11.     }; 
  12.   }]); 

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

  1. app.controller(‘PlayerController‘, [‘$scope‘, ‘nprService‘, ‘player‘, 
  2.   function($scope, nprService, player) { 
  3.   $scope.player = player; 
  4.   nprService.programs(apiKey) 
  5.     .success(function(data, status) { 
  6.       $scope.programs = data.list.story; 
  7.     }); 
  8. }]); 

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

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

  1. app.controller(‘RelatedController‘, [‘$scope‘, ‘player‘, 
  2.   function($scope, player) { 
  3.   $scope.player = player; 
  4.   
  5.   $scope.$watch(‘player.current‘, function(program) { 
  6.     if (program) { 
  7.       $scope.related = []; 
  8.       angular.forEach(program.relatedLink, function(link) { 
  9.         $scope.related.push({ 
  10.           link: link.link[0].$text, 
  11.           caption: link.caption.$text 
  12.         }); 
  13.       }); 
  14.     } 
  15.   }); 
  16. }]); 

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

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

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

在下一章也是我们的“AngularJS – 七步从菜鸟到专家”的最后一章，我们会讨论依赖注入，路由，和产品级别工具来让我们更快的使用AngularJS

本系列的官方代码库可从github上下载：https://github.com/auser/ng-newsletter-beginner-series.

要将这个代码库保存到本地，请先确保安装了git，clone此代码库，然后check out其中的part6分支：

  1. git clone https://github.com/auser/ng-newsletter-beginner-series.git 
  2. git checkout -b part6 
  3. ./bin/server.sh 

七步从AngularJS菜鸟到专家（6）：服务

标签：

原文地址：http://www.cnblogs.com/specification/p/4644914.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！