3

I am using AngularJS 1.6, and have a container on the page (panel) which has a component in it (clock).

Is it possible to embed an Angular 2.0 app inside my AngularJS 1.6 container?

Is this a scenario for ngUpgrade? I would like to avoid having to learn TypeScript just to demonstrate this integration.

Controller.js

'use strict';
var app = angular.module('app', []);

app.directive('clock', function() {
  return {
    restrict: 'E',
    scope: {
      timezone: '@'
    },
    template: '<div>12:00 {{timezone}}</div>'
  };
});

app.directive('panel', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: {
      title: '@'
    },
    template: '<div style="border: 3px solid #000000">' +
      '<div class="alert-box">{{title}}</div>' +
      '</div>'
  };
});

index.html

<html>
<head>
  <meta charset="utf-8">

  <script src="/bower_components/angular/angular.js"></script>
  <script src="js/controller.js"></script>
</head>

<body>

  <div ng-app="app">
    <panel title="Title for container">
      <clock timezone="PST"></clock>
    </panel>
  </div>

</body>
</html>
georgeawg
  • 48,608
  • 13
  • 72
  • 95
bobbyrne01
  • 6,295
  • 19
  • 80
  • 150

2 Answers2

1

Would roll with the ngUpgrade should you need to do this :)! Then you can incrementally introduce it. That's if you want them inside the same "app" - an iframe would embed the Angular app but wouldn't advise it as something to do for production purposes.

Todd Motto
  • 903
  • 6
  • 10
0

You could use an iframe inside an Angular 1 template then local storage to access data between the 2 apps?

Angular 1 template: <iframe src="URLToAngular2App"></iframe>

JonRowley
  • 68
  • 1
  • 7
  • Is using `UpgradeAdapter` an option instead? using an `iframe` and `localStorage` seems messy – bobbyrne01 May 04 '17 at 12:37
  • I guess it depends on how intertwined you want the 2 angular apps? I've not personally had experience with the UpgradeAdapter but I'd probably have a look at an article like: http://blog.rangle.io/upgrade-your-application-to-angular-2-with-ng-upgrade/ – JonRowley May 05 '17 at 06:07