All geek questions in one place

How to embed a standalone Angular 2 application inside an Angular 1 application

Note. I am NOT updating the ng1 application. I am trying to make the ng1 and ng2 application live side by side (or rather nested).

We have something like the following html showing how we are trying to use two structures on a page at once:

  • Angular 1: The whole page is managed by Angular 1. But we used ng-non-bindable to tell the ng1 application to ignore the div in the middle of the page.
  • Angular 2: Only the element in the middle of the page should be loaded 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>
Run codeHide result

Our application works great when we run it ourselves, without trying to integrate into this page of the ng1 application.

, , require.

  • ng1 requirejs
  • ng2 - webpack ( typescript-loader)

requirejs webpack require, .

?

, : , Angular 1. / . . Angular 2 .

+4
1

. , MVC (Angular1 Angular2) .

, angular2 1. angular2 angular1.

, angular1. , , , .

Angular2 Angular1

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>
+2

Source: https://habr.com/ru/post/1624368/

More articles:


All Articles