将多个ng应用组合成一个应用

Combining multiple ng-apps into a single app

本文关键字：应用 一个 组合 ng      更新时间：2023-09-26

问题:我们在同一个页面上运行了多个angular应用程序。一个用于页脚。一个用于标头，一个用于登录模式。每个都有自己的状态和用户ui.router.

挑战:我们希望以最小的侵入性方式将它们组合到一个ng-app中。这里的主要问题是，当我们尝试组合它们时，切换状态会导致某些区域消失，

我们的第一个"朴素"方法是这样做:

angular
  .module('bigApp', ['smallApp1', 'smallApp2'])
  .run(['$state', function($state) {
    console.log("Big app running!");
  }]);

这似乎导致选择性呈现。为例。当我点击链接转到smallApp1中定义的状态时，smallApp2的视图消失了。

我的假设是否正确，即必须创建一个新的共同父状态?父状态需要有子视图来呈现需要留在原地的小应用?当状态改变时不会消失?

您需要绘制出您的新状态和组件。您可以使用分层状态，例如

"menu" state - contains navigation, status  bar (always present)
"menu.home" - contains the central home page
"menu.people" - contains your list of people
"menu.people.individual" - contains details of an individual (a sub view of "menu.people")

一旦你绘制了你的结构，你就可以确定哪些部分将使用ui-view，哪些将使用组件。每个组件都可以在一个应用程序下拥有自己的控制器。

相关文章：