Angular 1.2.22與ng-view的路由問題

我是Angular的新手。 div ng-view從來不適合我。這裏是我的代碼，這是從在線演示中複製並粘貼的。感謝幫助。Angular 1.2.22與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) { 

});

來源

2014-09-03 Devaraju Sripad

有關於你的代碼2點的問題。首先也是最重要的是你的鏈接不正確，他們缺少斜線。

<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: '/' 
});

乾杯！

來源

2014-09-03 14:29:08 HeberLZ

謝謝分配。這工作。 – 2014-09-03 15:01:15

不客氣！ – HeberLZ 2014-09-03 15:04:34

Angular 1.2.22與ng-view的路由問題

回答

相關問題