如何正确地使用角度路由

我很新的角度，我试图做一个简单的应用程序，用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中吗？ –

如何正确地使用角度路由

回答

相关问题