To make an AngularJS (1.x) application more compatible with Angular (2+), follow these best practices:
1. Use Component-Based Architecture 🏗
Angular relies heavily on components instead of controllers. Convert AngularJS directives and controllers into components using .component().
Before: Using Controller & Template
angular.module('myApp').controller('MainCtrl', function($scope) {
$scope.message = "Hello from Controller!";
});
<div ng-controller="MainCtrl">
{{ message }}
</div>
After: Convert to Component
angular.module('myApp').component('mainComponent', {
template: `<div>{{$ctrl.message}}</div>`,
controller: function() {
this.message = "Hello from Component!";
}
});
Why? Angular 2+ is fully component-driven, making migration smoother.
2. Use controllerAs Syntax Instead of $scope 🔄
Angular uses class-based components, so replace $scope with controllerAs.
Before: Using $scope
angular.module('myApp').controller('ExampleCtrl', function($scope) {
$scope.name = "AngularJS";
});
<div ng-controller="ExampleCtrl">
{{ name }}
</div>
After: Use controllerAs
angular.module('myApp').controller('ExampleCtrl', function() {
this.name = "AngularJS";
});
<div ng-controller="ExampleCtrl as example">
{{ example.name }}
</div>
Why? controllerAs follows a more Angular-like structure (class-based components).
3. Replace $watch, $digest, and $apply with One-Way Binding (::)
Avoid unnecessary digest cycles by using one-time binding (::) for static data.
Before: Using $watch
$scope.$watch('name', function(newVal, oldVal) {
console.log("Name changed:", newVal);
});
After: One-Time Binding (::)
htmlCopyEdit<h1>{{ ::name }}</h1>
Why? Improves performance by reducing digest cycles.
4. Migrate to $onInit Instead of Using Constructor Logic 🔄
Instead of initializing logic in the constructor, use $onInit (similar to ngOnInit in Angular).
Before: Constructor Initialization
angular.module('myApp').component('exampleComponent', {
template: '<h1>{{ $ctrl.message }}</h1>',
controller: function() {
this.message = "Hello from Constructor!";
}
});
After: Use $onInit
angular.module('myApp').component('exampleComponent', {
template: '<h1>{{ $ctrl.message }}</h1>',
controller: function() {
this.$onInit = function() {
this.message = "Hello from $onInit!";
};
}
});
Why? $onInit ensures proper lifecycle management like Angular’s ngOnInit().
5. Migrate Services to Angular-Style Class Services 🛠
Convert AngularJS factory/services into ES6 classes for easier migration.
Before: AngularJS Service
angular.module('myApp').service('exampleService', function() {
this.getMessage = function() {
return "Hello from AngularJS Service!";
};
});
After: Convert to Class-Based Service
class ExampleService {
getMessage() {
return "Hello from AngularJS Service!";
}
}
angular.module('myApp').service('exampleService', ExampleService);
Why? Angular services use TypeScript classes, making migration seamless.
6. Replace $http with $httpClient for API Calls
Use Promises (then) instead of callbacks.
Before: Using $http
angular.module('myApp').service('apiService', function($http) {
this.getData = function() {
return $http.get('/api/data').then(response => response.data);
};
});
After: Use Angular-Like Promise Handling
angular.module('myApp').service('apiService', function($http) {
this.getData = () => $http.get('/api/data').then(({ data }) => data);
});
Why? Angular uses HttpClient with Observables, so adapting then makes it easier to switch later.
7. Use ng-if Instead of ng-show/ng-hide for Performance
ng-if removes elements from the DOM, improving performance.
Before: Using ng-show
<div ng-show="isVisible">This is visible</div>
After: Use ng-if
<div ng-if="isVisible">This is visible</div>
Why? Reduces DOM load, improving page performance.
8. Use Track By in ng-repeat for Better Performance
Before: Without track by
<li ng-repeat="item in items">{{ item.name }}</li>
After: Use track by
<li ng-repeat="item in items track by item.id">{{ item.name }}</li>
Why? Reduces re-rendering by keeping track of unique IDs.
9. Stop Using jQuery in AngularJS
AngularJS has built-in DOM manipulation (ng-class, ng-style). Remove jQuery dependencies.
Before: Using jQuery
$('#myElement').hide();
After: Use AngularJS
<div ng-if="isVisible">Visible content</div>
Why? Angular handles DOM natively—no need for jQuery.
10. Prepare for Migration to Angular (ngUpgrade)
To prepare for Angular migration, include @angular/upgrade.
npm install @angular/upgrade --save
Modify main.ts to bootstrap both AngularJS & Angular together.
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import * as angular from 'angular';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['myAngularJSApp'], { strictDi: true });
});
Why? This enables hybrid AngularJS + Angular apps, making migration smoother.