From the moment I heard about Angular, I got to know that it was a Front-end framework that is used in web development. Then I heard about AngularJS and thought it was just another name for Angular. Boy, could I have been any more wrong! They are Different!!!
Therefore, I’m writing this article to help anyone out there trying to understand which one to choose from these 2 awesome technologies for web development. Spoiler alert:- You need both!
What we will be discussing
- Are AngularJS and Angular the same?
- Why use either AngularJS or Angular and not just plain HTML, CSS, JS and make your life easier?
- The comparison between a simple “Hello World” web-app created using AngularJS and Angular
- Some key differences between AngularJS and Angular
What we will not be discussing
- AngularJS installation and setup (You can refer to the official documentation at https://docs.angularjs.org/misc/started)
- Angular installation and setup (You can refer to the official documentation at https://angular.io/guide/setup-local)
Are AngularJS and Angular the same?
AngularJS, Angular and Angles are totally different to each other. Jokes aside, AngularJS and Angular are two different technologies for developing web front-ends, despite their misleadingly similar names. Both were developed and are currently maintained by the tech giant, Google.
Why use either AngularJS or Angular and not just plain HTML, CSS, JS and make your life easier?
Although it seems at first glance that all you need in this world to create a web front-end is HTML, CSS, and JS, when you take a deep look into the real-world applications and scenarios where complex systems should be integrated into websites, your life will be way better with web frameworks, specifically for the front-end, Angular, React or Vue frameworks.
When we say “Angular”, we are normally referring to Angular (2+). i.e., not AngularJS. They are different! Now if you are like “I don’t believe you, show me the difference between AngularJS and Angular!”, well first off, I’m glad you thought that. Let’s have a small program written in both AngularJS and Angular so that we can have a comparison between the two.
Let’s say “Hello World” in 2 different technologies!
Hello world from AngularJS (Angular 1.x)
Final output
index.html
<!DOCTYPE html>
<html ng-app="HWApp">
<head>
</head>
<body>
<div ng-controller="HWCtrl">
{{ myMessage }}
</div>
<!--This line should come first-->
<script src="angular.min.js"></script>
<!--This line should come next-->
<script src="app.js"></script>
</body>
</html>
- The angular.min.js should be included before the app.js inclusion. Otherwise, our app won’t work, since angular should be loaded before loading our app logic.
- To allow our text placeholder div to access the myMessage variable in the AngularJS scope, we need to add ng-controller=”HWCtrl” attribute to that div. (can be any parent tag, but let’s keep it at that for the moment)
app.js
angular.module('HWApp', [])
.controller('HWCtrl', function($scope) {
$scope.myMessage = "Hello World from AngularJS";
});
- app.js contains the module HWApp which is the main part of our app.
- We have created a controller called HWCtrl, which contains a function.
- This function takes $scope as an argument, since we need to access the entire angular scope inside this function, to set our “Hello World from AngularJS” message.
- We set the myMessage variable in the angular scope to the value “Hello World from AngularJS”.
- Therefore when we interpolate the myMessage variable as {{ myMessage }} in the index.html, we display the value of it on the webpage.
- To connect (or to “Bootrstrap”) our HWApp to the index.html, we have to add ng-app=”HWApp” as an attribute to the <html> tag in index.html (can be any parent tag, but let’s keep it at that for the moment)
Hello world from Angular (Angular 2+)
Final output
index.html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>HelloWorldApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html>
- The <body> tag contains only one child tag and that is the <app-root> tag. This <app-root> tag is the whole angular application. All things angular are included within this tag. If we remove this tag from the body, then our index.html is just a simple HTML file. Notice how there are no <script> tags as with AngularJS.
- Unlike when using AngularJS where we directly edit the index.html for controlling the view, we have separate HTML files for each component in Angular. Therefore it is very easily scalable and is flexible. For displaying the value of variable myMessage, we can just use the main component of our application, whose view is defined in app.component.html.
app.component.html
<div>
{{ myMessage }}
</div>
- This is the Template HTML which acts as the user-side view of the component (this is the visible part of the component to the end user).
- In our example, a simple <div> tag with the {{ myMessage }} interpolation is contained.
- When our app is run, this <div> becomes inserted inside into the <app-root> tag of index.html
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
myMessage = "Hello World from Angular";
}
- We define the logic for our component (say a shopping item component). Then this file contains the name of that item, the picture to be displayed and price etc.
- In our example, we have defined our myMessage variable with its value “Hello World from Angular”.
AngularJS vs Angular what’s more?
| AngularJS (1.x) | Angular (2+) |
| We just manually created 2 files index.html and app.js | We created the whole application file structure using, ng new hello-world-app cd hello-world-app ng serve (to run the application) |
| We use JavaScript with AngularJS. | We use TypeScript (a superset of JavaScript) programming language with Angular. |
| Bootstrapping was done using ng-app attribute (preferably in the <html> tag) | Bootstrapping is done using a separate TypeScript file main.ts |
| Modules were the things that controllers were connected to. | No controllers in Angular. Thus, modules are a part of a system called NgModules |
| The architecture followed by AngularJS is the Model View Controller Architecture (MVC). The model stores data, the view is the user-viewable part, the controller takes input and send commands based on those inputs, to the model and the view. | In Angular, a Component Architecture is found. Controllers are not found in Angular, unlike AngularJS. Almost everything in Angular is a component. This makes Angular code highly granular. |
| To handle asynchronous code in AngularJS, Promises are used. | In Angular, although promises are present, RxJS Observables are mostly used to handle asynchronous code. |
Modules
In an Angular app’s source directory, a main.ts file is present and there is an important AppModule included in it (app.module.ts).
That app.module.ts file contains an important module called NgModule. This NgModule is responsible for,
- Component declarations (most things in Angular are components – like a shopping item component, etc.) – this is instead of the ng-controller in AngularJS. AppComponent is the main component rendered on the web page. All other components are inside this main app component.
- Module imports (other modules to be used in our app)
- Bootstrapping (deciding which component initially gets attached to our web page)
Directives
The concepts relating to directives are not that different between both AngularJS and Angular.
Directives like ngIf, ngClass are still present in Angular, like in AngularJS. But the functionality of ng-repeat done in AngularJS is done using ngFor in Angular.
In AngularJS, you have to use ng-model=”myMessage” for “two-way data binding” and ng-bind=”myMessage” or {{ myMessage }} for “one-way data binding”. Fun fact: In AngularJS, using ng-bind=”myMessage” than {{ myMessage }} is prefered since if the page does not load very fast, we will literally see the {{ myMessage }} text on our page, but such a thing does not happen if use ng-bind=”myMessage”.
In Angular, since only ngModel is present, we have to use special symbols to differentiate between one-way and two-way data binding. For example to bind a variable myMessage in Angular,
One-way data binding,
<input [value]="myMessage"/>
Two way data binding,
<input [(ngModel)]="myMessage"/>
Dependency injection
Dependency injection (DI) is an important concept found in AngularJS. An abstract (basic) knowledge on how it works will definitely help you to understand how providers or services work with Angular.
OK got it. Angular is the best. Let’s ditch AngularJS, shall we?
Not so fast. There are still many applications written in AngularJS. Also, although the two technologies are different, the underlying concepts are trying to achieve the same outcomes, but in different ways.
Therefore, having a good knowledge on both AngularJS and Angular would be beneficial for you.
Conclusion
AngularJS and Angular are two different technologies, the latter being the present and future. AngularJS is still hanging around and will continue to be so. Therefore, a good programmer should have a sound knowledge on both AngularJS and Angular in order to be thriving in the job market.
If you think this article is worth reading, please share it on social media.
Thanks for reading.
Like rukbook.com so far? Chances are, you’ll like rukbook on YouTube (coming soon)! Click the button below to stay subscribed ahead of time!
Did you enjoy this article? Why not share it with your friends and connections? It helps spread the word about rukbook and it means a lot! Thanks for reading. Subscribe to rukbook.com mailing list by just entering your email below! It’s just one click!
Nice🤩❤️🔥
Thank you, Lakshitha
Great!
Thank you, Nipuni
Very helpful❤️🙌🏻
Glad it helped, Ranul!
Really useful !
Thank you, Sachini
Informative stuff!!
Thank you, Vidushika
👌
Thank you
Great work!
Thank you, Dinusha