AngularJS 路由示例不工作
AngularJS routing example not working
我正在按照此处的示例进行操作:http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/ 但无法使路由正常工作。
设置:
RoutingExample 文件夹
-index.html
-app.js
-模板文件夹
--add_order.html
--show_order.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 10px;
background-color: #F5F5F5;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="sampleApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li><a href="#AddNewOrder"> Add New Order </a></li>
<li><a href="#ShowOrders"> Show Order </a></li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div><!-- /.container -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
add_order.html
<h2>Add New Order</h2>
{{ message }}a
show_order.html
<h2>Show Orders</h2>
{{ message }}
只要单击相应的 link,我应该能够访问 show_order.html 或 add_order.html。但是无论我点击哪个link,屏幕都会显示add_order.html。我添加了angular-route.min.js,所以我不确定为什么我不能正确路由。任何帮助表示赞赏。
谢谢
链接应将 href 设置为 #/ShowOrders
和 #/AddNewOrder
:
<li><a href="#/AddNewOrder"> Add New Order </a></li>
<li><a href="#/ShowOrders"> Show Order </a></li>
我正在按照此处的示例进行操作:http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/ 但无法使路由正常工作。
设置:
RoutingExample 文件夹
-index.html
-app.js
-模板文件夹
--add_order.html
--show_order.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Routing example</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 10px;
background-color: #F5F5F5;
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="sampleApp">
<div class="container">
<div class="row">
<div class="col-md-3">
<ul class="nav">
<li><a href="#AddNewOrder"> Add New Order </a></li>
<li><a href="#ShowOrders"> Show Order </a></li>
</ul>
</div>
<div class="col-md-9">
<div ng-view></div>
</div>
</div>
</div><!-- /.container -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/AddNewOrder', {
templateUrl: 'templates/add_order.html',
controller: 'AddOrderController'
}).
when('/ShowOrders', {
templateUrl: 'templates/show_orders.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/AddNewOrder'
});
}]);
sampleApp.controller('AddOrderController', function($scope) {
$scope.message = 'This is Add new order screen';
});
sampleApp.controller('ShowOrdersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
add_order.html
<h2>Add New Order</h2>
{{ message }}a
show_order.html
<h2>Show Orders</h2>
{{ message }}
只要单击相应的 link,我应该能够访问 show_order.html 或 add_order.html。但是无论我点击哪个link,屏幕都会显示add_order.html。我添加了angular-route.min.js,所以我不确定为什么我不能正确路由。任何帮助表示赞赏。
谢谢
链接应将 href 设置为 #/ShowOrders
和 #/AddNewOrder
:
<li><a href="#/AddNewOrder"> Add New Order </a></li>
<li><a href="#/ShowOrders"> Show Order </a></li>