In my AngularJS 1.6 project, there is a container called panel which contains a component named clock.
I'm wondering if it's feasible to incorporate an Angular 2.0 application within this AngularJS 1.6 container.
Would utilizing ngUpgrade be the solution here? I prefer not to delve into TypeScript just to showcase 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>