ngRoute не работает как ожидалось

I am trying to learn about routes in in angular and I am having some trouble getting the proper text to display. Кажется, что все работает без ошибок, когда я запускаю свою страницу, однако, представление не меняется от main.html ко второму.html когда я нажимаю на ссылку.

Вот некоторые фрагменты моего кода…

<html ng-app="myApp">

    <!-- load angular via CDN -->
    <script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.6.1/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" >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:

<h1>This is main</h1>

второе содержимое html:

<h1>This is second</h1>

приложение.js

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", "$location",     function($scope, $log, $location) {

}]);

myApp.controller('secondController', ["$scope", "$log", "$location",     function($scope, $log, $location) {

}]);

2 ответа

  1. На первой строке индекса.html, вы открываете <html>тег, но вы закрываетесь с </head>одним, плюс, я бы рекомендовал поместить ваш ng-app="myApp"в открывающий <body>тег, таким образом :

    <head>
        <!-- everything you need -->
    </head>
    <body ng-app="myApp">
        <!-- and stuff -->
    </body>
    

    Если это ничего не меняет после исправления этих ошибок, я действительно не знаю, в чем проблема, все выглядит нормально.