Javascript AngularJS中的双路由

AngularJS应用程序使用ui路由器。有两种类型的页面：

Routes.js中明确指定的路由 按需动态导出的路由 当页面加载时，应用程序请求数据类型、变量。如何根据模板的类型加载模板和页面的控制器

/**
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’)

---

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

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

在视图中，根据变量值使用和加载模板

检查下面的示例

routes.js

template0.html

---

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

如果部分视图是预加载的，那么使用ng include在性能影响方面可以忽略不计。看看这个答案：。

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

<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>