如何嵌入一个角1应用程序内部一个独立的角2的应用 [英] How to embed a self-contained Angular 2 application inside of an Angular 1 application
问题描述
的注：我不是升级NG1应用程序。我试图得到一个NG1和NG2应用到生活并排侧（或相当嵌套）。的
我们大致有以下HTML展示我们如何试图在页面同时上使用两个框架：
- 角1：整个页面由角1控制，但是我们已经使用NG-非绑定告诉NG1应用程序忽略在页面中间的DIV
- 角2：只要在页面中间的元素应该被作为自举角2 。
＆LT; HTML NG-应用=应用程序＆GT;\r
＆LT; HEAD＆GT;＆LT; /头＆GT;\r
＆LT;机身NG控制器=AppController的＆GT;\r
＆LT;报头GT; 1角的东西＆LT; /头＆GT;\r
\r
＆LT; DIV NG-非绑定＆GT;\r
＆LT; NG2应用＆GT;＆LT; / NG2应用＆GT;\r
＆LT;脚本SRC =bundle.js/＆GT;\r
＆LT;！ - bundle.js是的WebPack输出，应该引导＆LT; NG2应用＆GT; - ＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT;页脚和GT; 1角的东西＆LT; /页脚＆GT;\r
＆LT; /身体GT;\r
＆LT; / HTML＆GT; \r
当我们自身的运行它，但不尝试融入这个NG1申请页面我们的应用程序工作得很好。
当我们整合后运行然而，我们得到一个错误说有一个与全球要求法的冲突。
- 的NG1应用程序的是的使用
requirejs - 的NG2包是从输出典型
的WebPack（使用打字稿装载机）
这两个requirejs和使用的WebPack 要求，但在不同的上下文中。
我怎样才能解决这个冲突？
的如果我们为什么做这样的好奇：我们正在努力引导一个页面，也有1角上应用了新的应用程序。公司拥有全球页眉/页脚和每一页作为单独部署的应用程序的内容。这使得团队在页面上作为独立的项目。一队想尝试一下和我们新的一个网页使用2角为他们的新的应用程序。的
这问题本身可以提高其他questions.It千一点也不容易使完全回答这个问题，因为你所谈论的两个主要基于MVC架构（ Angular1和Angular2）在一起。
请参阅如何angular1中使用angular2。成功我可以angular1应用程序内引导angular2应用程序。
要知道你是如何实现你的angular1架构是非常重要的。但如果你是angular1和2家伙，你可能会发现你自己的方式。
Angular1应用内Angular2应用
的index.html
＆LT;机身NG-应用=应用程序NG控制器=AppController的＆GT;
＆LT;报头GT; {{} myvalue的}＆LT; /头＆GT; //属于angular1 ＆LT; DIV NG-非绑定＆GT;
＆LT;我的应用＆GT;＆LT; /我的应用＆GT; ＆LT;！ - 角2应用引导 - ＆GT;
＆LT; / DIV＆GT; ＆LT;页脚和GT; 1角的东西＆LT; /页脚＆GT; ＆LT;脚本＆GT;
VAR应用= angular.module（应用程序，[]）; app.controller（AppController的功能（$范围）{
$ scope.myValue =Nyks;
}）
＆LT; / SCRIPT＆GT;
Note: I am NOT upgrading an ng1 app. I'm trying to get an ng1 and ng2 app to live side-by-side (or rather nested).
We have roughly the following html showing how we are trying to use two frameworks on the page at once:
- Angular 1: The whole page is controlled by Angular 1. But we have used ng-non-bindable to tell the ng1 application to ignore the div in the middle of the page.
- Angular 2: Just the element in the middle of the page should be bootstrapped as 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>
Our app works just fine when we run it on its own without trying to integrate into this ng1 application page.
When we run it after integration however, we are getting an error saying there is a conflict with the global require method.
- The ng1 application is using
requirejs - The ng2 bundle is the typical output from
webpack(usingtypescript-loader)
Both requirejs and webpack use require but in different contexts.
How can I resolve the conflict?
If you are curious why we do it this way: We are trying to bootstrap a new app on a page that also has an Angular 1 app. Our company has the global header/footer and the content of every page as a separate deployed applications. This allows teams to work on pages as stand-alone projects. One team wants to try and use Angular 2 for their new application on one of our new pages.
This question itself can raise thousand of other questions.It is not at all easy to answer this question so fully because you are talking about two major MVC based architectures(Angular1 and Angular2) together.
See how to use angular2 within angular1. Successfully I can bootstrap angular2 app within angular1 app.
It is extremely important to know how you have implemented your angular1 architecture. But if you are angular1&2 guy, you'd probably find ways on your own.
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>
这篇关于如何嵌入一个角1应用程序内部一个独立的角2的应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
