Service integration utilities enable sharing services and dependency injection between Angular and AngularJS applications, allowing gradual migration of business logic.
Make Angular services available to AngularJS applications.
/**
* Creates an AngularJS factory for an Angular service
* @param token - Angular injection token (class, InjectionToken, or string)
* @param downgradedModule - Optional downgraded module name for lazy loading
* @returns AngularJS factory function
*/
function downgradeInjectable(token: any, downgradedModule?: string): Function;Usage Example:
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { downgradeInjectable } from "@angular/upgrade/static";
// Angular service
@Injectable()
export class UserService {
constructor(private http: HttpClient) {}
getUser(id: string): Promise<any> {
return this.http.get(`/api/users/${id}`).toPromise();
}
updateUser(user: any): Promise<any> {
return this.http.put(`/api/users/${user.id}`, user).toPromise();
}
}
// Make available to AngularJS
angular.module("myApp").factory("userService",
downgradeInjectable(UserService)
);AngularJS Usage:
// Inject Angular service in AngularJS controller
angular.module("myApp").controller("UserController", [
"userService",
function(userService) {
const vm = this;
vm.loadUser = function(userId) {
userService.getUser(userId).then(function(user) {
vm.currentUser = user;
});
};
vm.saveUser = function() {
userService.updateUser(vm.currentUser).then(function() {
vm.message = "User saved successfully";
});
};
}
]);Create a lazy-loaded AngularJS module that bootstraps an Angular module on demand.
/**
* Creates an AngularJS module that can bootstrap an Angular module lazily
* @param moduleOrBootstrapFn - Angular module, module factory, or bootstrap function
* @returns AngularJS module name for lazy loading
*/
function downgradeModule<T>(moduleOrBootstrapFn: Type<T>): string;
function downgradeModule<T>(moduleOrBootstrapFn: NgModuleFactory<T>): string;
function downgradeModule<T>(
moduleOrBootstrapFn: Type<T> | NgModuleFactory<T> | ((extraProviders: StaticProvider[]) => Promise<NgModuleRef<T>>)
): string;Usage Example:
import { NgModule, Injectable } from "@angular/core";
import { downgradeModule, downgradeInjectable } from "@angular/upgrade/static";
// Angular services
@Injectable()
export class ReportService {
generateReport(data: any[]): Promise<string> {
// Complex report generation logic
return Promise.resolve("Report generated");
}
}
@Injectable()
export class ChartService {
createChart(element: Element, data: any[]): void {
// Chart rendering logic
}
}
// Feature module
@NgModule({
providers: [ReportService, ChartService]
})
export class ReportsModule {}
// Create lazy-loaded module
const REPORTS_MODULE = downgradeModule(ReportsModule);
// Register services for lazy loading
angular.module("myApp")
.factory("reportService", downgradeInjectable(ReportService, REPORTS_MODULE))
.factory("chartService", downgradeInjectable(ChartService, REPORTS_MODULE));AngularJS Usage with Lazy Loading:
// Services are automatically loaded when first injected
angular.module("myApp").controller("ReportsController", [
"reportService", "chartService",
function(reportService, chartService) {
const vm = this;
vm.generateReport = function() {
// Angular module is bootstrapped on first service access
reportService.generateReport(vm.data).then(function(report) {
vm.report = report;
});
};
}
]);Angular supports various injection token types:
Class Tokens:
@Injectable()
export class ApiService {}
// Use class as token
angular.module("myApp").factory("apiService",
downgradeInjectable(ApiService)
);String Tokens:
const API_BASE_URL = "API_BASE_URL";
// Use string token
angular.module("myApp").factory("apiBaseUrl",
downgradeInjectable(API_BASE_URL)
);InjectionToken:
import { InjectionToken } from "@angular/core";
const CONFIG = new InjectionToken<any>("config");
// Use InjectionToken
angular.module("myApp").factory("config",
downgradeInjectable(CONFIG)
);The dynamic approach includes a method for upgrading AngularJS services (deprecated):
// This approach is deprecated - use Angular services instead
upgradeAdapter.upgradeNg1Provider("$http");
upgradeAdapter.upgradeNg1Provider("myAngularJSService", {
asToken: "MY_SERVICE_TOKEN"
});Recommended Migration Pattern:
Instead of upgrading AngularJS services, create new Angular services that wrap or replace AngularJS functionality:
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
@Injectable()
export class ModernHttpService {
constructor(private http: HttpClient) {}
// Replace AngularJS $http with Angular HttpClient
get(url: string): Promise<any> {
return this.http.get(url).toPromise();
}
post(url: string, data: any): Promise<any> {
return this.http.post(url, data).toPromise();
}
}Services can access dependencies from both frameworks:
import { Injectable, Injector } from "@angular/core";
import { UpgradeModule } from "@angular/upgrade/static";
@Injectable()
export class HybridService {
constructor(
private injector: Injector,
private upgrade: UpgradeModule
) {}
processData(data: any): Promise<any> {
// Access Angular dependency
const http = this.injector.get(HttpClient);
// Access AngularJS dependency
const $q = this.upgrade.$injector.get("$q");
// Use both frameworks' services
return http.post("/api/process", data)
.toPromise()
.then(result => $q.resolve(result));
}
}