Angular跨文件服务调用异常排查：我遗漏了什么？

让我帮你梳理下代码里的几个关键问题，这些就是导致服务注入失败的根源：

1. 服务名称的拼写与格式错误 #

看你的服务定义代码：

// RAPRequestService.js
angular.module('RecruitmentAuthorisationProcessApp').factory('RAPRequestsService ', function ($http) { 
  // ...服务代码
});

这里有两个致命问题：

• 服务名称'RAPRequestsService '末尾多了一个空格，Angular的依赖注入对名称的空格是严格敏感的，这会直接导致控制器找不到对应服务
• 服务的实际名称是RAPRequestsService（带末尾的s），但你在控制器里注入的是RAPRequestService（少了一个s）：

// RAPRequestsController.js
angular.module('RecruitmentAuthorisationProcessApp').controller('RAPRequestsController', ['$scope','RAPRequestService',function ($scope, RAPRequestService) { 
  // ...控制器代码
}]);

2. 控制器内服务变量名与调用名不匹配 #

即使你修正了注入的名称，控制器里调用时用的是RAPRequestsService.getRAPRequests()，但你注入的参数是RAPRequestService，变量名和调用名不一致，会触发RAPRequestsService is not defined的错误。

3. 脚本加载顺序问题 #

务必确保在加载RAPRequestsController.js之前，先加载RAPRequestService.js。Angular需要先完成服务的注册，控制器才能正常注入使用它，如果加载顺序颠倒，同样会出现注入失败的情况。

修复后的代码示例 #

修正后的RAPRequestService.js

angular.module('RecruitmentAuthorisationProcessApp').factory('RAPRequestsService', function ($http) { 
  console.log('RAPRequestsService.js loaded...');
  var RAPRequestsService = {};
  
  RAPRequestsService.getRAPRequests = function () { 
    return $http.get('/RAPRequests/GetRAPRequestsJSON'); 
  };
  
  return RAPRequestsService; 
});

修正后的RAPRequestsController.js

angular.module('RecruitmentAuthorisationProcessApp').controller('RAPRequestsController', ['$scope','RAPRequestsService',function ($scope, RAPRequestsService) { 
  $scope.getRAPRequests = function () { 
    RAPRequestsService.getRAPRequests()
      .success(function (rapRequests) { 
        $scope.data = rapRequests; 
        console.log($scope.data); 
      })
      .error(function (error) { 
        $scope.status = 'Unable to load rap requests: ' + error.message; 
        console.log($scope.status);
      });
  };
}]);

页面脚本加载顺序

<!-- 先加载服务文件 -->
<script src="RAPRequestService.js"></script>
<!-- 再加载控制器文件 -->
<script src="RAPRequestsController.js"></script>

内容的提问来源于stack exchange，提问作者Olusegun Orija