Как правильно проложить маршрут с угловым

Я довольно новый для углового, и я пытаюсь сделать простое приложение, которое переключает несколько просмотров с 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

Код выглядит правильно, не могли бы вы добавить плункер/скрипку того же самого? –

Я использовал ваш код и создал этот плункер. Единственное отличие - я использовал шаблон вместо шаблона url. Работает совершенно нормально [plunk] (https://plnkr.co/edit/K3lbYprNAyqzlpo6YQuz?p=preview) – Nilesh

только что заметил, что моя ссылка немного странная, это указатель url: http: // localhost/Project/#!/ и ссылка на магазин выглядит так: http: // localhost/Project/#!/#% 2Fshop –

Офф быстрый взгляд, кажется, мне нужно удалить «#» в URL-адресах 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, как-то #! добавляется в конец URL-адреса, а также добавляется% 2F. Я думаю, что то, что делает перерыв в маршрутизации или что-то в этом роде, выглядит примерно так: localhost/Project/#!/#% 2Fshop –

@ Morta1 Thats interesting% 2F - это кодировка url. Похоже, что он почему-то кодирует URL-адрес. Я не могу внешне понять, в чем проблема. Могли бы вы поместить этот код в plnker? –

Как правильно проложить маршрут с угловым

ответ

Смежные вопросы