AngularJS 및 RequireJS를 사용하는 중첩 라우팅

Question

중첩 된 라우팅에 다음과 같은 문제가 있습니다 ... 할 수 없습니다.

사용 된 기술 : AngularJS, RequireJS; AngularAMD, 각도 경로.

그래서 ... 처음에는 내 주요 라우팅을 보여주고 싶은 모든 :

app.config(function($routeProvider, $locationProvider, $translateProvider) { 
$routeProvider 
      .when("/", 
       angularAMD.route({ 
        templateUrl : "app/src/home/HomeController.html", 
        controller : "HomeController", 
        controllerUrl : "app/src/home/HomeController.js" 
       }) 
      ) 
      .when("/overview", 
       angularAMD.route({ 
        templateUrl : "app/src/home/HomeController.html", 
        controller : "HomeController", 
        controllerUrl : "app/src/home/HomeController.js" 
       }) 
      ); 
}); 

내가 리디렉션있어 볼 수 있듯이하는 Pathes '/'와 '/개요/' app/src/home/HomeController.html '으로 변경하십시오.

는 HomeController.html에서 나는 다음과 같은 서브 컨트롤러와 뷰를로드 해요 :

... 
<div ng-include="'app/src/home/'+currentLocation+'/index.html'"> 
      </div> 
... 

currentLocation 경로 자체가된다. /와/overview /이 경우. 는 그리고 내 컨트롤러 :

define([ 
    "app", 
    "src/home/overview/index", 
], 
... 

그래서 나는보기를로드하기 전에 의존성으로 내 컨트롤러를 포함하도록 강제하고있다. 그래서 Angular와 RequireJS에서 이러한 경로를 수행하는 적절한 방법이 있는지 알고 싶습니까?

미리 감사드립니다. :)

Answer 1

중첩 된 상태를 사용해야합니다. 수유 경로를 기반으로 한 ng-include를 사용하는 것은 좋은 해결책이 아닙니다. 또 하나의 제안은 $ stateProvide를 사용하십시오, 그것은 routeProvider보다 나은 기능을 가지고 있습니다. 당신은 그들의 비교를 읽을 수 있습니다. 문제 솔루션

은

과 같이 될 수있다 : https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router

 
    // app.js 
 
// create our angular app and inject ngAnimate and ui-router 
 
// ============================================================================= 
 
angular.module('formApp', ['ngAnimate', 'ui.router']) 
 

 
// configuring our routes 
 
// ============================================================================= 
 
.config(function($stateProvider, $urlRouterProvider) { 
 
    
 
    $stateProvider 
 
    
 
     // route to show our basic form (/form) 
 
     .state('form', { 
 
      url: '/form', 
 
      templateUrl: 'form.html', 
 
      controller: 'formController' 
 
     }) 
 
     
 
     // nested states 
 
     // each of these sections will have their own view 
 
     // url will be nested (/form/profile) 
 
     .state('form.profile', { 
 
      url: '/profile', 
 
      templateUrl: 'form-profile.html' 
 
     }) 
 
     
 
     // url will be /form/interests 
 
     .state('form.interests', { 
 
      url: '/interests', 
 
      templateUrl: 'form-interests.html' 
 
     }) 
 
     
 
     // url will be /form/payment 
 
     .state('form.payment', { 
 
      url: '/payment', 
 
      templateUrl: 'form-payment.html' 
 
     }); 
 
     
 
    // catch all route 
 
    // send users to the form page 
 
    $urlRouterProvider.otherwise('/form/profile'); 
 
})