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的路由问题

回答

相关问题