如何嵌入一个角1应用程序内部一个独立的角2的应用

更新时间：2023-10-15 23:16:16

这问题本身可以提高其他questions.It千一点也不容易使完全回答这个问题，因为你所谈论的两个主要基于MVC架构（ Angular1和Angular2）在一起。

请参阅如何angular1中使用angular2。成功我可以angular1应用程序内引导angular2应用程序。

要知道你是如何实现你的angular1架构是非常重要的。但如果你是angular1和2家伙，你可能会发现你自己的方式。

的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 (using typescript-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>

上一篇 : ：反应原生iOS应用程序部署后不显示静态资源（图像）下一篇 : Jetsam杀死了iOS上的WebGL应用程序

如何嵌入一个角1应用程序内部一个独立的角2的应用

相关阅读

推荐文章