路线在angularJS中不起作用

时间:2016-07-31 14:39:42

标签: javascript angularjs angularjs-routing

所有目录都设置完美,但仍然无法正常工作。 Pages'文件夹'包含两个页面'addOrder.html'和'showOrder.html'。我还包含文件'angular.min.js',但仍然没有结果。

//Define an angular module for our app
var sampleApp = angular.module('sampleApp', []);

//Define Routing for app
//Uri /AddNewOrder -> template add_order.html and Controller AddOrderController
//Uri /ShowOrders -> template show_orders.html and Controller AddOrderController
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';

});
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>AngularJS Routing example</title>
  </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>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
	<script src="app.js"></script>
  </body>
</html>

2 个答案:

答案 0 :(得分:0)

您必须包含angular.route.js,因为路径已分隔为另一个模块。 引自a weird issue

<script src="path/to/angular.js"></script>
<script src="path/to/angular-route.js"></script>

答案 1 :(得分:0)

您必须添加路由资源文件 的 “http // ajax.googleapis.com / AJAX /库/ angularjs / X.Y.Z /角route.js”

然后在你的模块中

var sampleApp = angular.module('sampleApp', [ngRoute]);