Question

我正在尝试以角度学习路线，我在查看正确的文字时遇到了一些麻烦。当我运行我的页面时，似乎一切正常，但是当我点击链接时，视图没有从main.html更改为second.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>

app.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) {

}]);

Answer 1

尝试ui-router而不是ngRoute

我在很多项目中使用它并且它的工作非常好

doc：https://github.com/angular-ui/ui-router

Answer 2

在index.html的第一行，你打开了一个<html>代码，但是你的结果是</head>，而且，我建议你放置ng-app="myApp"在开头<body>标记中，这样：

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

如果在纠正这些错误后没有任何改变，我真的不知道是什么问题，一切看起来都不错。

ngRoute没有按预期工作

2 个答案: