Question

我正在学习AngularJS，无论我做什么，我都无法让路由工作，甚至可以逐字复制示例。

我基于W3Schools提供的示例，例如： 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

您在视图中缺少'/'，

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

这是工作Plunker

Answer 2

您可能需要没有/.

的路线

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路由器遇到了同样的问题。

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

2 个答案: