Complete Angular Course: Lecture 1

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 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 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 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 dot 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 slash 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 slash 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 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 slash 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 slash 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 slash 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 it's 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 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 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 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 used 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 either has 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 letter 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

hello and welcome to the very first lecture of this complete angular course in this course you&#39;re going to learn everything about angular step by step without skipping any topic and let&#39;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 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&#39;s try to understand what a framework and a single page application is 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&#39;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 now let&#39;s try to understand what is a single page application but before that let&#39;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 dot HTML if we request for contact page in that case the server is going to return Us contact.html in the response let&#39;s try to understand this with a simple example so let&#39;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 slash 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 slash 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 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&#39;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 slash 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 slash 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 slash 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 it&#39;s 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 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&#39;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 let&#39;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&#39;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 now over the past few years there are several versions of angular that has been released so let&#39;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&#39;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 used 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&#39;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&#39;m recording this video the latest version of angular is angular 16. now after the release of angular 2 the angular team simply either has 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 letter 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&#39;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&#39;s go ahead and let&#39;s create our very first angular project

Transcript for:Complete Angular Course: Lecture 1

Transcript for:
Complete Angular Course: Lecture 1