AngularJS服务注册失败：页面加载出现SimpleAppService未定义错误求助

我来帮你一步步排查并解决这个服务注册失败的问题，咱们从几个关键问题入手：

1. 脚本加载顺序颠倒 #

你当前HTML里的脚本加载顺序是scripts.js → MathFactory.js → SimpleAppService.js，但scripts.js里直接引用了SimpleAppService，这时候这个服务还没被定义，自然会抛出ReferenceError。

修复方法：调整加载顺序，先加载依赖的文件，再加载主脚本：

<script src="angular.js"></script>
<script src="MathFactory.js"></script>
<script src="SimpleAppService.js"></script>
<script src="scripts.js"></script>

2. Angular模块重复创建 #

你的每个JS文件里都用angular.module("mainModule", [])，这个语法是创建新模块（第二个空数组表示依赖），导致后面的模块覆盖了前面的，服务和工厂无法共享同一个模块上下文。

修复方法：在后续文件中使用不带第二个参数的语法获取已存在的模块：

• MathFactory.js修改为：

// 去掉第二个参数，获取已创建的mainModule
var mainModule = angular.module("mainModule");
mainModule.factory('MathFactory', function () {
 var factory = {};
 factory.multiply = function (a, b) {
 return a * b;
 }
 factory.add = function (a, b) {
 return a + b;
 }
 factory.sub = function (a, b) {
 return a - b;
 }
 return factory;
});

• SimpleAppService.js修改为：

var mainModule = angular.module("mainModule");
mainModule.service("SimpleAppService", function (MathFactory) {
 this.square = function (a) {
 return MathFactory.multiply(a, a);
 }
 this.add = function (a, b) {
 return MathFactory.add(a, b);
 }
});

3. 控制器依赖注入不匹配 #

你控制器的依赖数组写的是["SimpleAppService"]，但函数参数却是($scope, person)，这会导致Angular注入的顺序错误，而且你其实没用到SimpleAppService（如果不需要可以直接移除，需要的话要对应上参数顺序）。

修复方法：如果不需要使用SimpleAppService，直接修正依赖数组：

.controller("simpleController", ["$scope", "person", function ($scope, person) {
 $scope.person = person;
 $scope.getFullName = function () {
 return person.firstName + " " + person.lastName;
 }
}]);

4. person对象的getFullName函数错误 #

你定义的person value里，getFullName函数直接用firstName和lastName，这会找不到变量，应该用this指向当前对象：

.value("person", {
 firstName: "firstName",
 lastName: "lastName",
 getFullName: function () {
 // 修正为this.firstName和this.lastName
 return this.firstName + " " + this.lastName;
 }
})

把这些修改全部应用后，页面加载时的ReferenceError就会消失，各个Angular组件也能正常工作了。

内容的提问来源于stack exchange，提问作者chaitanya kakarala