嵌套路由使用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'); 
 
})