如何在AngularJS上路由页面
如何在AngularJS上路由页面
提问于 2015-02-25 13:17:24
大家好，我刚开始学习角JS，我在从页面加载内容方面遇到了问题。我没有收到任何内容。这是我的索引和js代码：
index.html
<html ng-app="app">
<head>
<title>My App</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div class="container">
<header>
<h1>Text 1</h1>
<h2>Text 2</h1>
<nav>
<a href="#/">Home</a>
<a href="#/exterior">Exterior</a>
<a href="#/interior">Interior</a>
<a href="#/gallery">Gallery</a>
<a href="#/form">Form</a>
<a href="#/live-preview">Live</a>
</nav>
</header>
<div ng-view>
<!-- Content here -->
</div>
<footer>
2015
</footer>
</div>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
</body>
app.js
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routes) {
$route.when('/',{
templateUrl : '/views/index.html'
});
$route.when('/exterior',{
templateUrl : '/views/exterior.html'
});
$route.when('/interior',{
templateUrl : '/views/interior.html'
});
$route.when('/gallery',{
templateUrl : '/views/gallery.html'
});
$route.when('/form',{
templateUrl : '/views/form.html'
});
$route.when('/live-preview',{
templateUrl : '/views/live-preview.html'
});
$routes.otherwise({
redirectTo : '/'
});
}]);我的所有页面都已创建为文件，其内容如下
exterior.html
<div>
<h2>Exterior</h2>
<p>My content here</p>
</div>回答 3
Stack Overflow用户
回答已采纳
发布于 2015-02-25 14:11:58
问题就在下面的几行。
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular-route.js"></script>在拥有app.js和ang-route.js库之前，您将包括angular.js。
把这个放在底部，然后再检查一遍
<script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>您的脚本中还有一个错误:您正在调用$route而不是$routes。
如果有用的话让我知道
Stack Overflow用户
发布于 2015-02-25 14:01:40
如果您像这样构建您的.config，它是否有效：
app.config( function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : '/views/index.html'
})
.when('/exterior', {
templateUrl : '/views/exterior.html'
})
.when('/interior', {
templateUrl : '/views/interior.html'
})
.when('/gallery', {
templateUrl : '/views/gallery.html'
})
.when('/form', {
templateUrl : '/views/form.html'
})
.when('/live-preview', {
templateUrl : '/views/live-preview.html'
})
.otherwise({
redirectTo : '/'
});
});Stack Overflow用户
发布于 2015-02-25 14:19:52
angular.module('moduleName'，'ngRoute')；
检查依赖性并在index.html中添加源文件角-route.js
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28720017
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号