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

2023年1月23日 250次阅读

注意：我没有升级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都需要使用但在不同的环境中.

我该如何解决冲突？

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

最佳答案 这个问题本身可以提出上千个其他问题.完全回答这个问题并不容易,因为你在谈论两个基于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>
点赞