2016-12-06 75 views
0

我很新的角度,我試圖做一個簡單的應用程序,用ng-view和ng-route切換很少的視圖。 出於某種原因,我點擊的每個鏈接始終將我路由到同一控制器(HomeController)。如何正確地使用角度路由

這是我的配置

(function(){ 
    'use strict'; 
    angular 
     .module('app',['ngRoute']) 
     .config(myConfig); 

    myConfig.$inject = ['$routeProvider']; 

    function myConfig($routeProvider){ 
     //noinspection JSUnresolvedFunction 
     $routeProvider 
      .when('/',{ 
       templateUrl : 'templates/home.html', 
       controller : 'HomeController', 
       controllerAs : 'vm' 
      }) 
      .when('/shop', { 
       templateUrl : 'templates/shop.html', 
       controller : 'ShopController', 
       controllerAs : 'vm' 
      }) 
      .when('/cart', { 
       templateUrl : 'templates/cart.html', 
       controller : 'CartController', 
       controllerAs : 'vm' 
      }) 
      .otherwise({ 
       redirectTo: '/' 
      }); 
    } 
})(); 

這是我的HTML:

<body ng-app="app"> 
    <div id="site-wrapper"> 
     <nav> 
      <ul> 
       <li class="button"><a href="#/home">Home</a></li> 
       <li class="button"><a href="#/shop">Shop</a></li> 
       <li class="cart"><a href="#/cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li> 
      </ul> 
     </nav> 
     <ng-view></ng-view> 
    </div> 
    <script src="js/angular.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script> 
    <script src="js/index.js"></script> 
    <script src="controllers/CartController.js"></script> 
    <script src="controllers/HomeController.js"></script> 
    <script src="controllers/ShopController.js"></script> 
</body> 

這裏是例如2個控制器:

(function(){ 
    'use strict'; 
    angular 
     .module('app') 
     .controller('CartController', CartController); 
     CartController.$inject = ['$scope', '$log']; 


    function CartController($scope, $log){ 
     var vm = this; 
     $log.info('Cart CTRL loaded'); 
    } 
})(); 

(function(){ 
    'use strict'; 
    angular 
     .module('app') 
     .controller('HomeController', HomeController); 
    HomeController.$inject = ['$scope', '$log']; 

    function HomeController($scope , $log){ 
     var vm = this; 
     $log.info('Home CTRL loaded'); 
    } 
})(); 
+0

代碼看起來正確,請問您可以添加相同的plunker /小提琴嗎? –

+0

我使用你的代碼並創建了這個運行程序。唯一的區別是我使用模板而不是模板url。作品絕對沒事[punk](https://plnkr.co/edit/K3lbYprNAyqzlpo6YQuz?p=preview) – Nilesh

+0

剛注意到我的鏈接有點奇怪,這是索引url:http:// localhost/Project /#!/ 和店鋪鏈接看起來像這樣:http:// localhost/Project /#!/#%2Fshop –

回答

0

關快速查看,似乎對我來說,你需要刪除href網址中的'#'。所以這樣做可能對你更好。

<nav> 
    <ul> 
      <li class="button"><a href="home">Home</a></li> 
      <li class="button"><a href="shop">Shop</a></li> 
      <li class="cart"><a href="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li> 
    </ul> 
</nav> 
+0

我試過了,它沒有工作。 我的網址看起來有些奇怪,不知何故,#是!被添加到URL的末尾,並且還添加了%2F。 我認爲多數民衆贊成什麼使路由中斷或什麼,網址如下所示: localhost/Project /#!/#%2Fshop –

+0

@ Morta1多數民衆贊成在%2F是一個/這是URL編碼。所以它好像是由於某種原因對url進行了編碼。我無法從外表看出問題所在。你能把這個代碼放在一個plnker中嗎? –