在 Angular 1.6 容器中创建 Angular 2 应用程序

Question

我正在使用 AngularJS 1.6，页面上有一个容器 (panel)，其中有一个组件 (clock)。

是否可以在我的 AngularJS 1.6 容器中嵌入 Angular 2.0 应用程序？

这是 ngUpgrade 的场景吗？我想避免为了演示这种集成而必须学习 TypeScript。

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>

Answer 1

您可以在 Angular 1 模板中使用 iframe，然后使用本地存储来访问这两个应用程序之间的数据吗？

Angular 1 个模板： <iframe src="URLToAngular2App"></iframe>

Answer 2

如果您需要这样做，我会与 ngUpgrade 一起滚动:)！然后你可以逐步引入它。那就是如果你想让它们在同一个 "app" 中 - iframe 会嵌入 Angular 应用程序，但不会建议将其作为用于生产目的的东西。

在 Angular 1.6 容器中创建 Angular 2 应用程序

Creating an Angular 2 app inside an Angular 1.6 container

javascript

angularjs

angularjs-1.6