AngularJs - 与服务一起工作

Question

我对Angular很陌生。我看了一些教程，阅读了一些文档，我开始编码。

这是我的代码：

angular.module('CourseStoryApp').service("CourseStoryService", ['$http', '$routeParams', function ($http, $routeParams) {
    return $http({
        url: "CourseStoryWebService.asmx/Course",
        method: "GET",
        params: { eID: $routeParams.eid }
    }).then(function (response) {
        return response.data;
    });
}]);
angular.module('CourseStoryApp').controller('HeaderController', ['$scope', 'CourseStoryService', function ($scope, CourseStoryService) {
   CourseStoryService.then(function (data) {
     $scope.courseStory = data;  
   });
}]);

这是创建服务并在控制器上调用它的正确方法吗？

Answer 1

您的服务应包含一些在 CourseStories 上下文中的方法。你可能想get一个特定的项目，delete一个和类似的东西。为每个用例创建单独的服务是愚蠢的。

若要创建publicly可用的方法，请将它们分配给服务中的 this 变量。

因此，您的服务可能如下所示：

angular
  .module('CourseStoryApp')
  .service('CourseStoryService', ['$http', function($http) {
    // Better to uncouple the service from the router, so you have a generic
    // 'getStory' method.
    this.getStory = function(id) {
      return $http({
        url: "CourseStoryWebService.asmx/Course",
        method: "GET",
        params: { eID: id }
      }).then(function(response) {
        return response.data;
      }, function() {
        // Error handling
        // Maybe write some logs etc.
      });
    };
  }]);

您的控制器可以像这样使用此服务：

angular
  .module('CourseStoryApp')
  .controller('HeaderController', ['$scope', '$routeParams', 'CourseStoryService', function($scope, $routeParams, CourseStoryService) {
    // Consume your Service Method like this.
    CourseStoryService.getStory($routeParams.eid).then(function(data) {
      $scope.courseStory = data;
    }, function() {
      // Error Handler
      // Notify user etc.
    });
  }]);

请注意，angular 的 $http 提供程序有一些针对特定请求类型(如 $http.get() 等(的快捷方式方法。您可以在官方文档中阅读更多内容。

Answer 2

如果你使用的是 .then(( 方法，你必须在你的服务中实现一个名为 promise 的东西。

如果你是 angular 的新手，我真的建议你学习 Angular 2 或更多。第一个版本遇到了一些问题