Маршрутизация не работает с AngularJS

В рамках учебного процесса я изучаю концепции маршрутизации angular js. Для этого я создал одну внутреннюю папку внутри приложения с двумя тестовыми HTML-страницами.

Когда я запускаю приложение, оно должно загрузить первую страницу из этой папки, но этого не происходит. Я не уверен, где я сделал что-то не так в этом коде...

Я получаю сообщение об ошибке, подобное этому 'angular.js:4640Uncaught Error: [$injector:modulerr]'

Ниже мой код контроллера

var myApp = angular.module('myApp', ['ngRoute']);   
   myApp.config(function ($routeProvider) {

$routeProvider
    .when('/', {
        templateUrl: 'Pages/main.html',
        controller: 'mainController'
    })

    .when('/second', {
        templateUrl: 'Pages/second.html',
        controller: 'secondController'
    })
   });

   myApp.controller('mainController', ['$scope','$log', function($scope,$log) {   
}]);
    myApp.controller('secondController', ['$scope','$log', function($scope,$log) {   
}]);

и html код идет сюда

<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
    <head>
        <title>Learn and Understand AngularJS</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">

        <!-- load bootstrap and fontawesome via CDN -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <style>
            html, body, input, select, textarea
            {
                font-size: 1.05em;
            }
        </style>

        <!-- load angular via CDN -->
        <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i>Home</a></li>
                    <li><a href="#/second"><i></i>second</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">
        <div ng-view></div>
        </div>

    </body>
</html>

и для main.html

   <h1>this is main page</h1>

и для второго.html

    <h1>this is second page</h1>

Кто-нибудь, пожалуйста, помогите с этим запросом,

Спасибо заранее..


angularjs angularjs-directive ngroute angularjs-routing angularjs-ng-route
person Enigma State    schedule 02.08.2016    source источник
comment
на какой модуль он жалуется в сообщении об ошибке?   -  person Claies    schedule 02.08.2016
comment
Попробуйте удалить / в <li><a href="#/second"><i></i>second</a></li>, чтобы это выглядело так: <li><a href="#second"><i></i>second</a></li>.   -  person FDavidov    schedule 02.08.2016
comment
Вы также дважды объявили контроллер, но предположим, что это опечатка.   -  person rrd    schedule 02.08.2016

Ответы (2)


arrow_upward
1
arrow_downward

Кажется, у меня все идет хорошо. См. рабочий пример ниже:

(Просто измените href ссылки на главную страницу на #/)

var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {

  $routeProvider
    .when('/', {
      templateUrl: 'Pages/main.html',
      controller: 'mainController'
    })

  .when('/second', {
    templateUrl: 'Pages/second.html',
    controller: 'secondController'
  })
});

myApp.controller('mainController', ['$scope', '$log',
  function($scope, $log) {}
]);
myApp.controller('secondController', ['$scope', '$log',
  function($scope, $log) {}
]);
html,
body,
input,
select,
textarea {
  font-size: 1.05em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<div ng-app="myApp">
  <header>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">AngularJS</a>
        </div>

        <ul class="nav navbar-nav navbar-right">
          <li><a href="#/"><i class="fa fa-home"></i>Home</a>
          </li>
          <li><a href="#/second"><i></i>second</a>
          </li>
        </ul>
      </div>
    </nav>
  </header>

  <div class="container">
    <div ng-view></div>
  </div>

  <script id="Pages/main.html" type="text/ng-template">
    <h1>this is main page</h1>
  </script>

  <script id="Pages/second.html" type="text/ng-template">
    <h1>this is second page</h1>
  </script>
</div>

Изменить

Не обслуживайте свой код Angular напрямую, используя протокол file:///. Он не сможет сделать запрос на загрузку ресурсов. Используйте любые простые легковесные серверы, например:

  1. Сервер Python Simple для платформ на базе Linux (python -m SimpleHTTPServer)
  2. Mongoose для Windows
person Shashank Agrawal    schedule 02.08.2016
comment
Я получаю эту ошибку «Запросы между источниками поддерживаются только для схем протоколов: http, данные, хром,» - person Enigma State; 02.08.2016
comment
Вы просматриваете свои HTML-страницы напрямую, дважды щелкнув страницу, т. е. начинающуюся с file:///? - person Shashank Agrawal; 02.08.2016
comment
Если да, то на платформах на базе Linux используйте комментарий python -m SimpleHTTPServer в каталоге вашего проекта и перейдите к localhost:8000 - person Shashank Agrawal; 02.08.2016
comment
Я использую платформу Windows. В этом случае мне также нужно выполнить описанный выше шаг. - person Enigma State; 02.08.2016
comment
Затем используйте mongoose для обслуживания ваших статических файлов. Это легкий HTTP-сервер. Angular не сможет работать, если вы просматриваете файлы напрямую. - person Shashank Agrawal; 02.08.2016
comment
Я только что установил сервер mongoose в свои окна ... как использовать его для размещения этих статических файлов ... не могли бы вы указать мне правильное направление ... - person Enigma State; 02.08.2016
comment
Это было, когда я использовал сервер mongoose в Windows, но вы можете напрямую перейти к своему проекту и запустить mongoose оттуда. - person Shashank Agrawal; 02.08.2016
comment
Или вы можете попробовать альтернативу, такую ​​​​как stackoverflow.com /вопросы/17351016/ - person Shashank Agrawal; 02.08.2016

arrow_upward
1
arrow_downward

заменять:

<li><a href="#"><i class="fa fa-home"></i>Home</a></li>

с участием

<li><a href="#/"><i class="fa fa-home"></i>Home</a></li>

и он должен работать нормально. Я проверил.

Эта ошибка означает, что angular не смог найти модуль, на который вы ссылаетесь. Ваш скрипт может подключаться к Интернету и можете ли вы убедиться, что угловой cdn не заблокирован вашим брандмауэром?

вы можете попробовать загрузить файл углового маршрута и ссылку в своем html и посмотреть, работает ли он.

person Mridul Kashyap    schedule 02.08.2016