如何在AngularJS中同时使用页面级控制器与外部脚本组件

这问题我之前调试AngularJS项目时也碰到过，核心原因有两个：模块重复定义和应用启动方式冲突，咱们一步步来修复：

1. 核心问题分析 #

你看到的Error: [ng:areq] TestController not a function错误，大概率是因为：

• 你在外部main.js里用angular.module("mainApp", [])重新创建了mainApp模块（带第二个依赖数组参数时，Angular会创建新模块，而不是获取已存在的），覆盖了页面脚本里已经注册了TestController的原模块，导致控制器找不到。
• 页面同时使用了ng-app="mainApp"指令和angular.bootstrap手动启动应用，Angular不允许两种方式启动同一个应用，这也会引发初始化冲突。

2. 具体修复步骤 #

步骤一：修正模块获取方式（关键） #

在main.js里，不要重新创建模块，而是获取页面脚本中已经定义好的mainApp模块。把main.js里的模块定义代码：

var app = angular.module("mainApp", []);

改成：

var app = angular.module("mainApp"); // 去掉第二个参数，获取已存在的模块

这样main.js里的factory、service、其他控制器都会注册到同一个模块上，不会覆盖页面里的TestController。

步骤二：移除重复的应用启动方式 #

Angular只能用一种方式启动应用，二选一即可：

• 推荐保留ng-app指令，删掉页面脚本里的手动启动代码：

  // 删掉这段代码
  angular.element(document).ready(function () {
      angular.bootstrap(document, ['mainApp']);
  });
  

• 如果你有特殊需求必须手动启动，那删掉HTML里的ng-app="mainApp"属性，保留手动启动代码。

步骤三：确保脚本加载顺序正确 #

保证页面里的模块创建脚本在main.js之前加载，这样main.js才能正确获取到已存在的mainApp模块。比如：

<script>
// 先创建模块并注册TestController
var app = angular.module("mainApp", []);
app.controller('TestController', function ($scope) {
    $scope.Results = '5';
});
</script>
<!-- 再加载外部脚本 -->
<script src="angularjs/main.js"></script>

3. 完整示例代码 #

修正后的HTML代码 #

<div ng-app="mainApp"> 
    <div class="row" ng-controller="myController"> 
        <p><b>Message From Service: </b>{{serviceMsg}}</p> 
        <p><b>Message From Factory: </b>{{factoryMsg}}</p> 
        <p><b>Message From Provider:</b>{{providerMsg}}</p> 
    </div> 
    <div class="row" ng-controller="CalcController"> 
        <p>Enter a number: <input type="number" ng-change="myFunc()" ng-model="number" /></p> 
        <button ng-click="square()">X<sup>2</sup></button> 
        <p>Result: {{result}}</p> 
    </div> 
    <div class="row" ng-controller="TestController"> 
        <p>Results:{{Results}}</p> 
    </div> 
</div>

修正后的页面脚本 #

<script>
var app = angular.module("mainApp", []);
app.controller('TestController', function ($scope) {
    $scope.Results = '5';
});
</script>
<script src="angularjs/main.js"></script>

修正后的main.js示例 #

// 获取已存在的mainApp模块
var app = angular.module("mainApp");

// 注册Service
app.service('MyService', function() {
    this.getMessage = function() {
        return "Hello from Service!";
    };
});

// 注册Factory
app.factory('MyFactory', function() {
    return {
        getMessage: function() {
            return "Hello from Factory!";
        }
    };
});

// 注册Provider
app.provider('MyProvider', function() {
    this.$get = function() {
        return {
            getMessage: function() {
                return "Hello from Provider!";
            }
        };
    };
});

// 注册myController
app.controller('myController', function($scope, MyService, MyFactory, MyProvider) {
    $scope.serviceMsg = MyService.getMessage();
    $scope.factoryMsg = MyFactory.getMessage();
    $scope.providerMsg = MyProvider.getMessage();
});

// 注册CalcController
app.controller('CalcController', function($scope) {
    $scope.number = 0;
    $scope.result = 0;
    $scope.square = function() {
        $scope.result = $scope.number * $scope.number;
    };
});

这样修改后，页面控制器和外部脚本里的组件就能正常共存运行了。

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