Introduction to the Angular Course
Hello and welcome to the very first lecture of this complete Angular course. In this course, you're going to learn everything about Angular step by step without skipping any topic.
And let's kick start this course by having a brief overview of what Angular actually is in this lecture. Angular is one of the most popular JavaScript framework for building client-side applications and it provides a lot of reusable code like predefined methods, classes, interfaces, etc. which we can use to create dynamic client-side applications. Generally we use Angular for creating single page applications. So in this lecture we are going to learn what is Angular, what is a single page application, why you should use Angular, and what are the different versions of Angular available.
What is Angular?
Angular is a development platform for building a single page application for mobile and desktop. We use Angular for building client-side applications using HTML, CSS, and a programming language like TypeScript or JavaScript. So 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 we can say that Angular is a JavaScript framework which allows us to create single page applications. Now in this definition there are two points to note. First of all, Angular is a JavaScript framework, it is not a programming language, it is a framework. And second, we use Angular for creating single page applications. So let's try to understand what a framework and a single page application is.
What is a Framework?
A framework is like a platform for developing software applications. A framework can have predefined classes and functions that can be reused to perform and add several functionalities which otherwise we would have to write from scratch by our own.
For example, let's say we are creating a client-side application where we are using JavaScript as the client-side programming language. Now from this application, we want to make an HTTP request to the server and then we want to get some response from the server. Now since we are using plain JavaScript as the programming language, we are not using any framework here. In order to achieve this we will have to write the logic of making an HTTP request to the server from scratch, and we will also have to test whether that logic is working properly or not in different scenarios. But if we use a framework like Angular, it already provides predefined classes and methods for making an HTTP request to the server. These classes and methods are already tested and verified, so we need not to worry about that stuff. Also in a simple word, a framework is a collection of predefined classes and methods which provides APIs for performing different operations when used in an application. And Angular is one such framework. It provides classes and methods which we can reuse in our application instead of writing them from scratch.
How Traditional Multi-Page Applications Work
Now let's try to understand what is a single page application, but before that let's understand how a typical web application works. So here we have a client and a server. From the client we make a request to the server for a particular resource. In this example, we are making requests to the server for getting the HTML of about resource. So what the server will do here is it will send us the HTML of about page, in this case about.html. If we request for contact page, in that case the server is going to return us contact.html in the response.
Let's try to understand this with a simple example. So let's say here we have a very simple web application, and currently we are in the home page. So in the URL you can see the resource is /home. So here the client has made a request to the server requesting the HTML of home page and the server sent this home.html to the client which is then rendered by the client. In this case, this home.html has been rendered by the browser.
Now if I navigate to this about page, in that case you see the URL has changed to /about. So again the client has made a request to the server requesting for the HTML of about page, and in the response we have received this about.html that has been rendered by the client.
If I go to this courses page, again a request will be sent to the server requesting for the HTML of courses page. That HTML will be sent by the server to the client and that will be rendered. So this is how a typical web application works, but this is not how a single page application works.
Understanding Single-Page Applications (SPAs)
A single page application is an application which has only one HTML page, and a perfect example of a single page application would be Gmail and Netflix. Let's try to understand what a single page application is with an example. So here we have the same web application. Currently we are in the home page; you can see in the URL the resource is /home and for this resource index.html has been rendered by the client. Now if I go to this about page, so now you can see in the URL, the URL has changed, so now the resource is /about and also the view has changed, but the page is still index.html. The HTML page here has not changed.
If I go to this courses page now, again you will notice that the URL has changed so now the resource is /courses. The view has changed but the page is still index.html. The page here has not changed, and this is what a single page application is. In a single page application when we navigate around the application, in the URL it will seem like we are visiting different pages. That means it will look like different HTML documents are requested from the server and loaded in the browser. But in reality the HTML page never changes, only the content of that HTML page changes, but it will seem like a different page has been loaded in the browser.
So remember that in a single page application there is only one HTML page which gets loaded in the browser, in this example this index.html, and when we navigate around the application its HTML content changes. The page itself never changes. And also the content is changed by JavaScript dynamically. Here whenever we are navigating around, we are not requesting any data from the server. JavaScript is simply changing the content based on the resource which we have requested for. It is not making any request to the server in order to change the view.
The Advantages of Single-Page Applications
And since we are not making any requests to the server each time we request a new resource, you will never see this refresh icon spin.
Now what is the advantage of using a single page application? Why do we want to create a single page application in the first place? Let's try to answer that.
Since we are using JavaScript to change the content of the page, because of this loading a new HTML content is much faster because here we are not reaching out to the server to request a new piece of HTML data every time we navigate to a different URL. And therefore this approach allows us to create an application which is very fast and reactive just like a mobile application.
Now if you need some data from the server, you can load it in the background without making the web page unresponsive. And once the data is loaded, you can display that data in your application. Okay, so a single page application is quite fast and reactive because we are not requesting HTML data from the server every time we are navigating around. Instead, behind the scenes, JavaScript takes care of rendering the appropriate UI based on the resource which we have requested for. And this makes single page applications quite fast and reactive.
Why Choose Angular Over JavaScript or jQuery?
Let's now try to understand why you might want to use Angular for your next web application project. You might say that all these things are also possible with plain JavaScript or jQuery. Then why we need a completely new framework like Angular for this? Well, 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, the application 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.
A lot of applications built using vanilla JavaScript or jQuery is hard to test. Also, there are some functionalities which we will have to write from scratch when using JavaScript or jQuery. And 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. It gives our application a loosely coupled structure that is easy to understand and easy to maintain. It also brings in a lot of utility codes which we can reuse in a lot of applications, especially when dealing with users, navigation, and the browser's history. Application built with Angular are more testable. We can easily write automated tests to test various parts of our Angular application.
So now you know what Angular is and why should you choose Angular for creating your client application.
Angular Version History: AngularJS vs. Angular
Now over the past few years there are several versions of Angular that has been released. So let's understand what are these versions and how they are different.
One thing that can be confusing when you are starting with Angular and when you're learning Angular is the versioning of Angular. It all started in October 2010 when the first version of Angular was released, and it was called AngularJS. This version of Angular was completely different from the Angular that we use today. AngularJS was created as a JavaScript framework for building client applications. Soon it gained popularity and it was by far the most popular JavaScript framework available for creating web applications back then. But this framework was not designed with the need of today's applications in mind. Plus it was overly complex. So the AngularJS team had to simplify this framework and get rid of all the issues which it had.
In the year 2016, Angular team decided to rewrite the original framework from scratch using TypeScript as the programming language. And instead of calling it as AngularJS, they simply named it Angular. This Angular framework was completely different from its predecessors, that is to AngularJS. This version of Angular was called as Angular 2. Now Angular 2 was not a simple upgrade to previous version, that is to AngularJS. 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. So now we have another Angular framework which is Angular 2 and remember that Angular 2 is not AngularJS. These two are completely different frameworks. Nowadays, AngularJS is hardly in use.
And since the initial 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. By the time I'm recording this video, the latest version of Angular is Angular 16. Now after the release of Angular 2, the 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 completely right. Instead they have some minor changes of few new features. Also remember that Angular 2 and later versions of Angular are simply referred to as Angular.
So now we have two kinds of Angular: AngularJS which is the first version of Angular, and Angular which is Angular 2 and the later versions of Angular. Now in this course you're going to learn about Angular, that is Angular 2 and the later versions of Angular, and not about AngularJS. And whatever you will learn in this course, that will also apply to the latest versions of Angular.
So this was a very high level overview of what Angular is, why you should choose Angular, and what are the different versions of Angular available. In the next lecture, let's go ahead and let's create our very first Angular project.
