我正在学习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功能已在上述页面和模块上工作,例如,如果我删除配置并添加控制器。它特别是配置和路由,可以解决所有问题。
答案 0 :(得分:1)
您在视图中缺少'/',
<ul>
<li><a href="#/Box">Create a new box</a></li>
<li><a href="#/">Home</a></li>
</ul>
这是工作Plunker
答案 1 :(得分:0)
您可能需要没有/.
的路线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路由器遇到了同样的问题。