How to use Angular services inside an AngularJS app?

When migrating an AngularJS app to Angular, a common challenge is using Angular services inside an AngularJS app. The ngUpgrade library helps integrate Angular services into an AngularJS application, allowing a hybrid approach where Angular and AngularJS can coexist.

1. Understanding `ngUpgrade` for Hybrid Apps

To use an Angular service inside AngularJS, you need:
Upgrading an Angular service so it can be used in AngularJS.
Using Dependency Injection (DI) to inject Angular services into AngularJS components.

🔹 Key Utility from @angular/upgrade/static:

downgradeInjectable() → Allows Angular services to be used in AngularJS.

2. Step-by-Step Implementation

Step 1: Install `@angular/upgrade/static`

Run the following command in your project:

npm install @angular/upgrade --save

Step 2: Create an Angular Service

Create a service in Angular (data.service.ts):

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DataService {
  getData(): string {
    return 'Hello from Angular Service!';
  }
}

Uses Angular’s Dependency Injection (providedIn: 'root').

Step 3: Downgrade Angular Service for AngularJS

Modify app.module.ts (Angular module) to downgrade the Angular service:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule, downgradeInjectable } from '@angular/upgrade/static';
import { DataService } from './data.service';  // Import Angular service
import * as angular from 'angular';

// Define AngularJS module
const angularJsApp = angular.module('myAngularJsApp', []);

// Downgrade the Angular service to be used in AngularJS
angularJsApp.factory('dataService', downgradeInjectable(DataService));

@NgModule({
  imports: [BrowserModule, UpgradeModule],
  providers: [DataService],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap() {
    this.upgrade.bootstrap(document.body, ['myAngularJsApp']);
  }
}

Uses downgradeInjectable(DataService) to make Angular services available in AngularJS.
Registers the downgraded service as dataService in AngularJS.

Step 4: Use the Angular Service in AngularJS

Modify AngularJS Controller (app.js) to inject and use the Angular service:

angular.module('myAngularJsApp')
  .controller('MainController', function($scope, dataService) {
    $scope.message = dataService.getData();
  });

Injects the downgraded Angular service (dataService) into an AngularJS controller.
Calls the getData() method from the Angular service.

Step 5: Use the Angular Service in an AngularJS Component

Modify AngularJS component (app.js) to inject and use the service:

angular.module('myAngularJsApp')
  .component('helloComponent', {
    template: `<h2>{{$ctrl.message}}</h2>`,
    controller: function(dataService) {
      this.message = dataService.getData();
    }
  });

Uses Angular service inside an AngularJS component.
No $scope, making it more modular.

6. Testing the Integration

Now, when you run the AngularJS app, you should see:

Hello from Angular Service!

displayed inside both the AngularJS Controller and Component.

1. Understanding ngUpgrade for Hybrid Apps