Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 17443c0

Browse files
author
Sam Graber
authored
Merge pull request #374 from SamGraber/ng-upgrade
UpgradeModule
2 parents 70632de + 2d3694e commit 17443c0

21 files changed

+355
-182
lines changed

‎bootstrapper/app.ng2.ts

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import { Component } from '@angular/core';
2-
import { Router } from '@angular/router';
32

43
@Component({
54
selector: 'ts-app',
65
template: require('./app.html'),
76
})
8-
export class App {
9-
constructor(router: Router) {
10-
router['initialNavigation']();
11-
}
12-
}
7+
export class App {}

‎bootstrapper/app.routing.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import { WelcomeComponent } from './welcome.component'
55
import { InputsRootComponent } from './inputs/inputRoot';
66
import { InputsNg1BootstrapperComponent } from './inputs/inputBootstrapper';
77
import { InputsBootstrapper } from './inputs/inputsNg2Bootstrapper';
8-
import { ButtonsNg1BootstrapperComponent, ButtonsNg2BootstrapperComponent } from './buttons/buttonBootstrapper';
8+
import { ButtonsNg1BootstrapperComponent } from './buttons/buttonBootstrapper';
9+
import { ButtonsNg2BootstrapperComponent } from './buttons/buttonsNg2Bootstrapper';
910
import { ButtonsRootComponent } from './buttons/buttonRoot';
1011
import { PopupRootComponent } from './popup/popupRoot';
1112
import { PopupNg1BootstrapperComponent } from './popup/popupBootstrapper';

‎bootstrapper/app.ts

Lines changed: 29 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import * as angular from 'angular';
44

55
import { NgModule, forwardRef, ApplicationRef } from '@angular/core';
66
import { BrowserModule } from '@angular/platform-browser';
7-
import { UpgradeAdapter } from '@angular/upgrade';
7+
import { UpgradeModule, downgradeComponent } from '@angular/upgrade/static';
88

99
import { downgrade as utilitiesDowngrade, UtilitiesModule } from 'typescript-angular-utilities';
1010

@@ -23,39 +23,36 @@ import { moduleName as textModuleName } from './text/text';
2323

2424
import { WelcomeComponent } from './welcome.component';
2525
import { InputsRootComponent } from './inputs/inputRoot';
26-
import { InputsNg1BootstrapperComponent } from './inputs/inputBootstrapper';
26+
import { InputsNg1BootstrapperComponent, InputsNg1Directive } from './inputs/inputBootstrapper';
2727
import { InputsBootstrapper } from './inputs/inputsNg2Bootstrapper';
28-
import { ButtonsNg1BootstrapperComponent, ButtonsNg2BootstrapperComponent } from './buttons/buttonBootstrapper';
28+
import { ButtonsNg1BootstrapperComponent, ButtonsNg1Directive } from './buttons/buttonBootstrapper';
29+
import { ButtonsNg2BootstrapperComponent } from './buttons/buttonsNg2Bootstrapper';
2930
import { ButtonsRootComponent } from './buttons/buttonRoot';
3031
import { PopupRootComponent } from './popup/popupRoot';
31-
import { PopupNg1BootstrapperComponent } from './popup/popupBootstrapper';
32+
import { PopupNg1BootstrapperComponent, PopupNg1Directive } from './popup/popupBootstrapper';
3233
import { PopupBootstrapper } from './popup/popupNg2Bootstrapper';
3334
import { CardsRootComponent } from './cards/cardRoot';
34-
import { CardsNg1BootstrapperComponent } from './cards/cardContainerBootstrapper';
35+
import { CardsNg1BootstrapperComponent, CardsNg1Directive } from './cards/cardContainerBootstrapper';
3536
import { CardsBootstrapper } from './cards/cardsNg2Bootstrapper';
3637
import { CardsSmartDataBootstrapper } from './cards/cardsSmartDataBootstrapper';
3738
import { TabsRootComponent } from './tabs/tabRoot';
38-
import { TabsNg1BootstrapperComponent } from './tabs/tabsBootstrapper';
39+
import { TabsNg1BootstrapperComponent, TabsNg1Directive } from './tabs/tabsBootstrapper';
3940
import { TabsBootstrapper } from './tabs/tabsNg2Bootstrapper';
4041
import { MsiBootstrapperComponent } from './msi/msiBootstrapper.ng2';
4142
import { FormsRootComponent } from './forms/formsRoot';
42-
import { FormsNg1BootstrapperComponent } from './forms/formsBootstrapper';
43+
import { FormsNg1BootstrapperComponent, FormsNg1Directive } from './forms/formsBootstrapper';
4344
import { FormsBootstrapper } from './forms/formsNg2Bootstrapper';
44-
import { MessageLogNg1BootstrapperComponent } from './messageLog/messageLogBootstrapper';
45+
import { MessageLogNg1BootstrapperComponent, MessageLogNg1Directive } from './messageLog/messageLogBootstrapper';
4546
import { MiscRootComponent } from './misc/miscRoot';
4647
import { MiscNgContextBootstrapper } from './misc/miscNg2Context';
47-
import { MiscNg1BootstrapperComponent, MiscNg2BootstrapperComponent } from './misc/miscBootstrapper';
48+
import { MiscNg1BootstrapperComponent, MiscNg2BootstrapperComponent, MiscNg1Directive, MiscNg2Directive } from './misc/miscBootstrapper';
4849
import { App } from './app.ng2';
4950

5051
import { appRoutingProviders, routing } from './app.routing';
5152

5253
import { ComponentsModule } from'../source/ui.module';
5354

54-
const upgradeAdapter: UpgradeAdapter = new UpgradeAdapter(forwardRef(() => ComponentsBootstrapperModule));
55-
utilitiesDowngrade.downgradeUtilitiesToAngular1(upgradeAdapter);
56-
componentsDowngrade.downgradeComponentsToAngular1(upgradeAdapter);
57-
58-
const moduleName: string = 'bootstrapper-app';
55+
export const moduleName: string = 'bootstrapper-app';
5956

6057
angular.module(moduleName, [
6158
componentsModule,
@@ -71,74 +68,71 @@ angular.module(moduleName, [
7168
miscModuleName,
7269
textModuleName,
7370
])
74-
.directive('tsApp', <any>upgradeAdapter.downgradeNg2Component(App))
75-
.directive('tsMiscNgContext', <any>upgradeAdapter.downgradeNg2Component(MiscNgContextBootstrapper));
71+
.directive('tsMiscNgContext', downgradeComponent({ component: MiscNgContextBootstrapper }));
7672

7773
@NgModule({
7874
imports: [
7975
BrowserModule,
8076
routing,
8177
UtilitiesModule,
8278
ComponentsModule,
79+
UpgradeModule,
8380
],
8481
declarations: [
8582
InputsBootstrapper,
8683
InputsRootComponent,
8784
InputsNg1BootstrapperComponent,
88-
upgradeAdapter.upgradeNg1Component('tsInputsNg1'),
85+
InputsNg1Directive,
8986

9087
ButtonsRootComponent,
9188
ButtonsNg1BootstrapperComponent,
9289
ButtonsNg2BootstrapperComponent,
93-
upgradeAdapter.upgradeNg1Component('tsButtonsNg1'),
94-
upgradeAdapter.upgradeNg1Component('tsButtonsNg2'),
90+
ButtonsNg1Directive,
9591

9692
PopupRootComponent,
9793
PopupNg1BootstrapperComponent,
9894
PopupBootstrapper,
99-
upgradeAdapter.upgradeNg1Component('tsPopupNg1'),
95+
PopupNg1Directive,
10096

10197
CardsRootComponent,
10298
CardsNg1BootstrapperComponent,
10399
CardsBootstrapper,
104100
CardsSmartDataBootstrapper,
105-
upgradeAdapter.upgradeNg1Component('tsCardsNg1'),
101+
CardsNg1Directive,
106102

107103
TabsRootComponent,
108104
TabsNg1BootstrapperComponent,
109105
TabsBootstrapper,
110-
upgradeAdapter.upgradeNg1Component('tsTabsNg1'),
106+
TabsNg1Directive,
111107

112108
MsiBootstrapperComponent,
113109

114110
FormsRootComponent,
115111
FormsNg1BootstrapperComponent,
116112
FormsBootstrapper,
117-
upgradeAdapter.upgradeNg1Component('tsFormsNg1'),
113+
FormsNg1Directive,
118114

119115
MessageLogNg1BootstrapperComponent,
120-
upgradeAdapter.upgradeNg1Component('tsMessageLogNg1'),
116+
MessageLogNg1Directive,
121117

122118
MiscRootComponent,
123119
MiscNg1BootstrapperComponent,
124120
MiscNg2BootstrapperComponent,
125121
MiscNgContextBootstrapper,
126-
upgradeAdapter.upgradeNg1Component('tsMiscNg1'),
127-
upgradeAdapter.upgradeNg1Component('tsMiscNg2'),
122+
MiscNg1Directive,
123+
MiscNg2Directive,
128124

129125
WelcomeComponent,
130126
App,
131127
],
128+
bootstrap: [App],
129+
entryComponents: [MiscNgContextBootstrapper],
132130
providers: [
133131
{
134-
provide: ApplicationRef,
135-
useValue: {
136-
componentTypes: [App],
137-
registerDisposeListener: () => {},
138-
},
139-
},
132+
provide: '$scope',
133+
useFactory: injector => injector.get('$rootScope'),
134+
deps: ['$injector']
135+
}
140136
],
141137
})
142-
class ComponentsBootstrapperModule {}
143-
144-
upgradeAdapter.bootstrap(document.body, [moduleName], { strictDI: true });
138+
export class ComponentsBootstrapperModule {}

‎bootstrapper/buttons/buttonBootstrapper.ts

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Component } from '@angular/core';
1+
import { Component, Directive, ElementRef, Injector } from '@angular/core';
2+
import { UpgradeComponent } from '@angular/upgrade/static';
23
import * as angular from 'angular';
34

45
export const moduleName: string = 'ButtonTestModule';
@@ -21,26 +22,24 @@ class ButtonTestController {
2122
}
2223

2324
@Component({
24-
selector: 'tsButtonsNg1',
25-
template: '<ts-buttons-ng1></ts-buttons-ng1>'
25+
selector: 'tsButtonsNg1Bootstrapper',
26+
template: '<tsButtonsNg1></tsButtonsNg1>'
2627
})
2728
export class ButtonsNg1BootstrapperComponent { }
2829

29-
@Component({
30-
selector: 'tsButtonsNg2',
31-
template: '<ts-buttons-ng2></ts-buttons-ng2>'
30+
@Directive({
31+
selector: 'tsButtonsNg1'
3232
})
33-
export class ButtonsNg2BootstrapperComponent {}
33+
export class ButtonsNg1Directive extends UpgradeComponent {
34+
constructor(elementRef: ElementRef, injector: Injector) {
35+
super('tsButtonsNg1', elementRef, injector);
36+
}
37+
}
3438

3539
angular.module(moduleName, [])
3640
.component('tsButtonsNg1', {
3741
template: require('./buttonsNg1.html'),
3842
controller: 'ButtonTestController',
3943
controllerAs: 'button',
4044
})
41-
.component('tsButtonsNg2', {
42-
template: require('./buttonsNg2.html'),
43-
controller: 'ButtonTestController',
44-
controllerAs: 'button',
45-
})
4645
.controller('ButtonTestController', ButtonTestController);

‎bootstrapper/buttons/buttonsNg2.html

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,37 @@ <h3><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/mas
22
<div>
33
<h4><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/master/source/components/button/button.md">rlButton</a>:</h4>
44
</div>
5-
<div><rl-button-ng (trigger)="button.action('Simple button')">Simple button</rl-button-ng></div>
6-
<div><rl-button-ng type="primary flat" size="lg" (trigger)="button.action('Large primary button')">Large primary button</rl-button-ng></div>
7-
<div><rl-button-ng disabled="true" (trigger)="button.action('Disabled button')">Disabled button</rl-button-ng></div>
5+
<div><rlButton (trigger)="action('Simple button')">Simple button</rlButton></div>
6+
<div><rlButton type="primary flat" size="lg" (trigger)="action('Large primary button')">Large primary button</rlButton></div>
7+
<div><rlButton [disabled]="true" (trigger)="action('Disabled button')">Disabled button</rlButton></div>
88
<div>
99
<h4><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/master/source/components/buttonAsync/buttonAsync.md">rlButtonAsync</a>:</h4>
1010
</div>
11-
<div><rl-button-async-ng [action]="button.waitCallback">Async button</rl-button-async-ng></div>
12-
<div><rl-button-async-ng right-aligned="true" [action]="button.waitCallback">Right aligned async button</rl-button-async-ng></div>
13-
<div><rl-button-async-ng type="primary flat" size="lg" [action]="button.waitCallback">Large primary async button</rl-button-async-ng></div>
14-
<div><rl-button-async-ng disabled="true" [action]="button.waitCallback">Disabled async button</rl-button-async-ng></div>
11+
<div><rlButtonAsync [action]="waitCallback">Async button</rlButtonAsync></div>
12+
<!--<div><rlButtonAsync [action]="waitCallback">Right aligned async button</rlButtonAsync></div>-->
13+
<div><rlButtonAsync type="primary flat" size="lg" [action]="waitCallback">Large primary async button</rlButtonAsync></div>
14+
<div><rlButtonAsync [disabled]="true" [action]="waitCallback">Disabled async button</rlButtonAsync></div>
1515
<div>
1616
<h4><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/master/source/components/buttonLink/buttonLink.md">rlButtonLink</a>:</h4>
1717
</div>
18-
<div><rl-button-link-ng link="http://google.com">Link button</rl-button-link-ng></div>
19-
<div><rl-button-link-ng type="primary flat" size="lg" link="http://google.com">Large primary link button</rl-button-link-ng></div>
20-
<div><rl-button-link-ng disabled="true" link="http://google.com">Disabled link button</rl-button-link-ng></div>
18+
<div><rlButtonLink link="http://google.com">Link button</rlButtonLink></div>
19+
<div><rlButtonLink type="primary flat" size="lg" link="http://google.com">Large primary link button</rlButtonLink></div>
20+
<div><rlButtonLink [disabled]="true" link="http://google.com">Disabled link button</rlButtonLink></div>
2121
<div>
2222
<h4>rlButtonRoute:</h4>
2323
</div>
24-
<div><rl-button-route-ng link="/misc/ng2">Route link button</rl-button-route-ng></div>
25-
<div><rl-button-route-ng link="/buttons/ng2" active-class="btn-danger">Active route link button</rl-button-route-ng></div>
24+
<div><rlButtonRoute link="/misc/ng2">Route link button</rlButtonRoute></div>
25+
<div><rlButtonRoute link="/buttons/ng2" activeClass="btn-danger">Active route link button</rlButtonRoute></div>
2626
<div>
2727
<h4><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/master/source/components/buttonLongClick/buttonLongClick.md">rlButtonLongClick</a>:</h4>
2828
</div>
29-
<div><rl-button-long-click-ng [action]="button.waitCallback">Long click button</rl-button-long-click-ng></div>
30-
<div><rl-button-long-click-ng right-aligned="true" [action]="button.waitCallback">Right aligned long click button</rl-button-long-click-ng></div>
31-
<div><rl-button-long-click-ng type="primary flat" size="lg" [action]="button.waitCallback">Large primary long click button</rl-button-long-click-ng></div>
32-
<div><rl-button-long-click-ng disabled="true" [action]="button.waitCallback">Disabled long click button</rl-button-long-click-ng></div>
29+
<div><rlButtonLongClick [action]="waitCallback">Long click button</rlButtonLongClick></div>
30+
<!--<div><rlButtonLongClick [action]="waitCallback">Right aligned long click button</rlButtonLongClick></div>-->
31+
<div><rlButtonLongClick type="primary flat" size="lg" [action]="waitCallback">Large primary long click button</rlButtonLongClick></div>
32+
<div><rlButtonLongClick [disabled]="true" [action]="waitCallback">Disabled long click button</rlButtonLongClick></div>
3333
<div>
3434
<h4><a href="https://github.com/SamGraber/TypeScript-Angular-Components/tree/master/source/components/buttonToggle/buttonToggle.md">rlButtonToggle</a>:</h4>
3535
</div>
36-
<div><rl-button-toggle-ng (change)="button.action('Toggle button: ' + $event)">Toggle button</rl-button-toggle-ng></div>
37-
<div><rl-button-toggle-ng type="primary flat" size="lg" (change)="button.action('Large toggle button: ' + $event)">Large primary toggle button</rl-button-toggle-ng></div>
38-
<div><rl-button-toggle-ng disabled="true" (change)="button.action('Disabled toggle button: ' + $event)">Disabled toggle button</rl-button-toggle-ng></div>
36+
<div><rlButtonToggle (valueChange)="action('Toggle button: ' + $event)">Toggle button</rlButtonToggle></div>
37+
<div><rlButtonToggle type="primary flat" size="lg" (valueChange)="action('Large toggle button: ' + $event)">Large primary toggle button</rlButtonToggle></div>
38+
<div><rlButtonToggle [disabled]="true" (valueChange)="action('Disabled toggle button: ' + $event)">Disabled toggle button</rlButtonToggle></div>

‎bootstrapper/buttons/buttonsNg2Bootstrapper.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Component } from '@angular/core';
2+
import { Observable } from 'rxjs';
3+
4+
@Component({
5+
selector: 'tsButtonsBootstrapper',
6+
template: require('./buttonsNg2.html'),
7+
})
8+
export class ButtonsNg2BootstrapperComponent {
9+
waitCallback: { (): Observable<void> } = () => {
10+
return this.wait(this.action, 'Async button');
11+
}
12+
13+
action(name: string): void {
14+
console.log('Action: ' + name);
15+
}
16+
17+
wait(callback, name): Observable<void> {
18+
return Observable.of(null).do(() => callback(name)).delay(1000);
19+
}
20+
}

‎bootstrapper/cards/cardContainerBootstrapper.ts

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
import { Component } from '@angular/core';
1+
import { Component, Directive, ElementRef, Injector } from '@angular/core';
2+
import { UpgradeComponent } from '@angular/upgrade/static';
23
import * as angular from 'angular';
34
import * as _ from 'lodash';
45
import * as moment from 'moment';
56

7+
import { services } from 'typescript-angular-utilities';
8+
import __timezone = services.timezone;
9+
610
import { ICardContainerBuilderOld } from '../../source/components/cardContainer/builder/index';
711
import { IDataSourceOld } from '../../source/components/cardContainer/dataSources/index';
812
import { ISelectFilterOld, IDateFilterOld, } from '../../source/components/cardContainer/filters/index';
@@ -28,6 +32,8 @@ class CardTestController {
2832

2933
static $inject: string[] = [cardContainerBuilderServiceName];
3034
constructor(cardContainerBuilderFactory: any) {
35+
__timezone.timezoneService.setCurrentTimezone('-08:00');
36+
3137
const items: ICardItem[] = _.map(_.range(1, 101), (num: number): ICardItem => {
3238
const value = Math.floor(Math.random() * 2) + 1;
3339
return {
@@ -130,11 +136,20 @@ class CardTestController {
130136
}
131137

132138
@Component({
133-
selector: 'tsCardsNg1',
134-
template: '<ts-cards-ng1></ts-cards-ng1>'
139+
selector: 'tsCardsNg1Bootstrapper',
140+
template: '<tsCardsNg1></tsCardsNg1>'
135141
})
136142
export class CardsNg1BootstrapperComponent { }
137143

144+
@Directive({
145+
selector: 'tsCardsNg1'
146+
})
147+
export class CardsNg1Directive extends UpgradeComponent {
148+
constructor(elementRef: ElementRef, injector: Injector) {
149+
super('tsCardsNg1', elementRef, injector);
150+
}
151+
}
152+
138153
angular.module(moduleName, [])
139154
.component('tsCardsNg1', {
140155
template: require('./cardsNg1.html'),

‎bootstrapper/forms/formsBootstrapper.ts

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Component } from '@angular/core';
1+
import { Component, Directive, ElementRef, Injector } from '@angular/core';
2+
import { UpgradeComponent } from '@angular/upgrade/static';
23
import * as angular from 'angular';
34

45
import { services } from 'typescript-angular-utilities';
@@ -32,11 +33,20 @@ class FormTestController {
3233
}
3334

3435
@Component({
35-
selector: 'tsFormsNg1',
36-
template: '<ts-forms-ng1></ts-forms-ng1>'
36+
selector: 'tsFormsNg1Bootstrapper',
37+
template: '<tsFormsNg1></tsFormsNg1>'
3738
})
3839
export class FormsNg1BootstrapperComponent { }
3940

41+
@Directive({
42+
selector: 'tsFormsNg1'
43+
})
44+
export class FormsNg1Directive extends UpgradeComponent {
45+
constructor(elementRef: ElementRef, injector: Injector) {
46+
super('tsFormsNg1', elementRef, injector);
47+
}
48+
}
49+
4050
angular.module(moduleName, [])
4151
.component('tsFormsNg1', {
4252
template: require('./formsNg1.html'),

0 commit comments

Comments
 (0)