AngularJS to Angular reference
Each AngularJS concept and its equivalent in modern Angular, with before and after code. Written for teams migrating real applications.
- ng-repeat→ @for
- ng-if / ng-show / ng-hide→ @if and [hidden]
- ng-model→ forms and two-way binding
- ng-class / ng-style→ class and style bindings
- $scope→ component state with signals
- $watch→ computed, effect and RxJS
- $http→ HttpClient
- $q→ RxJS and async/await
- $rootScope.$broadcast / $on→ shared services
- controllers→ components
- directives→ components and attribute directives
- bindings (<, @, &, =)→ input(), output() and model()
- filters→ pipes
- services, factories and providers→ @Injectable services
- ui-router / ngRoute→ Angular Router
- $stateChangeStart / transition hooks→ route guards
- $timeout / $apply / $digest→ signals and change detection
- ng-transclude→ content projection
- $httpProvider.interceptors→ functional interceptors
- form validation (ng-required, $error)→ reactive forms validators
- ng-switch→ @switch
- ng-options→ @for inside select
- ng-bind-html / $sce→ [innerHTML] and DomSanitizer
- $location→ Router and Location
- $compile→ dynamic components
- ng-include→ components, ng-template and @defer
- ngMessages→ error messages with reactive forms
- one-time binding (::)→ signals and OnPush
- ng-change / ng-blur / ng-keyup→ event bindings
- ng-disabled / ng-readonly / ng-checked→ property and attribute bindings
- ng-src / ng-href / ng-srcset→ property bindings and NgOptimizedImage
- $filter in JavaScript→ format functions and injected pipes
- DI annotations ($inject, array syntax)→ TypeScript DI with inject()
- module.config() / module.run()→ app.config.ts and provideAppInitializer
- constant / value→ InjectionToken and exported constants
- $window / $document→ DOCUMENT token and a window token
- $log→ console or a logging service
- $exceptionHandler→ ErrorHandler
- $templateCache / $cacheFactory→ build-time templates and service caching
- ng-cloak→ not needed
- ng-init→ component class initialization
- ng-form / nested forms→ nested FormGroup and FormArray
- $validators / $asyncValidators→ ValidatorFn and AsyncValidatorFn
- $parsers / $formatters→ ControlValueAccessor
- $provide.decorator→ provider overrides and wrapper services
- ui-sref / ui-sref-active→ routerLink and routerLinkActive
- $state.go→ Router.navigate and navigateByUrl
- $stateParams / $routeParams→ route params as component inputs
- abstract states and nested views→ parent routes with child routes
- named ui-view (multiple views)→ layout components and named outlets
- $urlRouterProvider.otherwise / redirectTo→ wildcard route and redirect functions
- ngRoute ($routeProvider, ng-view)→ Angular Router
- lazy loaded states (ocLazyLoad, future states)→ loadComponent and loadChildren
- $onInit / $onChanges / $onDestroy / $postLink→ lifecycle hooks, signal inputs and DestroyRef
- $scope.$on('$destroy')→ DestroyRef and takeUntilDestroyed
- require (parent controllers)→ injecting the parent component or a shared service
- isolate scope (scope: {})→ component inputs and outputs
- $attrs.$observe→ input() and host bindings
- $scope.$emit→ output() and scoped services
- nested ng-controller and scope inheritance→ component tree with explicit inputs
- ngMock unit tests (module, inject, $controller)→ TestBed and component harnesses
- $httpBackend→ HttpTestingController
- Protractor→ Playwright or Cypress
- $interpolateProvider / $interpolate→ template syntax and computed values
- ng-pluralize→ ICU plural expressions and i18nPlural
- ngTouch (ng-swipe-left / ng-swipe-right)→ pointer events
- $resource .$promise and $resolved→ observables, toSignal and explicit loading state
- $http cache / $cacheFactory→ shareReplay or a small cache service
- jQuery / angular.element in directives→ template bindings, viewChild and Renderer2
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn