AngularJS 中的双重路由

Question

AngularJS 应用程序使用 ui-router。有两种类型的页面：

1. 在 routes.js 中明确指定的路由
2. 按需动态派生的路由

当页面加载时，应用程序会请求数据（类型、变量）。如何根据类型加载模板和页面控制器？

/**
There is an option with this routing, but then it will not work the other routed to specified explicitly
*/
/* routes.js */
// definition of "page" state

/* PageController.js */
// getting type of page
$scope.type = res.data.type;

/* page.jade */
div(ng-if=«page.type == ‘index’»)
    div(ng-controller=‘IndexController’)
div(ng-if=«page.type == ‘catalog’»)
    div(ng-controller=‘IndexController’)

目前尚不清楚如何加载模板，并且存在此解决方案的性能问题。或许有更好的解决方案？

Answer 1

在您的 IndexController 中，输入您的逻辑以获取您想要显示的页面。然后将此信息存储到作用域中。

在您看来，使用 ngIf 和 ngInclude 根据您的变量值加载模板。

查看下面的示例。

routes.js

angular.module('yourApp', ['ngRoute', ...])
    .config(function($routeProvider){
        $routeProvider
            .when('/', {
                templateUrl: 'template0.html',
                controller: 'IndexController'
            });
    });

template0.html

<div ng-if="page.type == 'index'">
  <div ng-include="template1.html"> ... </div>
</div>
<div ng-if="page.type == 'catalog'">
  <div ng-include="template2.html"> ... </div>
</div>

在这两种情况下，您的控制器都已经为 template0.html 加载。