Угловая ошибка JS: $ инжектор: nomod Module Недоступен во время маршрутизации

Итак, я действительно новичок в угловой JS, и я работаю над проектом для компании с командой из моей школы в качестве стажировки. Я должен сначала запустить маршрутизацию, но она не будет работать независимо от того, что я пробовал. Я попробовал это с угловым JS 1.0.7, и с этим я мог заставить его работать, но с новейшей версией (1.5.7) я просто не могу после многих долгих попыток. Это ошибка, которую в настоящее время дает мне консоль:

Ошибка: $ injector: nomod Модуль недоступен Модуль «приложение» недоступен! Вы либо ошибочно написали имя модуля, либо забыли загрузить его. Если регистрация модуля гарантирует, что вы укажете зависимости в качестве второго аргумента. Насколько я знаю, ошибка исходит из строки в index.html, поскольку ошибка исчезает, если я удаляю ее, но также не работает маршрутизация.

Я бы очень признателен за любую помощь в этом. Я знаю, что я, вероятно, пропустил что-то невероятно основное (и код, вероятно, довольно неряшливый), но я просто не могу понять это. О, и, кстати, я попытался помещать контент из app.js в индекс .html внутри тегов скриптов, а затем он не выдавал ошибку, но ничего не отображал, действительно странно. Я также пробовал много разных способов сделать маршрутизацию в соответствии с инструкциями различных руководств или руководств, но я все еще не могу заставить его работать.

Код: Index.html (модифицированный таким образом, чтобы не уступить название компании и т.д.)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/ui-bootstrap-1.3.3-csp.css" rel="stylesheet"> 
    <link href="css/main.css" rel="stylesheet"> 
    <script src="js/angular.min.js"></script> 
    <script src="js/angular-resource.min.js"></script> 
    <script src="js/angular-route.min.js"></script> 
    <script src="js/ui-bootstrap-1.3.3.min.js"></script> 
    <script src="js/angular-animate.min.js"></script> 
    <script src="js/angular-touch.min.js"></script> 
    <script src="app/app.js"></script> 
    <script src="app/ctrl.js"></script> 
    <script src="scripts/routing.js"></script> 

</head> 
<body> 
<div class="navbar navbar-default" id="navbar"> 
    <div class="container" id="navbar-container"> 
    <div class="navbar-header"> 
     <a href="" class="navbar-brand"> 
     <small> 
      <i class="glyphicon glyphicon-log-out"></i> 
      Products and Company Info 
     </small> 
     </a><!-- /.brand --> 

    </div><!-- /.navbar-header --> 
    <div class="navbar-header pull-right" role="navigation"> 
     <a href="#howto" class="btn btn-sm btn-warning nav-button-margin"> <i class="glyphicon glyphicon-book"></i>&nbsp;Howto</a> 
     <a href="#" class="btn btn-sm btn-warning nav-button-margin"> <i class="glyphicon glyphicon-home"></i>&nbsp;Home</a> 
    </div> 
    </div><!-- /.navbar-container --> 
</div><!-- /.navbar --> 

<div> 
    <div class="container"> 
    <div ng-app="app"> 
    <h2>App name</h2> 
    <br/> 
    <div ng-view></div> 
    </div> 
    </div><!-- /.container --> 
</div> 


</body> 
</html>

Код app.js:

var app = angular.module('mainApp', ['ngResource', 'ngRoute']); 
app.run(function($rootScope) { 

});

Код ctrl.js

app.controller("mainCtrl", function($scope) { 
    $scope.firstName = "first name"; 
    $scope.lastName = "last name"; 
}); 

app.controller('howtoCtrl', function($scope) { 
    $scope.message = 'How To guide here'; 
});

Код routing.js:

// configure our routes 
    app.config(function($routeProvider) { 
     $routeProvider 

     // route for the home page 
     .when('/', { 
      templateUrl : 'home.html', 
      controller : 'mainCtrl' 
     }) 

     // route for the how to page 
     .when('/howto', { 
      templateUrl : 'howto.html', 
      controller : 'howtoCtrl' 
     }) 

     // route for the test2 page 
     .when('/testi2', { 
      templateUrl : 'test2.html', 
      controller : 'test2Controller' 
     }); 
    });

Edit: После изменения нг-приложение = "приложение" к нг-приложение = "mainApp", я получил следующие ошибки

angular.min.js: 103 ПОЛУЧИТЬ http://localhost/var/www/html/byow_routing_sahlays_2/byow/home.html 404 (Not Found) (анонимно функция) @ angular.min.js: 103n @ angular.min.js: 98g @ angular.min.js: 95 (анонимная функция) @ angular.min.js: 130 $ eval @ angular.min.js: 145 $ digest @ angular.min.js: 142 $ apply @ angular.min.js: 145 (анонимная функция) @ angular.min.js: 20invoke @ angular.min.js: 41c @ angular.min.js: 20Bc @ angular.min .js: 21ge @ angular.min.js: 19 (анонимная функция) @ angular.min.js: 315b @ angular.min.js: 189Sf @ angular.min.js: 37d @ angular.min.js: 36 угловой .min.js: 117 Ошибка: [$ compile: tpload] http://errors.angularjs.org/1.5.7/ $ compile/tpload? p0 = home.html & p1 = 404 & p2 = Не% 20Found на ошибки (родной) на http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:6:412 в http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:156:281 на http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:130:409 на м. $ Eval (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:145:107) при т. $ Дайджеста (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:142:173) при т. $ Применять (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:145:401) на л (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:97:250) на K (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:101:373) в XMLHttpRequest.y.onload (http://localhost/var/www/html/byow_routing_sahlays_2/byow/js/angular.min.js:102:397)

Final Edit: спасибо, ребята, он работает сейчас. Сначала проблема заключалась в том, что ng-app = "app" должно было быть ng-app "mainApp", и я забыл включить эту папку в адрес tempaltes в routing.js после того, как я перенесли файлы в их собственную папку ,

источник

2016-07-05 HenriM

попробовать добавление нг-приложение = «mainApp» в свой тег HTML –

Я попробовал, что с и без нг-приложение = "mainApp внутри DIV тег также не работает. Те же ошибки как в правлении в главном сообщении. – HenriM

попробуйте удалить ng-app из div и просто сохранить один ng-app = "mainApp" в теге html, вы можете просто иметь одно ng-приложение в одном html. –

Вы звоните в свой html <div ng-app="app">, но ваше приложение называется mainApp. Попробуйте изменить <div ng-app="app"> к <div ng-app="mainApp">

источник

2016-07-05 10:00:40 JulCh

Странно, в прошлый раз я пробовал, что он ничего не изменил, кроме того, что ошибка ушла (но ничего не сработало) на этот раз я получил следующие ошибки, изменив это: – HenriM

Я добавлю ошибки на главный пост – HenriM

Посмотрев на свою ошибку, кажется, что приложение просто не может найти ваш 'home.html' в folder '/ var/www/html/byow_routing_sahlays_2/byow /'. Вы уверены, что home.html здесь? Если он не может найти его, он не может скомпилировать шаблон и отобразить его в 'ng-view'. – JulCh

Добавить ниже код на самой первой линии ctrl.js и routing.js

var app = angular.module('mainApp');

ура!

источник

2016-07-05 09:57:10 varit05

Не помогите, попробовал это и раньше. :( – HenriM

Угловая ошибка JS: $ инжектор: nomod Module Недоступен во время маршрутизации

ответ

Смежные вопросы