2016-11-16 05:33:31 -05:00
|
|
|
|
/**
|
|
|
|
|
* @license
|
|
|
|
|
* Copyright Google Inc. All Rights Reserved.
|
|
|
|
|
*
|
|
|
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
|
|
|
* found in the LICENSE file at https://angular.io/license
|
|
|
|
|
*/
|
|
|
|
|
import {Component, Directive, DoCheck, ElementRef, EventEmitter, Inject, Injectable, Injector, Input, NgModule, OnChanges, OnDestroy, OnInit, Output, SimpleChanges} from '@angular/core';
|
|
|
|
|
import {BrowserModule} from '@angular/platform-browser';
|
|
|
|
|
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
|
|
|
|
|
import {UpgradeComponent, UpgradeModule, downgradeComponent, downgradeInjectable} from '@angular/upgrade/static';
|
|
|
|
|
|
|
|
|
|
interface Hero {
|
|
|
|
|
name: string;
|
|
|
|
|
description: string;
|
|
|
|
|
}
|
|
|
|
|
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// #docregion Angular Stuff
|
2016-11-16 05:33:31 -05:00
|
|
|
|
// #docregion ng2-heroes
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// This Angular component will be "downgraded" to be used in AngularJS
|
2016-11-16 05:33:31 -05:00
|
|
|
|
@Component({
|
|
|
|
|
selector: 'ng2-heroes',
|
|
|
|
|
// This template uses the upgraded `ng1-hero` component
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// Note that because its element is compiled by Angular we must use camelCased attribute names
|
2017-03-13 20:34:53 -04:00
|
|
|
|
template: `<header><ng-content selector="h1"></ng-content></header>
|
|
|
|
|
<ng-content selector=".extra"></ng-content>
|
2016-11-16 05:33:31 -05:00
|
|
|
|
<div *ngFor="let hero of heroes">
|
|
|
|
|
<ng1-hero [hero]="hero" (onRemove)="removeHero.emit(hero)"><strong>Super Hero</strong></ng1-hero>
|
|
|
|
|
</div>
|
|
|
|
|
<button (click)="addHero.emit()">Add Hero</button>`,
|
|
|
|
|
})
|
|
|
|
|
class Ng2HeroesComponent {
|
2018-06-18 19:38:33 -04:00
|
|
|
|
// TODO(issue/24571): remove '!'.
|
|
|
|
|
@Input() heroes !: Hero[];
|
2016-11-16 05:33:31 -05:00
|
|
|
|
@Output() addHero = new EventEmitter();
|
|
|
|
|
@Output() removeHero = new EventEmitter();
|
|
|
|
|
}
|
|
|
|
|
// #enddocregion
|
|
|
|
|
|
|
|
|
|
// #docregion ng2-heroes-service
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// This Angular service will be "downgraded" to be used in AngularJS
|
2016-11-16 05:33:31 -05:00
|
|
|
|
@Injectable()
|
|
|
|
|
class HeroesService {
|
|
|
|
|
heroes: Hero[] = [
|
|
|
|
|
{name: 'superman', description: 'The man of steel'},
|
|
|
|
|
{name: 'wonder woman', description: 'Princess of the Amazons'},
|
|
|
|
|
{name: 'thor', description: 'The hammer-wielding god'}
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
// #docregion use-ng1-upgraded-service
|
|
|
|
|
constructor(@Inject('titleCase') titleCase: (v: string) => string) {
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// Change all the hero names to title case, using the "upgraded" AngularJS service
|
2016-11-16 05:33:31 -05:00
|
|
|
|
this.heroes.forEach((hero: Hero) => hero.name = titleCase(hero.name));
|
|
|
|
|
}
|
|
|
|
|
// #enddocregion
|
|
|
|
|
|
|
|
|
|
addHero() {
|
|
|
|
|
this.heroes =
|
|
|
|
|
this.heroes.concat([{name: 'Kamala Khan', description: 'Epic shape-shifting healer'}]);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
removeHero(hero: Hero) { this.heroes = this.heroes.filter((item: Hero) => item !== hero); }
|
|
|
|
|
}
|
|
|
|
|
// #enddocregion
|
|
|
|
|
|
|
|
|
|
// #docregion ng1-hero-wrapper
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// This Angular directive will act as an interface to the "upgraded" AngularJS component
|
2016-11-16 05:33:31 -05:00
|
|
|
|
@Directive({selector: 'ng1-hero'})
|
|
|
|
|
class Ng1HeroComponentWrapper extends UpgradeComponent implements OnInit, OnChanges, DoCheck,
|
|
|
|
|
OnDestroy {
|
|
|
|
|
// The names of the input and output properties here must match the names of the
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// `<` and `&` bindings in the AngularJS component that is being wrapped
|
2018-06-18 19:38:33 -04:00
|
|
|
|
// TODO(issue/24571): remove '!'.
|
|
|
|
|
@Input() hero !: Hero;
|
|
|
|
|
// TODO(issue/24571): remove '!'.
|
|
|
|
|
@Output() onRemove !: EventEmitter<void>;
|
2016-11-16 05:33:31 -05:00
|
|
|
|
constructor(@Inject(ElementRef) elementRef: ElementRef, @Inject(Injector) injector: Injector) {
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// We must pass the name of the directive as used by AngularJS to the super
|
2016-11-16 05:33:31 -05:00
|
|
|
|
super('ng1Hero', elementRef, injector);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// For this class to work when compiled with AoT, we must implement these lifecycle hooks
|
|
|
|
|
// because the AoT compiler will not realise that the super class implements them
|
|
|
|
|
ngOnInit() { super.ngOnInit(); }
|
|
|
|
|
|
|
|
|
|
ngOnChanges(changes: SimpleChanges) { super.ngOnChanges(changes); }
|
|
|
|
|
|
|
|
|
|
ngDoCheck() { super.ngDoCheck(); }
|
|
|
|
|
|
|
|
|
|
ngOnDestroy() { super.ngOnDestroy(); }
|
|
|
|
|
}
|
|
|
|
|
// #enddocregion
|
|
|
|
|
|
|
|
|
|
// #docregion ng2-module
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// This NgModule represents the Angular pieces of the application
|
2016-11-16 05:33:31 -05:00
|
|
|
|
@NgModule({
|
|
|
|
|
declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper],
|
|
|
|
|
providers: [
|
|
|
|
|
HeroesService,
|
|
|
|
|
// #docregion upgrade-ng1-service
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// Register an Angular provider whose value is the "upgraded" AngularJS service
|
2016-11-16 05:33:31 -05:00
|
|
|
|
{provide: 'titleCase', useFactory: (i: any) => i.get('titleCase'), deps: ['$injector']}
|
|
|
|
|
// #enddocregion
|
|
|
|
|
],
|
|
|
|
|
// All components that are to be "downgraded" must be declared as `entryComponents`
|
|
|
|
|
entryComponents: [Ng2HeroesComponent],
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// We must import `UpgradeModule` to get access to the AngularJS core services
|
2016-11-16 05:33:31 -05:00
|
|
|
|
imports: [BrowserModule, UpgradeModule]
|
|
|
|
|
})
|
|
|
|
|
class Ng2AppModule {
|
2018-01-30 15:46:38 -05:00
|
|
|
|
ngDoBootstrap() { /* this is a placeholder to stop the bootstrapper from complaining */
|
2016-11-16 05:33:31 -05:00
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
// #enddocregion
|
|
|
|
|
// #enddocregion
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// #docregion Angular 1 Stuff
|
|
|
|
|
// #docregion ng1-module
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// This Angular 1 module represents the AngularJS pieces of the application
|
2017-01-24 12:05:34 -05:00
|
|
|
|
declare var angular: ng.IAngularStatic;
|
2016-11-16 05:33:31 -05:00
|
|
|
|
const ng1AppModule = angular.module('ng1AppModule', []);
|
|
|
|
|
// #enddocregion
|
|
|
|
|
|
|
|
|
|
// #docregion ng1-hero
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// This AngularJS component will be "upgraded" to be used in Angular
|
2016-11-16 05:33:31 -05:00
|
|
|
|
ng1AppModule.component('ng1Hero', {
|
|
|
|
|
bindings: {hero: '<', onRemove: '&'},
|
|
|
|
|
transclude: true,
|
|
|
|
|
template: `<div class="title" ng-transclude></div>
|
|
|
|
|
<h2>{{ $ctrl.hero.name }}</h2>
|
|
|
|
|
<p>{{ $ctrl.hero.description }}</p>
|
|
|
|
|
<button ng-click="$ctrl.onRemove()">Remove</button>`
|
|
|
|
|
});
|
|
|
|
|
// #enddocregion
|
|
|
|
|
|
|
|
|
|
// #docregion ng1-title-case-service
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// This AngularJS service will be "upgraded" to be used in Angular
|
2016-11-16 05:33:31 -05:00
|
|
|
|
ng1AppModule.factory(
|
|
|
|
|
'titleCase',
|
2017-11-15 11:43:35 -05:00
|
|
|
|
(() => (value: string) => value.replace(/((^|\s)[a-z])/g, (_, c) => c.toUpperCase())) as any);
|
2016-11-16 05:33:31 -05:00
|
|
|
|
// #enddocregion
|
|
|
|
|
|
|
|
|
|
// #docregion downgrade-ng2-heroes-service
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// Register an AngularJS service, whose value is the "downgraded" Angular injectable.
|
2017-09-08 21:40:32 -04:00
|
|
|
|
ng1AppModule.factory('heroesService', downgradeInjectable(HeroesService) as any);
|
2016-11-16 05:33:31 -05:00
|
|
|
|
// #enddocregion
|
|
|
|
|
|
|
|
|
|
// #docregion ng2-heroes-wrapper
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// This is directive will act as the interface to the "downgraded" Angular component
|
2017-03-14 17:55:37 -04:00
|
|
|
|
ng1AppModule.directive('ng2Heroes', downgradeComponent({component: Ng2HeroesComponent}));
|
2016-11-16 05:33:31 -05:00
|
|
|
|
// #enddocregion
|
|
|
|
|
|
|
|
|
|
// #docregion example-app
|
|
|
|
|
// This is our top level application component
|
|
|
|
|
ng1AppModule.component('exampleApp', {
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// We inject the "downgraded" HeroesService into this AngularJS component
|
|
|
|
|
// (We don't need the `HeroesService` type for AngularJS DI - it just helps with TypeScript
|
2016-11-16 05:33:31 -05:00
|
|
|
|
// compilation)
|
2017-11-15 11:43:35 -05:00
|
|
|
|
controller:
|
|
|
|
|
[
|
|
|
|
|
'heroesService',
|
|
|
|
|
function(heroesService: HeroesService) { this.heroesService = heroesService; }
|
|
|
|
|
],
|
|
|
|
|
// This template make use of the downgraded `ng2-heroes` component
|
|
|
|
|
// Note that because its element is compiled by AngularJS we must use kebab-case attributes
|
|
|
|
|
// for inputs and outputs
|
|
|
|
|
template: `<link rel="stylesheet" href="./styles.css">
|
2016-11-16 05:33:31 -05:00
|
|
|
|
<ng2-heroes [heroes]="$ctrl.heroesService.heroes" (add-hero)="$ctrl.heroesService.addHero()" (remove-hero)="$ctrl.heroesService.removeHero($event)">
|
2017-03-13 20:34:53 -04:00
|
|
|
|
<h1>Heroes</h1>
|
|
|
|
|
<p class="extra">There are {{ $ctrl.heroesService.heroes.length }} heroes.</p>
|
2016-11-16 05:33:31 -05:00
|
|
|
|
</ng2-heroes>`
|
2017-11-15 11:43:35 -05:00
|
|
|
|
} as any);
|
2016-11-16 05:33:31 -05:00
|
|
|
|
// #enddocregion
|
|
|
|
|
// #enddocregion
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// #docregion bootstrap
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// First we bootstrap the Angular HybridModule
|
2016-11-16 05:33:31 -05:00
|
|
|
|
// (We are using the dynamic browser platform as this example has not been compiled AoT)
|
|
|
|
|
platformBrowserDynamic().bootstrapModule(Ng2AppModule).then(ref => {
|
2017-01-27 01:30:42 -05:00
|
|
|
|
// Once Angular bootstrap is complete then we bootstrap the AngularJS module
|
2016-11-16 05:33:31 -05:00
|
|
|
|
const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
|
|
|
|
|
upgrade.bootstrap(document.body, [ng1AppModule.name]);
|
|
|
|
|
});
|
|
|
|
|
// #enddocregion
|