각도로 올바르게 경로를 지정하는 방법

저는 각도가 너무 새롭고 간단한 응용 프로그램을 만들려고합니다.이 도구는 ng-view 및 ng-route로 몇 가지보기를 전환합니다. 어떤 이유로 든 링크를 클릭하면 항상 동일한 컨트롤러 (HomeController)로 라우팅됩니다. 것 같습니다 빠른보기 오프각도로 올바르게 경로를 지정하는 방법

(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 대신 템플릿을 사용한다는 것입니다. 작품은 절대적으로 괜찮습니다. [plunk] (https://plnkr.co/edit/K3lbYprNAyqzlpo6YQuz?p=preview) – Nilesh

그냥 내 링크가 조금 이상하다는 것을 알았습니다.이 URL은 http : // localhost/Project/#입니다./ 상점 링크는 다음과 같습니다. http : // localhost/Project/#!/# % 2Fshop –

<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 컨트롤러입니다 :

이

이 내 HTML입니다

(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: '/' 
      }); 
    } 
})();

내 설정이다 나에게 너는 href URL에서 '#'을 제거해야한다고. 이렇게하면 더 잘 작동 할 수 있습니다.

<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가 추가됩니다. 라우팅이 깨지는 점이 무엇입니까? URL은 다음과 같습니다. localhost/Project/#!/# % 2Fshop –

@ Morta1 흥미로운 것은 % 2F는 /는 인코딩 된 URL입니다. 그래서 그것은 마치 어떤 이유로 URL을 인코딩하는 것처럼 보입니다. 나는 그 문제가 무엇인지 외견 상으로 볼 수 없다. 이 코드를 plnker에 넣을 수 있습니까? –

각도로 올바르게 경로를 지정하는 방법

답변

관련 문제