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

如果您使用.then（）方法，则必须在服务中实现名为promise的内容。

如果您是棱角分明的新手，我建议您了解Angular 2或更多。第一个版本遇到了一些问题

Answer 2

您的服务应包含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.
      });
    };
  }]);

您的Controller可以像这样使用此服务：

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()等特定请求类型提供了一些快捷方法。您可以在official docs中阅读更多内容。

AngularJs - 使用服务

2 个答案: