Welcome & Course Overview
Hello and welcome to the very first lecture of this complete Angular course 2022.
In this course, you will learn everything about Angular step by step without skipping any topic.
Let's kick start this course by having a brief overview of what Angular is, why should you use Angular, and what are the different versions of Angular available out there.
What Is Angular?
So what is Angular?
Angular is used for building client applications using HTML, CSS, and a programming language like JavaScript or TypeScript. Now remember that Angular is not a programming language in itself like JavaScript. Instead, it is a framework which uses programming language like JavaScript or TypeScript.
So if Angular is not a programming language, then what is it? Angular is a JavaScript framework which allows us to create single-page applications. Okay, so Angular is a JavaScript framework. A framework is like a platform for developing software applications. A framework can have predefined classes and functions that can be used to process input, manage hardware devices, and interact with system software. And Angular is one such framework, and Angular allows us to create single-page applications.
Understanding Single-Page Applications (SPAs)
So what is a single-page application? A single-page application is an application which has only one HTML file, and the perfect example of a single-page application is Gmail and Netflix.
In a single-page application, you can navigate around and in the URL it will seem like we are visiting different pages, but in reality, the page never changes. Only the content of the page changes. Let's understand this with an example. So here we have a demo website with header, navigation bar, main content area, sidebar, and a footer. And this web page is rendered in the browser when we load index.html in the browser. And currently, this webpage is displaying content related to the home section.
Now if we navigate around and if we go to the about section, then the content related to the about section has been displayed in the webpage. But if you notice, the HTML file which is rendered in the browser for this about section is still index.html. So here, the HTML file has not changed, the web page has not changed, only the content in the web page has changed. Okay. In the same way, if I move to the contact section, then the content related to the contact section will be displayed in the web page, but the web page itself is still index.html. It has not changed. In a same way, if I go to product section, then the content related to the product section is displayed in the web page, but still the web page which is loaded in the browser is still index.html.
And this is what a single-page application is. In a single-page application, we have only one HTML file, and only the content of that HTML file changes. The web page or the HTML file itself never changes. And since in a single-page application the web page itself never changes, that's why you will never see the refresh icon in the top left corner of the browser ever spin. Because the page itself is not changing, only the content is changing, and since only the content is changing, the refresh icon in the browser will never spin. And with Angular, we can create such single-page applications.
The Advantages of SPAs
And there are several advantages of creating a single-page application. First of all, a single-page application makes the application faster and it gives the user a very reactive experience. That is because using JavaScript to change the content of the web page dynamically is much faster than having to reach out to a server for every page change and for every new piece of data we want to display.
And therefore, this approach allows us to create web applications which look and feel almost like mobile apps and they are very fast. Now, if you do need some data from the server, you can load it in the background without making the webpage unresponsive. Okay, so these are some advantages of a single-page application.
Why Choose a Framework Like Angular?
Now you might ask, why should we use Angular? Can't we do the same thing with JavaScript or jQuery?
The answer is we can certainly use JavaScript or jQuery to do the same thing which we can do with Angular, but if we are using JavaScript or jQuery, as the application grows, it gets more and more complex and vanilla JavaScript or jQuery code becomes hard to maintain. And we will need a way to properly structure our application. And a lot of applications built using vanilla JavaScript or jQuery is hard to test.
This is the reason why over the past few years, various frameworks have been built and evolved to make web application development easier, and Angular is an example of one such framework. There are several benefits of using Angular framework for developing applications instead of using vanilla JavaScript or jQuery.
First of all, it gives our application a clean and loosely coupled structure that is easy to understand and easy to maintain. Then it also brings in a lot of utility code which can be reused in a lot of application, especially when dealing with user's navigation and the browser history. And application built with Angular are more testable. We can easily write automated tests to test various parts of our Angular application.
Angular's Versioning History
Okay. So now you know what is Angular and why should you use Angular.
Now one thing that can be confusing when you are starting with Angular and when you are learning Angular is the versioning of Angular. It all started with AngularJS or Angular 1 as it is also called, and it was the first version of Angular and it was totally different from the Angular that we use today. AngularJS was introduced in October 2010 as a JavaScript framework for building client applications, and soon it gained popularity and it was by far the most popular JavaScript framework available for creating web applications back then. But the framework was not designed with the need of today's application in mind, plus it was overly complex.
So Angular team decided to rewrite the original framework using TypeScript, and as a result, Angular 2 came out in mid of 2016. This new version was entirely different from Angular 1. Angular 2 was not a simple upgrade to the previous version, that is to the Angular 1. It was completely rewritten from the ground up and it was completely different from Angular 1. Angular 2 also fixed all the issues which Angular 1 had.
And since the release of Angular 2, there are other versions of Angular which has been released over the years, for example, Angular 4, 5, 6, 7 and so on. The latest version of Angular is Angular 12. Angular 3 was skipped for internal reasons. Since the release of Angular 2, Angular team simply adheres to a versioning scheme where a new version of Angular is released every 6 months. And that new version are, however, not the complete rewrite. Instead, they have some minor changes of a few new features.
Angular 2 and the latter versions are simply referred to as Angular. So now we have two kinds of Angular: AngularJS or Angular 1, and Angular, which is Angular 2 and the latter versions of Angular. Okay, so in this course, you're going to learn about Angular, that is Angular 2 and later versions, and not about AngularJS. And whatever you will learn in this course also applies to the latest versions of Angular.
What's Next: Project Setup
In the next lecture, we will do the angular project setup and we will create our very first angular app.
This is all from this lecture. Thank you for listening and have a great day.
