如何使用services完成音频播放器应用开发

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

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'); },     };   }]);

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

   Type in a GitHub username      {{ events }}

现在我们可以监视 $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 
        playerplayer.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; }]);

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

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

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

为了解决这个问题，我们需要使用$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() {       playerplayer.progress = player.currentTime();       playerplayer.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) {       scopescope.duration = scope.ngModel.audio[0].duration.$text;     }   } });

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

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