0

ネストされたルーティングに次の問題があります...実行できません。

使用されたテクノロジー: 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 はパスそのものです。したがって、この場合は / と /overview/ です。そして私のコントローラーで：

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

そのため、ビューをロードする前に、コントローラーを依存関係として含める必要があります。Angular と RequireJS でこれらのルートを実行する適切な方法があるかどうか知りたいですか?

前もって感謝します。:)

4

1 に答える 1

0

あなたの問題のために、ネストされた状態を使用する必要があります。授乳経路に基づいて 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');
})

于 2016-07-02T17:32:07.340 に答える