如何正確地使用角度路由

我很新的角度，我試圖做一個簡單的應用程序，用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'); 
    } 
})();

來源

2016-12-06 Morta 1

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

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

剛注意到我的鏈接有點奇怪，這是索引url：http：// localhost/Project /＃！/ 和店鋪鏈接看起來像這樣：http：// localhost/Project /＃！/＃％2Fshop –

關快速查看，似乎對我來說，你需要刪除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>

來源

2016-12-06 17:48:01

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

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

如何正確地使用角度路由

回答

相關問題