0

我对嵌套路由有以下问题......我做不到。

使用的技术：AngularJS、RequireJS；角AMD，角路线。

所以......首先我想展示我的主要路线：

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 绝对不是一个好的解决方案。还有一个建议，请使用 $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 回答