Question

AngularJS v1.7.4

我是AngularJS的新用户，我创建了一个简单的应用程序，但是不确定为什么一条路由有效（正确显示了部分文件中的静态html以及{{message}}），但是其他两条路由只显示了静态html和而不是使用{{message}}设置的$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>

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

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

一种途径有效，而其他两种则无效（使用AngularJS和RouteProvider）

1 个答案: