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

如果您需要这样做，可以使用ngUpgrade滚动:)！然后你可以逐步介绍它。如果你想在同一个“应用程序”中使用它们 - 一个iframe会嵌入Angular应用程序，但不会建议将它作为生产目的。

Answer 2

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

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

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

2 个答案: