Injecting Across Frameworks
AngularJS providers/services can be upgraded and injected into Angular.
Simple AngularJS service:
1
export class A1UpgradeService {
2
data = "Hello from AngularJS service";
3
}
Copied!
Simple Angular component that will have an AngularJS service injected into it:
1
import { Component, Inject } from "@angular/core";
2
import { A1UpgradeService } from "../services/a1-upgrade-service";
3
4
@Component({
5
selector: "a2-using-a1-service",
6
template: `<p>{{ message }}</p>`,
7
})
8
export class A2UsingA1Service {
9
message = "";
10
constructor(@Inject("a1UpgradeService") a1UpgradeService: A1UpgradeService) {
11
this.message = a1UpgradeService.data;
12
}
13
}
Copied!
Attaching everything to AngularJS:
1
import { A2UsingA1Service } from "./components/a2-using-a1-service";
2
import { A1UpgradeService } from "./services/a1-upgrade-service";
3
4
// AngularJS Vendor Import
5
import * as angular from "angular";
6
7
// Import the upgradeAdapter singleton
8
import { upgradeAdapter } from "./upgrade-adapter";
9
10
// Name the application
11
const APPNAME = "angular-upgrade-example";
12
13
// Register classic AngularJS modules
14
angular
15
.module(APPNAME)
16
.directive(
17
"a2UsingA1Service",
18
upgradeAdapter.downgradeNg2Component(A2UsingA1Service)
19
)
20
.service("a1UpgradeService", A1UpgradeService);
Copied!
Angular services can be downgraded and injected into AngularJS. In normal operation, Angular services would be bootstrapped with the application, but because of ng-upgrade being a hybrid mode, this is not the case. The upgrade adapter comes with an addProvider method that must be used in the interim.
Here is a very simple Angular service:
1
import { Injectable } from "@angular/core";
2
3
@Injectable()
4
export class A2DowngradeService {
5
fetchData() {
6
return "some data";
7
}
8
}
Copied!
Since Angular is bootstrapped with the upgrade adapter, there is no place to register Angular services. Fortunately the upgrade adapter's addProvider method can do this:
1
upgradeAdapter.addProvider(Phones);
Copied!
Lastly, AngularJS must be informed about the Angular service:
1
// The service to downgrade
2
import { A2DowngradeService } from "./services/a2-downgrade";
3
4
// AngularJS Vendor Import
5
import * as angular from "angular";
6
7
// Import the upgradeAdapter singleton
8
import { upgradeAdapter } from "./upgrade-adapter";
9
10
// Name the application
11
const APPNAME = "angular-upgrade-example";
12
13
// Register classic AngularJS modules
14
angular
15
.module(APPNAME)
16
.factory(
17
"a2DowngradeService",
18
upgradeAdapter.downgradeNg2Provider(A2DowngradeService)
19
);
Copied!
Using this downgraded service in an AngularJS directive is as simple as:
1
import {A2DowngradeService} from '../services/a2-downgrade';
2
3
export function a1UsingA2ServiceDirective() {
4
return {
5
restrict: 'E',
6
scope: {},
7
bindToController: {},
8
controller: A1UsingA2,
9
controllerAs: 'a1UsingA2',
10
template: `<span>{{ a1UsingA2.message }}</span>`
11
};
12
}
13
14
class A1UsingA2 {
15
message: string;
16
constructor(private a2DowngradeService: A2DowngradeService) {
17
this.message = this.a2DowngradeService.fetchData();
18
}
19
}
Copied!
Last modified 5mo ago
Copy link