Один маршрут работает, но не два других (используя AngularJS и RouteProvider) - PullRequest
Новая
       6

Один маршрут работает, но не два других (используя AngularJS и RouteProvider)

0 голосов
/ 23 октября 2018

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>

1 Ответ

0 голосов
/ 23 октября 2018

Ошибка возникает из-за того, что вы воссоздаете свой модуль в каждом контроллере.Эта строка должна присутствовать только в одном из ваших файлов (может быть вашим основным файлом): 

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'), чтобы получить существующий модуль.

...