AngularJSとRequireJSを使用したネストされたルーティング

Question

ネストされたルーティングには次の問題があります...私はそれを行うことができません。

使用技術：AngularJS、RequireJS; AngularAMD、Angular Route。

だから... ...最初、私は私のメインのルーティングを表示したいすべての：

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を使用することは、間違いなく良い解決策ではありません。もう1つの提案は、$ 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'); 
 
})