如何在Angular 1应用程序中嵌入独立的Angular 2应用程序

Question

如何在Angular 1应用程序中嵌入独立的Angular 2应用程序

Tim*_*erg 5 integration angularjs angular

注意：我不会升级ng1应用。我正在尝试让ng1和ng2应用程序并排（或更确切地说嵌套）。

我们大致使用以下html来显示如何尝试在页面上一次使用两个框架：

Angular 1：整个页面由Angular 1控制。但是我们使用ng-non-bindable告诉ng1应用程序忽略页面中间的div。
Angular 2：应该将页面中间的元素引导为Angular 2。

<html ng-app="app">
  <head></head>
  <body ng-controller="appController">
    <header>Angular 1 Stuff</header>

    <div ng-non-bindable>
      <ng2-app></ng2-app>
      <script src="bundle.js"/>
      <!-- bundle.js is the output from webpack and should bootstrap <ng2-app> -->
    </div>

    <footer>Angular 1 Stuff</footer>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

当我们单独运行它而不尝试集成到此ng1应用程序页面时，我们的应用程序运行良好。

但是，当我们在集成后运行它时，我们会收到一条错误消息，指出与全局require方法存在冲突。

ng1应用程序正在使用requirejs
ng2捆绑包是的典型输出webpack（使用typescript-loader）

requirejs和webpack都使用，require但是在不同的上下文中。

我该如何解决冲突？

如果您好奇为什么要这样做：我们正在尝试在还具有Angular 1应用程序的页面上引导新应用程序。我们公司将全局页眉/页脚和每个页面的内容作为单独的已部署应用程序。这使团队可以将页面作为独立项目进行处理。一个团队希望在我们的新页面之一上尝试将Angular 2用于其新应用程序。

Answer 1

mic*_*yks 2

这个问题本身可以引发数千个其他问题。要如此全面地回答这个问题并不容易，因为您正在谈论两种主要的基于 MVC 的架构（Angular1 和 Angular2）。

了解如何在 Angular1 中使用 Angular2。我可以成功地在 Angular1 应用程序中引导 Angular2 应用程序。

了解如何实现 Angular1 架构非常重要。但如果你是 angular1&2 的人，你可能会自己找到方法。

Angular1 应用程序内的 Angular2 应用程序

索引.html

<body ng-app="app" ng-controller="appController">
    <header>{{myValue}}</header>   //belongs to angular1

    <div ng-non-bindable>
      <my-app></my-app>

      <!-- angular 2 app bootstrapping -->
    </div>

    <footer>Angular 1 Stuff</footer>

    <script>
        var app=angular.module("app",[]);

        app.controller("appController",function($scope){
          $scope.myValue="Nyks";
        })
    </script>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，1 月前
查看次数：	2826 次
最近记录：	10 年，1 月前