一条路线有效，但其他两条无效（使用 AngularJS 和 RouteProvider）答案

【问题标题】：One route works but not other two (using AngularJS and RouteProvider)一条路线有效，但其他两条无效（使用 AngularJS 和 RouteProvider）
【发布时间】：2019-03-27 10:12:01
【问题描述】：

AngularJS v1.7.4

我是 AngularJS 的新手并创建了一个简单的应用程序，但不确定为什么一个路由有效（正确显示部分文件中的静态 html 以及 {{message}}），但其他两个路由仅显示静态 html 而不是 @ 987654322@ 正在使用 $scope.message 设置。

额外的错误如

名称为“ContactController”的控制器未注册。

和

名为“AboutController”的控制器未注册。

分别在尝试转到“联系”和“关于”页面时在控制台中显示。

对于三个路由，我有三个 html 文件和三个控制器文件。我确保包含<body ng-app="gmsApp">。

文件被加载为

<script src="./js/bootstrap.bundle.min.js"></script>

<script src="./js/angular.js"></script>
<script src="./js/angular-route.js"></script>

<script src="./js/controllers/about.controller.js"></script>
<script src="./js/controllers/contact.controller.js"></script>
<script src="./js/controllers/home.controller.js"></script>

<link href="./css/bootstrap.min.css" rel="stylesheet" />`

根据其他帖子的建议，我使用的是“常规”js 文件，而不是 angular 和 angular-route 的“缩小”版本。

主html文件中的代码是：

    var app = angular.module("gmsApp", ['ngRoute', 'gmsApp.controllers']);

    app.config(['$routeProvider', function($routeProvider) {
        $routeProvider.
        when('/home', {
            templateUrl: 'partials/home.html',
            controller: 'HomeController'
        }).
        when('/about', {
            templateUrl: 'partials/about.html',
            controller: 'AboutController'
        }).
        when('/contact', {
            templateUrl: 'partials/contact.html',
            controller: 'ContactController'
        }).
        otherwise({
            redirectTo: '/home'
        });
    }]);

/js/controllers/home.controller.js

angular.module('gmsApp.controllers', [])
.controller('HomeController', function ($scope) {
    $scope.message = 'Main page of the app';
});

/js/controllers/about.controller.js

angular.module('gmsApp.controllers', [])
.controller('AboutController', function ($scope) {
    $scope.message = 'This is about us page';
});

/js/controllers/contact.controller.js

angular.module('gmsApp.controllers', [])
.controller('ContactController', function ($scope) {
    $scope.message = 'Contact Us page ...';
});

/partials/home.html

<div ng-controller="HomeController">
    <h3>Home page</h3>
    <p>{{message}}</p>
</div>

/partials/about.html

<div ng-controller="AboutController">
    <h3>About Us</h3>
    <p>{{message}}</p>
</div>

/partials/contact.html

<div ng-controller="ContactController">
    <h3>Contact Us</h3>
    <p>{{message}}</p>
</div>

【问题讨论】：

标签： angularjs ngroute

【解决方案1】：

错误来自您在每个控制器中重新创建模块的事实。此行应仅出现在您的一个文件中（可能是您的主文件）：

angular.module('gmsApp.controllers', [])

然后在“/js/controllers/home.controller.js”、“/js/controllers/about.controller.js”和“/js/controllers/contact.controller.js”中，你应该像这样使用它：

angular.module('gmsApp.controllers')

请注意，这次您不使用“[]”。两者的区别在于，在这里你将访问已经创建的模块。

来自 angularjs 文档：

请注意，使用 angular.module('myModule', []) 将创建模块 myModule 并覆盖任何名为 myModule 的现有模块。采用 angular.module('myModule') 检索现有模块。

【讨论】：

对不起，它不起作用。现在，当我查看主页时出现不同的错误。 Module 'gmsApp.controllers' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
angular.module('gmsApp.controllers', []) 这是否在我的主 html 文件中？这应该放在代码中的哪个位置？
你有一个主js文件吗？喜欢 app.js 吗？您可以在其中放置所有路由和模块声明？
不，没有 app.js 文件。我只有主 html 页面。路由在html页面本身（在script标签内）在body标签内我有<div id="navigation"> <a href="#!/home">Home</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#!/about">About</a>&nbsp;&nbsp;&nbsp;&nbsp; <a href="#!/contact">Contact</a> </div> <div ng-view></div>
然后将 "angular.module('gmsApp.controllers', [])" 放入 "about.controller.js" 因为它是第一个包含的控制器和 "angular.module('gmsApp.controllers ')" 在其他两个中