在这些 html 页面中使用控制器进行路由，这可能吗？

Question

我是 AngularJS 开发的新手，实际上我遇到了一个问题。 在我的 index.html 中，我已经包含了很多这样的脚本：

<script type="text/javascript" src="libs/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-route.js"></script>
<script type="text/javascript" src="libs/angular-translate/angular-translate.js"></script>
<script type="text/javascript" src="libs/angular-translate-loader-partial/angular-translate-loader-partial.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="app/controllers/commons/language.js"></script>

更清楚地说，我想将我的应用控制器与 app.js 分开，就像这样：

home.js => HomeCtrl
about.js => AboutCtrl ..

但是，当然，当我开始路由时，我遇到了这个错误：

Error: [ng:areq] http://errors.angularjs.org/1.2.15/ng/areq?p0=homeCtrl&p1=not%20aNaNunction%2C%20got%20undefined

关于我的 homeCtrl 不存在。 所以我的问题是，如何在路由期间指定我的控制器 js 包含在 home.html 中而不是 index.html 中。 非常感谢。

Answer 1

您可以先加载控制器，然后再加载自己的模块中的应用程序。为了方便起见，您的模块应反映您的目录结构。

// app/ctrl/main.js
angular.module('app.ctrl.main' []).controller('mainCtrl', function () {...});

// app/ctrl/about.js
angular.module('app.ctrl.about' []).controller('aboutCtrl', function () {...});

最后加载您的应用，使其依赖于上述模块：

// app/app.js
angular.module('app', ['app.ctrl.main', 'app.ctrl.about'])
    .config(function ($routeProvider) {
        // route configuration
    });

您的 html 应该如下所示：

<script type="text/javascript" src="app/ctrl/main.js"></script>
<script type="text/javascript" src="app/ctrl/about.js"></script>
<script type="text/javascript" src="app/app.js"></script>