Почему маршрутизация в моем приложении не работает?

Я использую angularJS и хочу добавить маршрутизацию в свое приложение. Но у меня ошибка:

Uncaught Error: [$injector:modulerr] Failed to instantiate module countriesModule due to:
Error: [$injector:nomod] Module 'countriesModule' 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.

Это мой файл app.js:

var countryApp = angular.module('countryApp', ['ngRoute', 'countriesDataModule']);

countryApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('data/', {
        templateUrl : 'partials/countries.html',
        controller : 'CountriesListCtrl'
    }).when('data/:countryUrl', {
        templateUrl : 'partials/country-details.html',
        controller : 'CountryDetailsCtrl'
    }).otherwise({
        redirectTo : '/countries'
    });
}]);

И файл controllers.js:

var countriesDataModule = angular.module('countriesDataModule', []);

countriesDataModule.controller('CountriesListCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('data/countries.json').success(function (data) {
        $scope.countries = data;
        $scope.selectedProp = 'countryId';
    });
}]);

countriesDataModule.controller('CountryDetailsCtrl', ['scope', '$routeParams', function ($scope, $routeParams) {
    $scope.countyUrl = $routeParams.countryUrl;
}]);

Файл index.html:

<!DOCTYPE html>
<html lang="en" ng-app="countriesModule">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script src="bower_components/jquery-2.2.3.min/jquery-2.2.3.min.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <title>Document</title>
</head>
<body>
<div class="container">
    <header>
        <h1>Сountry for travel</h1>
    </header>
    <main>
        <div ng-view></div>
    </main>
</div>
</body>
</html>

Структура моего проекта:

введите здесь описание изображения

Я посетил другие страницы и увидел там несколько советов:

AngularJS 1.2 $injector:modulerr

Неперехваченная ошибка Angular JS: [$injector:modulerr]

https://docs.angularjs.org/error/$injector/modulerr?p0=countriesModule&p1= %E2%80%A62Flocalhost:8080%2Fbower_components%2Fangular%2Fangular.min.js:21:19

но к сожалению мне не помогло


javascript routes angularjs route-provider angularjs-injector
person S.Hagvin    schedule 27.04.2016    source источник
comment
Я вижу только ссылку на countriesDataModule   -  person Ozrix    schedule 27.04.2016
comment
Где-то вы ссылаетесь на countryModule, который не показан в вашем примере кода.   -  person Austin    schedule 27.04.2016
comment
Ошибка: модуль «countriesModule» недоступен! Но я использую в своем приложении другой модуль countryDataModule. Почему у меня такая ошибка?   -  person S.Hagvin    schedule 27.04.2016
comment
опубликуйте свой index.html   -  person Chris Newman    schedule 27.04.2016
comment
Смотри Смотри выше, я добавил index.html   -  person S.Hagvin    schedule 27.04.2016
comment
Извините, я заметил, где я сделал ошибку. Я изменил имя модуля в controllers.js, но забыл изменить его в директиве html ng-app, но Крис Ньюман, вы помогли мне обдумать это. Благодарю вас!   -  person S.Hagvin    schedule 27.04.2016

Ответы (1)


arrow_upward
2
arrow_downward

В коде, которым вы поделились, нет ссылки на что-либо, называемое модулями стран.

person Kraken    schedule 27.04.2016