Question

我是Angular的新手。 div ng-view永远不适合我。这是我的代码，这是从在线演示中复制和粘贴的。谢谢你的帮助。

   <!DOCTYPE html>
   <html ng-app="sampleApp">
   <head>
       <title></title>
       <script src="Scripts/angular-1.2.22/angular.js"></script>
       <script src="Scripts/angular-1.2.22/angular-route.js"></script>
       <script src="Scripts/AngularController.js"></script>
   </head>
  <body >

<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>



  </body>
</html>

---脚本AngularController.js ----

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

    sampleApp.config(['$routeProvider',
       function ($routeProvider) {
                    $routeProvider.
                       when('/addOrder', {
                           templateUrl: 'templates/routeOne.html',
                           controller: 'AddOrderController'
                       }).
                     when('/showOrders', {
                         templateUrl: 'templates/routeTwo.html',
                         controller: 'ShowOrdersController'
                     }).
                     otherwise({
                      redirectTo: '/routeThree.html'
            });
     }]);

   //--- Add Order Controller ----
   sampleApp.controller('AddOrderController', function ($scope) {

   });

  //--- Show Orders Controller ----
  sampleApp.controller('ShowOrdersController', function ($scope) {

 });

Answer 1

您的代码有两个问题。第一个也是最重要的是你的链接不正确，它们没有斜线。

<li><a href="#/AddNewOrder"> Add New Order </a></li>
<li><a href="#/ShowOrders"> Show Order </a></li>

您目前遇到的第二个问题是，在您的路线定义中，否则您正在尝试重定向到文件，实际应该尝试重定向到角度定义的路线。这方面的一个例子可能是这样的：

$routeProvider
.when('/', {
    templateUrl: 'templates/routeThree.html'
})
.when('/addOrder', {
    templateUrl: 'templates/routeOne.html',
    controller: 'AddOrderController'
})
.when('/showOrders', {
    templateUrl: 'templates/routeTwo.html',
    controller: 'ShowOrdersController'
})
.otherwise({
    redirectTo: '/'
});

干杯！

使用ng-view的Angular 1.2.22路由问题

1 个答案: