AngularJS 中的 ng-route 不起作用
ng-route in AngularJS doesn't work
我正在练习 AngularJS 并且有一个问题:
ng-route
即使我添加了 angular-route.js
也不起作用。
这是我的 app.js
文件:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/intro.html'
})
.when('game', {
templateUrl: 'views/game.html',
controller: 'TableController'
})
.when('about', {
templateUrl: 'views/about.html'
})
.otherwise({
redirectTo: '/'
});
}]);
这是我的 index.html
<!DOCTYPE html>
<html>
<head>
<title>Color Picking</title>
<meta name="author" content="pexea12">
<meta charset="utf-8">
<meta name="viewport" content="device=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Script -->
<script src="js/bootstrap/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</head>
<body ng-app="app">
<header>
<br>
<h2>Color Picking</h2>
<br>
</header>
<div id="main">
<div ng-view></div>
</div> <!-- main -->
<!-- AngularJS -->
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/angular-route.js"></script>
<script src="js/app.js"></script>
<!-- Services -->
<script src="js/services/ColorService.js"></script>
<!-- Factories -->
<script src="js/factories/RandomFactory.js"></script>
<!-- Controllers -->
<script src="js/controllers/TableController.js"></script>
</body>
</html>
我的文件夹树是:
css(css 个文件,引导程序)
js(app.js,控制器,服务,工厂,...)
观看次数
我的网站可以使用 http://localhost:8080/,但不能使用 localhost:8080/about 或 localhost:8080/game。
我真的卡在这一点上了,找不到解决办法。
我认为你在 之后遇到了问题。 应该是:
$routeProvider
.when('/', {
templateUrl: 'views/intro.html'
})
.when('/game', {
templateUrl: 'views/game.html',
controller: 'TableController'
})
.when('/about', {
templateUrl: 'views/about.html'
})
.otherwise({
redirectTo: '/'
});
您的路线中缺少 /
我正在练习 AngularJS 并且有一个问题:
ng-route
即使我添加了 angular-route.js
也不起作用。
这是我的 app.js
文件:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/intro.html'
})
.when('game', {
templateUrl: 'views/game.html',
controller: 'TableController'
})
.when('about', {
templateUrl: 'views/about.html'
})
.otherwise({
redirectTo: '/'
});
}]);
这是我的 index.html
<!DOCTYPE html>
<html>
<head>
<title>Color Picking</title>
<meta name="author" content="pexea12">
<meta charset="utf-8">
<meta name="viewport" content="device=device-width, initial-scale=1.0">
<!-- CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Script -->
<script src="js/bootstrap/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</head>
<body ng-app="app">
<header>
<br>
<h2>Color Picking</h2>
<br>
</header>
<div id="main">
<div ng-view></div>
</div> <!-- main -->
<!-- AngularJS -->
<script src="js/vendor/angular.min.js"></script>
<script src="js/vendor/angular-route.js"></script>
<script src="js/app.js"></script>
<!-- Services -->
<script src="js/services/ColorService.js"></script>
<!-- Factories -->
<script src="js/factories/RandomFactory.js"></script>
<!-- Controllers -->
<script src="js/controllers/TableController.js"></script>
</body>
</html>
我的文件夹树是: css(css 个文件,引导程序) js(app.js,控制器,服务,工厂,...) 观看次数
我的网站可以使用 http://localhost:8080/,但不能使用 localhost:8080/about 或 localhost:8080/game。
我真的卡在这一点上了,找不到解决办法。
我认为你在 之后遇到了问题。 应该是:
$routeProvider
.when('/', {
templateUrl: 'views/intro.html'
})
.when('/game', {
templateUrl: 'views/game.html',
controller: 'TableController'
})
.when('/about', {
templateUrl: 'views/about.html'
})
.otherwise({
redirectTo: '/'
});
您的路线中缺少 /