使用 AngularJS 和 RequireJS 的嵌套路由

Question

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

使用的技术：AngularJS、RequireJS； AngularAMD，Angular路线。

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

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/”重定向到“[=30=” ]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');
})

使用 AngularJS 和 RequireJS 的嵌套路由

Nested routing using AngularJS and RequireJS

javascript

routing

requirejs

angularjs

angular-amd