Develop an Angular Application from Scratch | Angular Reactive Form | Angular Training| Edureka Live

Key Takeaways

good morning good afternoon and good evening guys based on the time zones you all are coming from so guys before we start with the session can you all please give me a quick confirmation if you all can see my screen and hear me loading clear as well perfect thank you so much for the confirmation everyone so before we get started let me quickly introduce myself to you all first so my name is nid Kia and I have been working in this IT industry for more than 13 years now so the main agenda for today's session we are going to discuss on what exactly angular is what is new in angular 9 then we are going to discuss on the concepts for angular 8 IV angular 9 aot what exactly these are and where we have to use which and how the project is structured in angular what do we mean by typescript how angular loads and the components of angular and then we are going to discuss the planning of an application that goes into an angular so these are the pointers that we are going to cover along with string a small handson on which we can get started so let's get started so first of all if you talk about angular then angular is a frame framework it's a framework that we that is mostly popular for developing the web app based application now when we say framework what exactly we mean by framework it's a like a complete base template that we can make use of on which we can start developing the entire web based application for example let's say if we are looking to develop any website out of HTML CSS and JavaScript so either we can create all the functions from scratch we can write the code from scratch or we can use a complete base which will contain certain functionalities already defined we don't have to write these codes from scratch and then we can start building the web application on top of it so that exactly is what we mean by framework so framework ensures that we are go all the other pages so for example if we had if we are defining multiple applications multiple components then they should all have a homogeneous structure as they are going to be developed on a single framework and that exactly angular is angular is basically a web based framework which is based on typescript on which we can get started so typically JavaScript is used for the interface and interactions slideshows and all the other interactive components and JavaScript involved quickly and has been using has been one of the main language used for Server site programming like we have nodejs we have we use it for game development and multiple other use cases all right and that's why angular is considered as a client side JavaScript framework that was specifically designed to help developers build the SPs SPS refers to the single page application for example we can see Google Drive we have Google Maps again these are a single page dashboard we don't have multiple other pages right and that exactly is what angular is so front if we talk about front end development framework so front end development is all about the parts of the website that users see and is also develop it is also referred as a CSS framework because just like we have bootstrap so in bootstrap we have predefined styling we have predefined functionalities that we can directly import into our application and then we can use it we can modify it as and when required so so this makes it this makes sure that we have a standard follow for the entire project that we are going to work on and angular as we know is maintained and developed by Google just like we have bootstrap so bootstrap is is maintained by Twitter and was developed by Twitter same way the react Library so react is not a full-fledged framework react is like a complete Library which is managed by Facebook and Google and this platform angular is basically maintained and developed by Google so it was developed by a community of individuals and corporations to address many of the challenges encountered in developing single page applications so the main aim is to simplify both the development and the testing of such applications by providing a framework for client side model or we can say MVC like we have a model view controller and when we have model view view model model mvvm architecture so if you talk about the entire base then base as we know has been used for JavaScript so JavaScript is a language of the web and if you know JavaScript we can talk to the browser like it is our best friend we can do anything we can do we can add any kind of functionality or interaction with any of the elements that we have specified on the page and angular is based on JavaScript and typescript which is basically a super set of JavaScript alog together and then it is mostly preferred for single page application so single page application is an application that works inside a browser and does not require page reloading during use for example all the social media platforms let's say Facebook now we can sit on Facebook and then we can perform infinite scroll and even though a new whenever a new content is is available it gets pushed automatically without us needing to refresh or open up any other Pages same way when we are working on Google Maps again we don't have to do anything on Google Maps so Google Maps is also an example for a single page application so the entire interaction is based on the map itself right the entire interaction is based on the map itself and that's how we start interacting it correct so again we have the entire map and again whatever address we want to go to for example let's say we want want to go to suppose n again we can simply search for any any particular place of interest and then the entire background gets updated without refreshing or without going to any other page a simple example for a single page application in which we can interact with anything any component as as for the example we want to show see all the photos again even the photo section has been opened up in the same page without us navigating multiple Pages correct and that exactly is what single page application is all about it simply allows us to interact or perform all the activ it alls the end users to perform all the activities without navigating to multiple pages and single page application for even for the websites it was popular back in 2015 but since it had some issues with the SE of the websites that's what that's what was one of the main reason it was not that much popular for for the commercial websites because of negative impacts on the SEO so now if we talk about angular line so applications in angular line are IV complied by default so angular applications is compiled ahead of time that is the browser downloads and runs it that's why it is called as a client side framework is it's basically considered as a client side framework and angular 9 requires the typescript so it requires typescript version 3.7 and any lower versions are not supported by angular l so basically typescript if you have any queries and typescript is basically a programming language which is maintained by Microsoft and it is like a superscript and it simply adds the organic State as compared to JavaScript all right and the TS library is also a peer dependency rather than a direct one available in angular 9 so now if we talk about angular 8 IV so if you talk about the view engine the IV modified and IV compressed then angular's 9 compiling and rendering engine is referred as IV so once the inter application is completed again the ren ring engine used B angular that is what IV is so basically IV is smaller bundle size and is very helpful when it comes down to debugging and it provides faster comparison as compared to other engine for example if you talk about the view engine it takes almost 36 seconds whereas the same thing can be done and just 7.3 by IV medified and the and 2.7 by using IV compressed as a part of the content that we have defined as a part of the IV framework so apart from now basically now if you talk about a single use case then for example the simplest hello world program was about 36 KB which is quite a large bundle size for a simple hello world program right so the angular team decided that they will keep a threshold value of 10 KB and this was called as a cake threshold because the head of the team decided to give the team or the cake in the case they reduce the bundle size to below 10 KB that was a main idea behind naming it as a cake size as or can say k threshold so the team was successful in reducing the bundle size to nearly about 7.3 KB as you can see here with the minified I version and something even better at 2.7 KB with the IP compressed version so early it was 36 KB by default because again if you talk about a simple hell World program the it is to again for simple hell World program 36 KB is also a large size but the team was able and they were given a goal of reducing it to 10 KB and the team achiev 7.3 KB for verified and 2.7 KB for the compressed version and if you talk about the advantages of using IV then then they are multiple again it simply makees sure that we have a smaller bundle size H it offers a large or it's a faster comparation as well next we have aot next we have angular aot so basically aot now as we discussed aot is is basically used for faster compilation for example aot along with IV speeds up the creation of the applications all together right so it simply helps us in comparation of the HTML and typescript into JavaScript before the browser downloads and executed so basically if we talk about the aot again when we are using the aot the rendering becomes much faster and this is because the browser can download a pre-compiled version of the project and then it can load the executable code and this helps the application to render instantly without it having to compile the code first and the aot compiler will inline all the external HTML and CSS within the applications JavaScript which in turn eliminates the discrete axx request for these sourced files and when the application are already compiled then there is no need to download the angular compiler and this helps in reducing the size of the angular framework being downloaded as the compiler is half the size of angular itself and angular's aot compiler will help us in firing the template errors during the build process itself and reduction in injection attacks as the HTML templates are pre-compiled into JavaScript before they are rendered on the client side thereby providing a better security of the application as well so these things are again defined in aot so before we discuss over the project structure first of all let's discuss on typescript so typescript as we know is basically a superet of JavaScript which is designed and and still maintained by Microsoft and if you talk about the project setup or we can say a complete project structure so first of all we have to download angular now for working with angular first of all we can download the noj package in our system so for downloading the nodejs package we can refer to this link here call nodejs.org SL download and we will be able to download noj So So based on the environment we can choose nodejs you can choose nodejs Ms installer or zip package basically on depending upon the platform we can download the package once we have installed it we can check now to check if we have properly installed NOS or not we can open up the command prompt we can open up the command prompt and then in the command prompt we can type in the let's do one thing let's increase the font size just to Avid straight to your eyes now to check if we have node properly installed not so here we can simply check for the node version if node is currently installed we will be a able to see the node version returned to us so currently we have installed version 12.1 18.2 so once we have installed now to install the angular so basically here we can start downloading the angular package that we can work with so here we can Define npm now basically in order to start working on the installation of angular so here we can use npm npm is basically like a node package manager and then we can use install and then from the global package we have a global and then we have a local package so from Global package we can download the angular CLI we have angular C that we can specify here if angular is already installed then this is going to be to complete quickly if it is not then again it is going to take a couple of minutes for prop for installation of the entire angular CLI from scratch so so once the angular CA has been installed from the npn so we can directly use NG and then we can using the NG NG basically stands for angular and using the angular we can create a new app that is going to be deployed in the current folder that we are currently working on so as you can see this has been configured now to start creating a new application we can use NG as an angular and here we can Define new as an new application and let's say we name the application as suppose my app itself assemble my app so here a new folder by the name of my app is going to be created in this dietry with having all the angular set up done and then we can switch to this particular diory also when we are setting up the entire project we can choose what kind of CSS we want to use for example the stylesheet we can use the the SAS Bas stylesheet we can use a CSS we can stick to CSS for now so this is going to install all the required packages from angular and then we can switch to this directory so it may take a while for this in that package to be configured fully so let's wait for a second so as you can see now we it has been configured so now if we want we can simply switch to my app so here we can switch to my app that we have currently created uh if you want to see the complete folder structure that has been created by angular let's navigate to this folder in our C drive we can go to the project structure now in here we can see my app folder has been created and in here the entire model for angular has been structured the entire angular module has been currently structured here all right so now let's do one thing let's understand each and every component for node so we can have a better Clarity out of it so now we can do one thing let's open this up in any of the IDS if you want for example here once we are done with installation we can now to start the application no to start the application we can use and now we can switch to the dietory and then we can use NG serve open NG serve open so this is going to open the angular package and then we can get started and now once we have served the application now we can see under Local Host on Port 42000 this entire angular application has been currently launched so as you can see the port 4,200 has been opened up in the local host and we can see the angular application has been defined now we can use any of the code editors to work on angular so we have so here if you want we can use Sublime Text we you can also use Visual Studio code as well for starting a work on developing the code so visual studio code is basically like a code editor which is available for free by Microsoft so there is no licensing required here so if we have once we have installed it we can open this up let's say we open this up system so here we can use Visual Studio code let's search for it so we can use any of the versions as part of the requirement so let's do one thing let's open up one dietory here so here we can click on open folder now let's do one thing let's open the folder of the project that we have configured so we can go to uh C drive uh users and a user we can navigate to the user and here we have my app so we can open this up so currently if you talk about the my app then here we can see the entire folder structure has been currently opened up right so if we talk about the entire folder structure then we have my app and then we have source and other components defined here so first of all if we talk about the e2e folder first of all we can see we have something called as e2e folder so e the e2e stands for end to end testing and let me just highlight this part so this folder here called as e2e so e2e refers to n end to endend testing also known as the integration testing which provides a high level overview for the web applications so the e2e folder consists of the specs and the configuration files and the e2e are powered by a testing Library called as protector and an e22 an e2e test Runner that can take scenario test and run them in the browser then we have node modules we have node modules folder so basically under node modules we can see all the npm packages that this application is currently H having we can see all the application that the entire node model has which we can use anytime when we want to refer them as a part of the project then we have Source folder so under source so basically Source consists of three subfolders we have the application we have application we have assets environment so basically and then they are multiple including the feicon index and main.ts and then we have the application folder so under Source we have application so the application folder contains a component in which the logic and data is going to be defined the app component.ts which is available here for example here we have app and here we have app component.ts so basically this file contains let's just zoom out a bit so basically this file contains the typescript which is finds the logic for the app's root component name as app component alog together as you can see here and then we have app component. HTML so basically whatever we are seeing in the browser this is going to be saved as a part of app component HTML that means whatever we can see in the browser this my app again whatever we are seeing here this is all based on the HTML component that has been defined here for example let's say if we remove the entire HTML and if we Define okay only H1 suppose everything in Center and under H1 here we Define welcome or welcome to Eda so if we save it we will be a if we come back to the application we will be able to see this welcome TOA has been updated as part of the content that we had deployed currently using the angular framework and whatever changes we do here for example if we apply some HR lines here if as soon as we save it we can come back we can see the same change is going to be reflected here right so basically this contains the end HTML file that is going to be rendered and then we have CSS is also available like we have app component. CSS so if you want to apply any styling on any of the elements that we have referred in this hnl folder then we can Define The Styling back in the CSS for example currently we have only one H1 element available in this particular page now let's say we want to to make this H1 red in color so in app component. CSS here we can Define the H1 color it's like a stylesheet so let's say we want to change the color to suppose red we can Define red as soon as we save it we can see the same change is going to be automatically reflected on the component that we have defined here as a part of ab component CSS and let's say if we want to integrate any other Frameworks for example let's say we are building the application on angular but we want to integrate the bootstrap CSS for example we have bootstrap framework now we want to apply the bootstrap styling on this application then we can do that easily by integrating the bootstrap CSS file as well now let's say we have defined the angular we have defined the angular setup and then we have defined the components as a part of app component. HTML now if we are looking to import any of the components as a part of or if we are looking to integrate the third party framework into re into angular then we can also do that for example let's say we want to include bootstrap framework into angular now bootstrap is also one of the Frameworks correct so we can Define if you want to integrate bootstrap into angular then first of all we have to get the CDN so there are two ways either we can download the local files for bootstrap framework and then we can integrate that or we can say simply add the bootstrap as a part of the H file and then it is going to be rendered in the browser we can do both the activities so let's say if you want to integrate the bootstrap framework with angular then first of all we can get this CDN for bootstrap so here we can click on download bootstrap so either we can work with the local files or we can get the bootstrap CDN directly so we can copy the bootstrap framework and then we have to make sure that we are whenever we are defining see at the end we have to now once we have copied the bootabs CDN then we have to come back to our project structure and in here we have to click on index. HTML so basically whatever we see in the browser that is basically the output of the index HTML and in here we have defined the Appo being the component that is going to be called here right as the app component. HTML which is being which is being rendered here so now if you want to use a bootstrap CDN so we have to navigate to index.html and just before closing the head tag we can enter the CDN that means the St sheet and the JS file that we have that you want to use as a part of the framework so as we know bootstrap can be implemented by two ways either we can download the source files and then we can refer to these source files in the index document or we can or without downloading the files for bootstrap we can refer to the CDN link so just like we inate any third party images or files in the SML document we can integrate the bootstrap framework by using the CDN link and that's how we can enter them in the index or hgl so once we are done we can save it and now if we come back to our own application we would be able to see the bootstrap styling has automatically been applied to the application here so as you can see the styling for the text has also been changed because we already have a predefined styling in H1 now let's say we want to insert some kind we want to insert more elements then we can come back to app component HTML let's say here we add another for example here we add a simple button for example here we can define a button by using button and let's say we want to define the button as get started we can close the button can save it as you can see done this default button has been currently placed now let's say we want to use a styling of bootstrap now in bootstrap we have multiple predefined classes in that we can refer and we can call it in any of the element that we are going to Define so that we can apply The Styling accordingly for example let's say we want to define a stying false button so here we can Define div class and now in bootstrap we already have a class defined for button and we know that in CSS we can integrate multiple classes together we can add multiple classes together let's say we want to call some bootstrap classes here so we can Define the class and we already have a class defined by the name of button and suppose we want to use as button success so again these are the classes already defined in bootstrap so you can call this class once we save it if you come back we can see the styling has autom automatically being applied to this button as per the element what we defined under bootstrap right so let's say if we want to add more classes for example here we want to place a Jumbotron on drop so here we can use suppose a division and here we can Define division suppose first of all as row or as container as container Let's see we can remove the center P component here so here we can open suppose div class as suppose container and then we can place div class here we can Define as row and here we can create a simple Jumbotron as well suppose here we can place a simple Jumbotron and then we can place the elements inside this Jumbotron accordingly for example here we can have H1 here we can have a button also defined if we keep on saving here we can and we can see if we simply head refresh we will be able you see the elements will be will be called automatically and they are going to be saved as well as a part of the frame what whatever we have defined here for example currently we have defined this for single row correct now we want to add the stying for the stying to this Jumbotron that we have called along with bootstrap then we can then here we can Define for example here we Define row and here we can define a complete class suppose as div class as call MD 12 for a full length class that we want to for for a full can see if you want to create a full division do and here we can use call M12 if you want to add stying to it we want to place everything in Center so we can place everything in Center as well inside this zon we can use Center or suppose if you don't want to use C color as red so here we can define color as white as well and if you want to use for Jumbotron that we are going to use here so here we have defined the class as Jumbotron now for Jumbotron we want to specify some kind of gradient as well for example here we want to add a gradient and here we can Define the background color as gradient suppose here we can Define the CSS so here we can Define background image and under image here we can define linear or suppose linear gradient or suppose we want to go from top to right or right to bottom so here we can Define the ENT for example here we want to define linear gradient and then we want to Define form two right so here we can Define two right and we want to apply gradient from deep red or for example suppose here we want to Define multiple other other color groups for example let say here we want to go from not deep pink suppose here we want to go from hot pink to suppose dark p purple suppose here we want to go from hot ping to suppose Indigo or dark violet for example hot ping to dark V then here we can define the color accordingly Dark Violet so now if you save this now same thing is going to be applicable on the image that we have currently defined so depending upon the use case we can apply multiple styling to the CSS so again whatever we want to Define here same is going to be applicable on the CSS accordingly so whatever Stelling we can Define here we can integrate multiple other Frame Works we can Define the components that means in angular we can treat different components all together so here we can have different stting defined for different components and then we can treat them accordingly so it all comes down to our own requirement how we want to develop the application and then get started on the application by using the framework so let's say if you want to create more app components here so here we can create a more app component and that has to be included as a part of app component.ts so let's say if we have a different app component that we want to integrate here so here we can change the template URL to some different component and then we can have a different CSS also defined if you want to have a different app component also defined and we are also going to discuss on the entire components as well it means how we can divide the application into the component section for example suppose if we talk about the components involved here so each and every area of the application can be divided into simple components for example we may have different components for example we have a different component for the menu we can have different components for each and every application as a part of the component structure that is followed by agular so we can have a root component and then we can have a separate component let's say for browser we can create a separate component for the homepage and in homepage let's suppose we have a slider then slider can be considered as a different component we have separate section for the gallery that we have created again that can be considered as a different component we want to have a different component for the review session that we have specified and that can be considered as a different component so depending upon the requirement we can choose different component accordingly thank you so much for joining guys and have a great ahead take care bye-bye e e