嵌套路由使用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基於泌乳途徑絕對不是一個好的解決方案。還有一個建議，請使用$ 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'); 
 
})