Question

注意：我没有升级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>

我们的应用程序在我们自己运行它时没有尝试集成到这个ng1应用程序页面中。

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

ng1应用使用requirejs
ng2捆绑包是webpack（使用typescript-loader）

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

如何解决冲突？

如果您对我们为什么这样做感到好奇：我们正在尝试在同样具有Angular 1应用程序的页面上引导新应用程序。我们公司将全局页眉/页脚和每个页面的内容作为单独部署的应用程序。这允许团队作为独立项目在页面上工作。一个团队想在我们的一个新页面上尝试使用Angular 2作为他们的新应用程序。

Answer 1

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

了解如何在angular1中使用angular2。我成功地可以在angular1 app中引导angular2 app。

了解如何实施angular1架构非常重要。但如果你是有角度的1＆2家伙，你可能会找到自己的方法。

Angular2 App within Angular1 App

<强>的index.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>

如何在Angular 1应用程序中嵌入一个自包含的Angular 2应用程序

1 个答案: