gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 17:38:37 25 4
gpt4 key购买 nike

注意:我不是在升级 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 用于他们的新应用程序。

最佳答案

这个问题本身可以引发数以千计的其他问题。要如此全面地回答这个问题一点也不容易,因为您同时讨论了两种主要的基于 MVC 的架构(Angular1 和 Angular2)。

查看如何在 angular1 中使用 angular2。我可以成功地在 angular1 应用程序中引导 angular2 应用程序。

了解您如何实现 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>

<!-- 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>

关于angularjs - 如何在 Angular 1 应用程序中嵌入独立的 Angular 2 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34802717/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com