如何在Angular 1应用程序中嵌入一个自包含的Angular 2应用程序-Java 学习之路

注意：我没有升级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 但在不同的上下文中 .

How can I resolve the conflict?

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

1 回答

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

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

了解如何实现angular1架构非常重要 . 但如果你是angular1＆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>

      
    </div>

    <footer>Angular 1 Stuff</footer>

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

        app.controller("appController",function($scope){
          $scope.myValue="Nyks";
        })
    </script>
```
回复于 2024-04-20T10:57:57+08:00

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

1 回答

相关问题