Difference between Angular and AngularJS
Overview
AngularJS was launched back on 20 October 2010. It was a popular framework following MVC, MVVM, and MV* patterns to solve front-end problems. The way updates bind on the page automatically was the best part of it. After six years (Sept 2016), the Angular team announces Angular v2. It was a complete rewrite of the old framework. We will look at some of the similarities and differences between Angular and AngularJS.
Don't get confused with AngularJS and Angular terms. Over the years community agreed to the below terminology.
Terminology AngularJS - AngularJS v1.x Angular - Angular v2+
Introduction
AngularJS was a fantastic framework that survived for over a decade (until Dec 31, 2021). After a few years, people started finding it a bit laggy in complex web applications containing more than 5k bindings on the page. AngularJS used the digest cycle to keep UI in sync with model value. Although, it has a few other technical flaws too. To overcome them, the Angular team had to revamp the UI update mechanism, along with addressing a few other issues. Hence they came with an Angular framework. By design, it is super fast, with web components first, keeping up with web standards, etc. The common fact between both frameworks is that they support two-way binding, templating, UI updates, etc. This chapter will focus on comparing the difference between Angular and AngularJS.
Controllers VS Components
We will be differentiating between Controllers and components by looking at the below points
- Syntax
- Usage
- Data Sharing
AngularJS Controllers
An angular controller can be easily related to the controller part of the MVC pattern. It was responsible for driving communication between view and model.
Syntax
Usage
This controller can be attached to view by using ng-controller, custom directive, or from route configuration.
my-template.html
my-directive.js
Datasharing
It can be done by:
- Pass data between directives
- using @, =, <, and & pass value from attributes.
- isolated scope
- Service / Factory / Provider
- $scope.$parent.$parent (access parent $scope, NOT RECOMMENDED)
- Event emission by using $scope.$broadcast and $scope.$emit.
Angular Components
Components are the building blocks of any Angular application. These are the reusable pieces used to break down the application into smaller chunks.
Syntax
Usage
This component can be used on the page in two ways
- Selector
- Dynamic component loading
Selector
Dynamic Component Loading
Datasharing
Data sharing can be done by:
- @Input and @Output property binding
- By using Service instance.
- Access parent component using @Host / injecting component in the constructor.
- Access the child component using @ViewChild.
Components of Angular vs AngularJS
There are various components of Angular and AngularJS, they are quite similar in syntactically different.
AngularJS
- Directive - app.directive('myDir', ...)
- Filter - app.filter('myFilter', ...)
- Service / Provider / Factory - app.servi ce('myService', ...)
- Config - app.config('myDir', ...)
- Constant - app.constant('myConstant', ...)
- Decorator - app.provider('myDirProvider', ...)
- Controller - app.controller('myController', ...)
- Component - app.comonnent('myComponent', ...)
- Value - app.value('myValue', ...)
- angular.module - app.module('myDir', [...])
Angular
- Component - @Component decorator used for defining Component
- Directive - @Directive decorator used for defining Directive
- Pipe - @Pipe decorator used for defining Pipe
- Service - @Injectable decorator used for defining Service
- NgModule - @NgModule decorator used for defining NgModule
- Resolver - @Injectable decorator used for defining Resolver, and implementing the Resolve class
Differences in Template Engine
The template engine of AngularJS and Angular is pretty equivalent, but the mechanism behind the evaluation of bindings and syntax is a bit different. We will compare based on the below points
- Interpolation - Way of reading putting a model value on HTML
- Binding - Passing data between attributes and properties
- Templates - Way of creating HTML view
AngularJS
- Interpolation - AngularJS uses {{}}(double curly braces start and end) for binding variable on HTML
- Property Binding - Uses expression like attr-name="modelValue" for passing data to directives.
- Attribute binding - To change attributes, you can use ng-attr-*(* indicates attribute name)
- Templates
-
Directive template
-
$templateCache - OtherAnotherof defining temple ate using $templateCache service, and use it as templateUrl in directives.
-
text/ng-template- Another way of defindefininglates on HTML as script tag with type=text/ng-template and use using it as a templateUrl.
-
Angular
- Interpolation - Angular also uses {{}} for binding variable on HTML
- Property Binding - It can be used as[property]="modelValue", squared bracket wrapped with property name.
- Attribute Binding - To set DOM attribute you can use [attr.style]="style", it's a combination of property binding [] and inside use attr.* prefix before attribute name.
- Template
- Component template - We can define the template or templateUrl in component
- ng-template - You can define reusable templates using the -template tag, kind of similar to template API of web component.
- Component template - We can define the template or templateUrl in component
Backward Compatibility
As I said when Angular was released, there was no backward compatibility support with AngularJS. As time moved on, things started getting mature. AngularJS and Angular both can be used together with different strategies these days.
- Hybrid mode - You can use AngularJS and Angular together using ngUpgradeModule aka hybrid mode. Afterward, you have to decide on a strategy for migration, and this strategy is completely dependent on the nature of the application. The important thing to note here is,
- Use upgrade methods when using AngularJS code in Angular context like upgradeModule, upgradeComponent, etc.
- Use downgrade methods, when using angular code in AngularJS context like downgradeModule, downgradeComponent, etc.
- Iframe - Another way is to load part of the application using iframe, and communicate between apps using wind the ow.postMessage API.
- Angular elements - Using this API you can convert angular components to web components. And use them with AngularJS as a simple web component.
On other hand, backward compatibility of Angular 2+ versions is seamless.
- Easy upgrades
- Run ng update for upgrade de
- Most breaking changes are automatically covered by CodeMod
Tip - Upgrade the Angular version with each major version. Suppose you're on Angular v10, and keen to migrate to v14. Upgrade 1 major version at each step. Follow update.angular.io for more info.
Use of Directives between Angular vs AngularJS
Topic | AngularJS | Angular |
---|---|---|
selector support | AECM | AEC |
replace selector with template | Can replace selector element with replace: true optiontrueot possible to replace host selector | |
Structural directives | It does not use * before the directive name. For eg. ng-if, ng-repeat | uses * before structural the directive. For eg. *ngFor, *ngIf |
dynamic templateUrl | There was a provision to change templateUrl dynamically | templateUrl can not be modified in runtime |
runtime DOM changes | Runtime DOM can be changed using directive compile phase | No compile phase for raw DOM manipulation |
selector support | AECM | AEC |
Partial views | using ng-include directive | Using ng-template & ngTemplateOutlet |
The Architecture of Angular vs AngularJS
There is a major difference between Angular and AngularJS architecture.
AngularJS
AngularJS follows the traditional MVC (Model View Controller) architecture pattern.
- Model - Can be related to $scope/service, which holds the application state.
- View - HTML template that is responsible to display the view.
- Controller - controller which is attached to view.
When any event occurs, the framework triggers a digest cycle and updates bindings/expressions on the HTML page.
Angular
Angular architecture is a bit different than AngularJS. Refer to the below diagram.
Components are majorly used everywhere in the app. They hold the template and associate the context with its class. If in case any data is required to be shared throughout the application Service can be used. Using Dependency Injection, these service instances are retrieved from the Injector tree. Apart from all this, there is NgModule. It can be considered a Submodule, it holds the components, directives, pipes, services, etc involved in a particular fa functionality. Whoever wants to use these capabilities provided by NgModule then they just have to import it and use it.
Mobile support
AngularJS can be laggy on mobile devices, but Angular was developed keeping mobile in mind. We can talk about Mobile Web and Native Mobile application support for these frameworks
Mobile Web Application
AngularJS
To be honest, we can say it works on the mobile web but could be laggy at times. Again, it depends on the device's confined duration. The reason behind the slowness could be, that AngularJS wasn't developed with the mindset of keeping it for mobile first.
Angular
Angular is a mobile-first framework, you will see that it works smoothly on the mobile web. This could be because the Angular compiler generates an optimized JS code after compiling the complete codebase to make sure it works faster on browser VMs.
Native Mobile Application
It's been great that AngularJS and Angular both support Native Mobile development using a Hybrid application approach.
AngularJS
You can create a native mobile application using an ionic framework, dedicated and designed for AngularJS. Internally it uses Cordova, to communicate with Native APIs.
Angular
Angular also supports native web application development, but there you can see two options
- Ionic - Using a capacitor you can develop a hybrid application.
- NativeScript - Native mobile app development with Angular application.
- PWA - Progressive Web Application
Performance and Speed
AngularJS
- AngularJS would respond slowly after 5k bindings
- Optimization techniques
- One time binding - {{::modelValue}}
- Virtual scrolling
- Reduce digest cycle
- Avoid polluting $rootScope and calling $rootScope.$apply
- Lazyloading
Angular
- Angular is super fast
- Optimization techniques
- Configure Change detection strategy
- Virtual scrolling
- Run outside the zone
- Zoneless angular
- Memoization
- Lazy loading
Testing And Tools
AngularJS
-
Testing
- Protractor - BDD
- Karma Jasmine - TDD
-
Debugging tools
- Batarang
- ng-inspector
Angular
-
Testing
- Karma, Jasmine - TDD
- Jest - TDD
- Testing-library - TDD
- Cypress - BDD, TDD
- Playwright - TDD
-
Debugging Tools
- Angular Dev tools
- Augury
- @ngneat/inspector
TDD - Test Driven Development BDD - Behavior-Driven Development
State Management
Various options are exist
AngularJS
- Using Services
- [ng-reduxVarious options are/ng-redux "{rel=noopener nofollow}")
Angular
- Using Services
- NgRx
- NgXs
- Akita
- MiniRx
The Advantages of Angular over AngularJS
- Modern tools are used
- Always Matching with current web standards
- Reactivity at heart
- Easy version updates
- Moving toward metaprogramming
- First-class support for web components.
Conclusion
- We've seen the difference between Angular and AngularJS.
- The architectural difference between these frameworks.
- Performance wise Angular is far ahead of AngularJS.
- How state management can be done in both frameworks.
- It is advisable to use the Angular framework, not AngularJS.