Вложенная маршрутизация с использованием 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"
                })
            );
});

Как вы можете видеть, я перенаправляю пути ' / ' и ' / Overview / ' в app/src/home/HomeController.html.

В HomeController.html я загружаю суб-контроллер и представления, как это:

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

в то время как currentLocation - это сам путь. Так что / и / обзор / в данном случае. И в моем контроллере:

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