AngularJS 路由适用于 W3School，但不适用于其他地方

Question

我只是在学习 AngularJS，无论我做什么，我似乎都无法使路由正常工作，甚至逐字复制示例也是如此。

我基于 W3School 上提供的示例，例如： http://www.w3schools.com/angular/tryit.asp?filename=try_ng_routing_template

我建的页面是：

<!Doctype html>
<html data-ng-app="SUApp">
    <head>
        <link rel="stylesheet" type="text/css" href="SUStyleSheet.css" >
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
        <script src="SUApp.js"></script>
    </head>
    <body>
        <div id="Menu">
            <ul>
                <li><a href="#box">Create a new box</a></li>
            </ul>
        </div>
        <div data-ng-view></div>
    </body>
</html>

SUApp.js 是：

var SUApp = angular.module('SUApp',['ngroute']);
SUApp.config(function($routeProvider){
    $routeProvider
        .when('/',
              {
                templateURL:'index.html'
              })
        .when('/box',
              {

                templateURL:'box.html'
              })
        .otherwise({redirectTo: '/'});
});

Box.html:

<div class ="box">
    <p>Hello World</p>
</div>

我已经用细齿梳子仔细检查过了，我找不到任何技术上的错误（这并不一定意味着没有）。然而，真正奇怪的是，即使我复制并粘贴 W3Schools 示例，它在我使用的任何浏览器（Chrome 和 IE）中仍然不起作用。

其他 AngularJS 功能已在上述页面和模块上运行，例如，如果我删除配置并添加控制器。尤其是配置和路由让一切都变得井井有条。

Answer 1

您可能需要一条没有 /.

的路线

var SUApp = angular.module('SUApp',['ngroute']);
SUApp.config(function($routeProvider){
$routeProvider
    .when('',
          {
            templateURL:'index.html'
          })
    .when('/',
          {
            templateURL:'index.html'
          })
    .when('/box',
          {

            templateURL:'box.html'
          })
    .otherwise({redirectTo: '/'});
});

这在使用 UI 路由器时很常见，我想我在使用基本 Angular 路由器时遇到了同样的问题。

Answer 2

您在视图中缺少“/”，

 <ul>
    <li><a href="#/Box">Create a new box</a></li>
    <li><a href="#/">Home</a></li>
 </ul>

这是工作Plunker

AngularJS 路由适用于 W3School，但不适用于其他地方

AngularJS routing works on W3Schools but nowhere else

angularjs

angularjs-routing