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

Question

AngularJS v1.7.4

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

其他错误，例如

The controller with the name 'ContactController' is not registered.

和

The controller with the name 'AboutController' is not registered.

当尝试分别转到 'Contact' 和 'About' 页面时，会在控制台中看到。

对于这三个路线，我有三个 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" />`

根据其他帖子的建议，我使用的是 'regular' js 文件，而不是 angular 和 angular-route.'minified' 版本。

主要 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>

Answer 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 文档：

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

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

One route works but not other two (using AngularJS and RouteProvider)

angularjs

ngroute