Roadmap › 4. Frontend › Step 47

AngularJS (1.x) — Legacy

Modules, controllers, $scope, two-way data binding, directives, filters, services/factories/providers, dependency injection, digest cycle, routing, $http and promises, custom directives, components, performance and migration to Angular.

What it is & where it is used

AngularJS (Angular 1.x) is the original JavaScript MVC/MVVM framework from Google (2010) that popularised two-way data binding, directives and dependency injection in the browser.

Important fact: AngularJS reached end of life on 31 December 2021 — Google no longer provides updates or security fixes. It is different from Angular (2+), a complete TypeScript rewrite. Interviews ask about AngularJS when a company maintains or is migrating a legacy app.

Core building blocks:

Concept	Purpose
Module (`angular.module`)	Container for app parts and dependencies
Controller	Sets up `$scope` state and behaviour for a view
$scope	The model object that binds controller and view
Directives	Extend HTML: `ng-model`, `ng-repeat`, `ng-if`, custom directives
Expressions / interpolation	`{{ order.total
Filters	Format/transform data in views
Services (service, factory, provider, value, constant)	Shared logic and data (singletons)
Dependency injection	Injector supplies `$http`, `$scope`, custom services
Routing (`ngRoute` or UI-Router)	SPA views by URL
Digest cycle	Change detection by dirty checking watchers

Versions & history

Version	Year	Notes
0.9 / 1.0	2010 / 2012	Created by Miško Hevery and Adam Abrons; 1.0 released June 2012
1.2	2013	`ngAnimate`, controller-as syntax, `$sce` strict contextual escaping
1.3	2014	One-time binding `::`, dropped IE8, `ngMessages`, performance
1.4	2015	New router attempts, `ngCookies` rewrite
1.5	2016	`.component()` API, one-way bindings `<`, lifecycle hooks (`$onInit`, `$onChanges`, `$onDestroy`) — eases migration to Angular
1.6	2016	`$http` success/error removed, hash prefix `#!` default, pre-assigned bindings off
1.7	2018	Long Term Support period started (July 2018)
1.8.x	2020–2022	Final versions (1.8.3); end of LTS: 31 December 2021

After EOL, commercial extended support exists from third parties (e.g. HeroDevs "Never-Ending Support").

Lifecycle

Application bootstrap lifecycle:

Browser loads angular.js, then app scripts.
On DOMContentLoaded, AngularJS finds ng-app (or you call angular.bootstrap(element, ["app"])).
The injector is created; module config blocks run (providers only), then run blocks.
Compile phase — $compile walks the DOM, collects directives, runs their compile functions (template manipulation).
Link phase — each directive's link function (pre-link and post-link) connects scope to DOM and sets up $watches and event listeners.
Runtime — events (ng-click, $http response, $timeout) trigger $scope.$apply() → $digest loop: all watchers are dirty-checked repeatedly until no values change (max 10 iterations, otherwise infdig error) → DOM updated.
Destroy — when a scope is removed (route change, ng-if false), $destroy event fires; clean up listeners/timers.

Component lifecycle hooks (1.5+): $onInit → $onChanges(changesObj) (one-way binding changes) → $doCheck → $postLink → $onDestroy.

Tools used to develop

angular.js / angular.min.js (CDN or npm angular), modules angular-route, angular-animate, angular-messages, angular-sanitize.
UI-Router (@uirouter/angularjs) — state-based routing (more popular than ngRoute).
Batarang (old Chrome extension) and browser DevTools (angular.element($0).scope() in the console).
Karma (test runner) + Jasmine + angular-mocks (ngMock, $httpBackend); Protractor for E2E (deprecated in 2022–2023 — use Playwright/Cypress).
Grunt/Gulp/Bower historically; webpack later.
ngUpgrade / @angular/upgrade — run AngularJS and Angular side by side during migration.