如何在AngularJS上路由页面
[英]How to route pages on AngularJS
问题描述
Hello guys I just started to learn Angular JS and I have a problem on loading the content from pages. 
大家好我刚刚开始学习Angular JS，我在从页面加载内容时遇到了问题。 I don't receive any content. 我没有收到任何内容。 This is my index and my js code: 这是我的索引和我的js代码：
index.html 的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 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 : '/'
});
}]);
My all pages are already created as files and the content is like this 我的所有页面都已创建为文件，内容如下
exterior.html exterior.html
<div>
<h2>Exterior</h2>
<p>My content here</p>
</div>
3 个解决方案
解决方案1
0 2015-02-25 14:01:40
Does it work if you build you .config like so: 如果您构建.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 : '/'
});
});
解决方案2
0 已采纳 2015-02-25 14:11:58
The issue is in these below lines 问题在于以下几个方面
<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>
You are including app.js before having angular.js and angular-route.js libraries. 在包含angular.js和angular-route.js库之前，您要包含app.js.
Include this at the bottom and check again 将其包含在底部并再次检查
<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>
There is one more error in your script: You are calling $route instead of $routes. 您的脚本中还有一个错误：您正在调用$ route而不是$ routes。
Let me know if it is useful 如果它有用，请告诉我
解决方案3
0 2015-02-25 14:19:52
angular.module('moduleName',['ngRoute']); angular.module（ 'MODULENAME'，[ 'ngRoute']）;
check the dependence and add source file angular-route.js in index.html 检查依赖性并在index.html中添加源文件angular-route.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.