Question

我正在学习如何浏览页面这是我的html页面

<html lang="en">

AngularJS路由示例

<body data-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>
        <div data-ng-view></div>
    </div>
    </div>
</div>



 </body>


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>    

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-route.js"></script> 
<script src="rout.js"></script>

rout.js是我编写所有配置部分的地方。

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

sampleApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/AddNewOrder', {
        templateUrl: '/add_order.html',
        controller: 'AddOrderController'
    }).
      when('/ShowOrders', {
        templateUrl: '/show_orders.html',
        controller: 'ShowOrdersController'
      }).
      otherwise({
        redirectTo: '/route-paging.html'
      });
}]);

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

之一

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>Add New Order</h2>

{{ message }}
</body>
</html>

其他页面Show_orders.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>Show Orders</h2>

{{ message }}
</body>
</html>

我从一个例子中得到了这个代码。我自己尝试了同样的功能。但没有奏效。任何人都知道哪里可能出错。

Answer 1

自1.2版以来，AngularJS已将其routerProvider内容移至单独的模块，称为ngRoute。因此，如果您使用的是1.2或更高版本，则必须包含其他js文件（即angular-route.min.js）并注入模块

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

RouteProvider不起作用

1 个答案: