路由不适用于 AngularJS

Question

作为学习过程的一部分，我正在漫游 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>

和 second.html

    <h1>this is second page</h1>

有人可以帮忙解答这个问题吗，

非常感谢..

Answer 1

替换：

<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 找不到您所指的模块。你的脚本可以连接到互联网吗？你能确保 angular cdn 没有被你的防火墙阻止吗？

您可以尝试下载 angular-route 文件并在您的 html 中引用，看看它是否有效。

Answer 2

对我来说似乎一切正常。请参阅下面的工作示例：

(把首页link的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>

编辑

不要使用 file:/// 协议直接提供您的 Angular 代码。它将无法请求加载资源。使用任何简单的轻量级服务器，例如：

Python 基于 Linux 平台的简单服务器 (python -m SimpleHTTPServer)
Mongoose 对于 Windows

路由不适用于 AngularJS

Routing is not working with AngularJS

angularjs

angularjs-directive

angularjs-routing

ngroute

angularjs-ng-route