使用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 / ”重定向到“ 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'); })