路由不适用于 AngularJS答案

【问题标题】：Routing is not working with AngularJS路由不适用于 AngularJS
【发布时间】：2016-12-07 10:37:02
【问题描述】：

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

谁能帮忙解答一下这个问题，

非常感谢..

【问题讨论】：

它在错误消息中抱怨哪个模块？
尝试删除<li><a href="#/second"><i></i>second</a></li> 中的/，使其看起来像：<li><a href="#second"><i></i>second</a></li>。
你也声明了两次控制器，但假设这是一个错字。

标签： angularjs angularjs-directive angularjs-routing ngroute angularjs-ng-route

【解决方案1】：

对我来说，一切似乎都很好。请参阅下面的工作示例：

（只需将主页链接的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 代码。它将无法请求加载资源。使用任何简单的轻量级服务器，例如：

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

【讨论】：

我收到此错误'跨源请求仅支持协议方案：http、data、chrome、'
您是否通过双击您的页面（即以file:/// 开头的页面）直接浏览您的 HTML 页面？
如果是，那么在基于 Linux 的平台上，在您的项目目录中使用注释 python -m SimpleHTTPServer 并浏览到 localhost:8000
我使用的是windows平台..在这种情况下我还需要按照上述步骤进行操作
然后使用mongoose 提供您的静态文件。它是一个轻量级的 HTTP 服务器。如果直接浏览文件，Angular 将无法运行。

【解决方案2】：

替换：

<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 中引用，看看它是否有效。

【讨论】：