Angular Projects | Learn How to Build Angular 8 Projects from Scratch | Angular | Edureka Rewind

Key Takeaways

hey everyone welcome back to an exciting new session from edura my name is vaja and in this angular project session you'll be learning how to create angular applications using all the building blocks of angular bootstrap and jiry so in this session I will consider three scenarios wherein the first case will be aimed at making you guys understand the building blocks of an Ang application and how you can use them in the second case we shall see how to add bootstrap and jiry to our applications and finally we'll build a complete application from scratch now before we start off with the session make sure you guys have node.js and visual studio code installed in case you're not aware of how to install them check out the angular tutorial video by adura where you'll get a step-by-step guidance to install them and all the other fundamentals of angular 8 also will be covered okay so heading towards the first section over here we'll create a project add components services and also see how to perform routing so now I'll jump on to my command prompt and over here the first thing that I'm going to do is install the angular CLI to install angular CLI you can make use of npm so the command will be npm install hyphen G which stands for Global at the rate angular CLI so to create a project you can make use of the NG new command so I'll just type in NG new and the name of the project you can give any name of your choice in my case I'll just name it as basic this is going to take a while so when you're doing this angular will ask you two questions the first question is if you would like to add angular routing just type Y and hit enter the second question is what type of stylesheet you would like to use in my case I'll be using CSS therefore I'll just select CSS and hit enter okay so now our project is created the project that is created will consist of many files and folders in case you select no for routing you will see that the app routing module. TS file will not be present in your workplace now to show you guys all this what I'm going to do is just get inside my project so I'll just type in CD basic and then I'll just type in code space dot this will open up my project in Visual Studio code so as you can see over here a project has been created with a number of files the NG new command creates an initial skeleton of the angular application by default at the root level of the workplace along with that it also creates end to end tests those tests are present within this e2e folder now when I try to run this project you will see a default welcome page of angular so just to show that to you guys what I'm going to do is jump onto my command prompt over here and to run my server I'll have to make use of the NG serve command now what I'm going to do is add an open extension to this and this extension will open the development server on P number 4,200 so I'll just type in hyphen o or you can also type in double hyphen open the NG surf command is used to serf the application through the development server on the Local Host this is nothing but the welcome page of our application as you can see over here it says the basic app is running now to create your own angular application all you have to do is modify this okay now let's get back to visual studio so now coming back towards the files and folders that are present over here in this video I will just explain the files that we shall be using in case you want to know what each of these file does and why is it present over here you can refer to the angular tutorial video from edureka so now I'll move on towards the main.ts file so this is nothing but the main.ts file this file contains the code that is required to bootstrap or start off the angular application the next file that that I want you to see is the index.html file the index.html file basically feeds the default page of a website in case no other page is specified the angular CLI will automatically add the CSS and JavaScript filed over here therefore you will not have to add any link or script tags manually the folder that we're going to concentrate on is the app folder the app folder is present within the source folder and the first file that I want you guys to see over here is the app module. TS file the app module .ts file defines a root module named the app module this app module tells angular how to assemble the application initially and declares a component called as the app component as you add on more and more components to your application all you have to do is come over here and declare it within the Declarations array next up is the app component.ts file the app component.ts file defines the logic for the applications root component which is the app component the view or the HTML file which is associated with this component becomes the root of the view hierarchy the app component. HTML file the output that we've just seen on the default page is rendered from here this file defines an HTML template associated with the root app component the app component. CSS file is the personal app components CSS or stylesheet so now talking about the app routing module. TS file this file is created because you choose to have routing in your application in case you would have selected no this file would not have been created so what I'm going to do over here is go to the app component. HTML file and select everything from here except the last line which is the route Outlet so I've cleared everything that's present over here now just to show you guys that this app is working I'll just take an H1 tag and within this I'll just write hello world now let's get back to our development server and see what happens so as you can see over here here the default page no more exists rather it's replaced by the hello world text that I have just typed in now let's get back to the app component. HTML file and within this I'll create a simple form so you'll have to make use of the form tag and within this I'll just have name and the input type will be text name will be name itself and I'll close this so simple form is ready I'll save this I'll get back to my browser as you can see over here the page has automatically refreshed and the simple form has been created so in this project I'm not going to concentrate on the HTML or the CSS part all I want you guys to get familiar is with the building blocks of angular and how to add them in your project now before we move on towards that let me just tell you guys how an angular application actually works so for that I'll just open this angular.js file so the execution of an angular application starts from the angular.js file this file is used to define all the standards and paths for your angular project also the angular.js file specifies which main.ts file and index.html file has to be executed once this main.ts file is detected it is compiled as it contains all the code that is required to bootstrap or start off the angular applic ation from the main.ts file angular moves on towards the app module from this main.ts file angular will move on towards the app module the app module is present within the app module. TS file this file consists of all the components that angular needs to know in order to run your application and these components are declared under the NG module decorator in the Declarations array from App module. TS file it moves on towards the app component.ts file in order to look for the app component this file specifies the selector and the template URLs all the components of an angular application are related to this root component the index.html file contains the app Root selector so let me just open it okay so as you can see this is the app Root selector for the app component to sum it all up you can say that the execution begins from the main.ts file then it's passed on towards the app module. TS file and then it moves on to the app component.ts file I hope you guys are clear with this now let's move on and understand the building blocks of angular building blocks of angular are nothing but modules components templates metadata directives data binding services and dependency injection a module basically allows you to separate the functionality of your program into different parts these parts are independent of each other which means each module's output is completely separate from that of the other if you make changes in any of these the change will be made to only that module and it will not interfere with that of the others in angular modules allow you to group together all the other building blocks such as components directives Etc these modules are referred to as NG modules applications created by angular are driven by functional sets which collect related code therefore angular applications are defined by a set of NG modules NG modules are very much different when compared to those of the jav JavaScript modules NG modules declare a group of files that can be passed and analyzed you can also make use of other NG modules within one NG module by simply importing them above all these modules prove to be very much helpful when you're creating large applications that have multiple functionalities besides allowing clean code creation these modules also help you minimize the code size by reuse of these modules and optional import of the required ones optional importing is also referred to as lazy loading meaning you can load NG modules only on your demands not to forget NG modules are also one of the biggest reasons for angular's popularity every application created with angular will have at least one NG module which is the root module this root module in angular is referred to as the app module so as you can see on the screen this is the default app module that is created by angular CLI the import statements are basically the JavaScript Imports the class that follows has an atate NG module decorator decorators basically modify classes or property definitions they are also referred to as annotations and our JavaScript features in angular these decorators contain some metadata to classes and properties so as to convey what they mean and how they're supposed to function I shall explain metadata in detail when we reach the component section so the NG module decorator that you see over here identifies the root module or the app module it then tells angular how to launch and compile it by making use of the metadata by default the Declarations array contains the app component which is the root component of this application Imports are used to import the browser module in order to attain the browser services such as Dom sanitization rendering Etc providers are nothing but the service providers which we shall be discussing later on and bootstrap is the root component created by angular and it's inserted in the index.html host web page so as you can see over here app component is present both in declarations and in bootstrap now this is because this is the only component that is present in this application coming back towards this declarations array the Declarations array present in any module informs angular about the components that belong to that module when you create more and more components to your application don't forget to add them in your declarations components cannot be used without declaring them in the NG module class so make sure you declare every component in exactly one NG module class if you fail to do so you're sure to encounter an error the Declarations array can only contain declara bles or components directives and pipes all the modules declara bles should be present in the Declarations array and they must belong to just one n module the classes declared within one module are visible only to that module but in case you want their functionality somewhere else all you have to do is export them to other modules apart from declarations Imports providers and bootstrap there's another array that can be present over here which is the exports array the exports array is a subset of the Declarations array that are accessible in the component templates of other NG modules so now let's move on towards the next building block which are components as I've already mentioned earlier all angular applications have at least one component which is the root component this root component connects the component hierarchy with the page document object module or the Dom all components Define classes that have applications data and logic and they are also associated with HTML template this HTML template defines a view that is to be displayed therefore components are basically used to control the views of an MVC architecture the etherate component decorator that you see on the screen will tell angular that the class immediately below is a component and provides the templates and the related component specific metadata angular components are the most basic user in pH for your application and they always are associated with the template and are a subset of directives the components logic is defined inside a class this basically determines how it supports the view components are created updated and deleted by angular as you proceed within your application your application can take action at any moment in its life cycle through the optional life cycle hooks life cycle hooks provide visibility into key life moments and the ability to act when they occur therefore life cycle hooks allow you to control component runtime behavior and they are called only and only when they're defined so now let's get back to our Command Prompt and see how you can add components to your projects what I'm going to do is just return the control to the command prompt okay now let me just clear the screen so to create a new component you can make use of the NG generate component command so what I'm going to do is just type in NG generate and since I want to generate a component I'll just say component now you can give any name to your component I'll just call this component as home and I'll hit enter so as you can see over here this has created a new component with four files that is the component.ts file or the typescript file the component dopc dots file which is used to perform endtoend testing the component HTML file that will render the required HTML or the view for that page and the component specific CSS file so now let's get back to our visual studio and over here you'll be able to see the component that you've just added so I added a home component and it's just present over here now once youve added a new component you'll have to remember to get back and add it so as you can see over here the home component has already been added now this is because I have added an extension which is the Auto Import extension in case even you want to insert this extension all you have to do is go to these extensions over here and just type in Auto Import so as you can see over here the version that I'm using is 1.5.3 once you add this you will not have to manually come here and import the components that you add to your application so now get back to app component. HTML file and specify the component selector over here in my case the name of the component component is home so I'll just say app hyphen home and I'll save this now let's get back to our development server I'll have to run the NG serve command again so as you can see over here our application says that home works home is the name of my component and this is the default output so as you can see over here within the view of this component I have a simple line saying homeworks and this is what we just saw on the development server what I'm going to do now is get back to the home component.ts file and over here I'll make a slight modification so before I make any changes to this file what I'm going to do is add in a new file within this folder and I'll just call it as home.ts do not not forget the TS extension because I'll be typing in typescript code within this over here I'll create an export class and the name of the class will be name within this I'll keep a single property called name and this will be of the type string let me save this I'll get back to the home component.ts file and within the home component class I'll create a new property called as name which will be a of the type of the name class in case you have issues understanding the syntax of typescript I'd suggest you guys to go and check out the angular tutorial video of edua so for the name I'll just specify as Eda now the reason why you're seeing a red mark over here is because I've not imported the class that I've just created so all I have to do is import it so import the name of the class was name itself PR so now we've imported the class let me just save this I'll move on to the home component. HTML file I'll just delete this so one thing that I want to do over here is change the name of this variable since I already have this variable present in the name class so I'll just call this as my name and I'll save it so now I'll go to the home component. HTML file and and over here I'll just specify an H3 tag and within this I'll be making use of the interpolation binding feature so over here I'll just specify my name do name I'll also make use of a pipe over here and to this I'll just say uppercase and I'll save this so now let's get back to our browser and see how this works as you can see over here the changes I've made has been reflected on this browser also please make a note that the pipe is working with angular pipes display value Transformations can be declared in your template HTML a class with the eate pipe decorator defines a function that transforms input values to Output values for display in the view there are various type of views in my case I've used uppercase other than that you can also make use of lower case date currency Etc not just that you can also Define new pipes so now you've seen what are competents and how you can add them to your product projects the next thing that I want you to know is Services service is a broad category that encircles values functions or features that are required by an application service classes have a narrow and well- defined purpose components are differentiated from services in angular so as to increase the modularity and reusability of your code separating the components view related functionality and other kinds of processing will make your component classes lean and efficient to create a service using the angular C all you have to do is make use of the NG generate service command so now let's get back to our Command Prompt and then I'll just type in NG G for Generate and service I'll just call it as home service and I'll hit enter so as you can see over here two files that is the home service. service.ts file and the test file for this have have been created so as you can see on the screen this is the default service.ts file that is created by angular now in case you want to inject this into some component all you have to do is go to that component and over here type in import followed by the class name the class name is home service it's Auto imported I'll delete this the moment I type the name of the class it gets Auto imported so this is how you inject a service into a component now in case you want to make use of this you can go ahead and specify a property that will make use of this service what I'm going to do is create a private property over here I'll just call it as home service so as you can see over here this property is going to make use of this class I'm not going to get into the details of this I just want you guys to understand how to EMB and inject Services next up we'll be looking at routing routing helps you to display your application information in multiple Pages this can be done using angular router which enables you to show different components and data depending on which part of the application the user is referring to angular's router will allow the user to navigate from one component to the other as the user selects the various components it can be done either by entering the URL directly in the address bar or by clicking on the links given in the application our application is already set up to use the angular router so to specify the root that is where the user has to be directed you can make use of the roots array which is present in the app routing module. TS file now in case I want to specify a different part to My component that is the home component all I have to do is just open Cy braces within this I'll specify the Path property it should be home because the name of my component is home itself and for the component property I'll have to specify the home component class now the reason why I've just specified One path over here is because I just have one component you can add as many routes as the number of pages you would like to include in your project so with this I hope you guys have understood the basic building blocks of an angular application now I'll jump on towards the second case over here that is adding bootstrap and jiry to your project to create beautiful websites it's very much required for you to integrate bootstrap and JavaScript files into them now in case you want to add bootstrap you can do it in two ways the first is to directly make use of the bootstrap CDN or the content delivery Network to enable bootstrap to deliver the casted version of bootstrap compile CSS and JavaScript to your project to do that you can go to the bootstrap CDN link so just go to get bootstrap.css provided over here now what I want you guys to do is include this bootstrap.min.css file to include that all you have to do is copy this link from here then open the index.html file and paste it at the end of the head section so move on towards the index.html file and towards the end of this head section I'll just paste it save it and I'll get back to the browser next you will need to add the bootstrap.min.js file this is mandatory if you want to include bootstrap JavaScript functionality just copy the script tag from here and paste it within the body part of this index.html file now the next thing that you'll have to do is include jqu Library this is because JavaScript functionality is dependent on jqu to include J quiry functionality you can go to the official jQuery website so I'll just move on to jQuery website jiry 3.x is the latest version and over here I want the minified version so I'll just click on minified so as you can see I have the corresponding script tag that is present I'll just copy this I'll get back to my index.html file and I'll paste it just above the script tag of the bootstrap min.js file so once that is done I'll rerun my server so I'll just run NG serve command again so as you can see the font has changed which means bootstrap has been embedded into my project the second method is to install bootstrap and jiry now to install it all you can do is get back to the command prompt and over here just type in the command npm install bootstrap J quiry double hyphen save double hyphen save will save bootstrap and jqu ID to the package.json file so as you can see both the packages have been installed now let's get back to visual studio so now let me just open the package.json file so as you can see over here both bootstrap and jQuery have been installed now since we want to load this CSS and JavaScript globally we should specify the path of this within the angular.js file so what I'm going to do is just open up the angular.js file and move on to Styles and scripts now what I want to tell you guys is that any package that you install will be present within this node modules folder so over here let's just look for bootstrap here it is and within this I'll open the disc folder CSS and from here I want to access the bootstrap min. CSS file so what I'm going to do is specify the path of this file within the Styles array over here so I'll just specify the path node modules within the bootstrap folder is the disc folder which contains the CSS folder and then is the bootstrap.min.css file just be careful while specifying these parts once this is done we move on towards the scripts array and over here I'll have to specify the part of the J quiry min.js file so to do that all I have to do is look for the jqu module so here it is within this the disc folder and within the disc folder is the jquery.min.js file okay so all I have to do is include the path of this file within scripts I just copy the previous one this is jQuery there is no CSS folder and the name of the file is jquery.min.js I also have to include the bootstrap.min.js file over here so I'll just specify a comma I'll copy this line and I'll paste it and instead of jQuery it will be bootstrap and in instead of CSS this time it's going to be the JavaScript folder or the JS folder now what I'm going to do is just save this okay so what I'm going to do now is get back to the index.html file and from here I'll delete the bootstrap CDN links and the J quiry CDN links I'll save this and I'll get back to my development server so as you can see bootstrap is still working and I have no errors in case you guys want to be more clear I'll just give you an example and from here I'll pick up a nav I'll just copy this code I'll get back to my project so now I'll open the app component. HTML file just remove this and I'll paste the code that I just took from bootstrap let me save this and get back to my project so as you can see over here the nav bar that I just took from the bootstrap official website is working this means bootstrap has successfully been installed so now moving on towards the final section of this video which is creating a complete angular application using all the building blocks bootstrap and jiry so now let's get back to our project and I'll just delete all this present from here I'll open the Service file that I've created and over here I'll just insert some dummy data for my project so before I move on further let me just show you guys the website that I've created this is a sample edureka angular website and over here my home component or the homepage consists of some of the top ranking angular blogs and also a link to all the front-end development blogs from Eda I also have a header component that contains the home student list and the enroll components now when I click on any of these components I'll be redirected to a different page this page contains a list of all the students who have enrolled for this course when I click on show details my page is going to display the details of that student also I have a separate enroll component which will allow the user to enroll himself for this course so let me just show you what happens when I enroll into to this so I'll just type in some ID I'll say 102 and for the name I'll just say student student atate xyz.com anything and within the description I'll just specify student details okay now I'll click on this enroll button that is present over here and I'll get back to the student list component so as you can see the student who has just en rolled is present within the student list now when I click on show details I'll have the corresponding details of that student so now let's get back to our visual studio and build this website so I'll get back to visual studio and over here I'll open the service.ts file I want this service to have some dummy data that I'll be able to show on my development server So within this home service class what I'm going to do is create an array of students since I already have some dummy data present what I'm going to do is just copy that over here and I'll save this now this service component will be used for all the other components present in my project so what I'm going to do over here is create two functions one which will display all the students that are present in my list and the second that is going to help students enroll for the course let me just specify a public access specifier in case you're not aware of any of these you can still refer to the angular tutorial video by adura so public the name of the method will be get and I'll just call it students now this function is going to be of the array type and this array is going to hold the IDS names description and email so that'll be ID sorry I forgot to specify the curly braces ID name description and email so within the body of this function I'll just specify one return function that is return this do students this function will help me retrieve all the students that are present in my dummy data next up I'll create another function and the name of this function will be create student now since I want the student to have ID name description and an email ID what I'm going to do is just specify students and the type of this which is nothing but ID name description and email within the body of this function I'll just specify this do students do push so now both my functions are ready the next thing that I'm going to do is add on some more components to this project so I'll get back to my command prompt and over here I'll type in NG generate component and the first component will be student list the next component will be student create and I will also have a header component so I'll get back to the visual studio code now when I open the app module. TS file you'll be able to see that all the components that I created have been imported by default over here now this is because of the Auto Import extension that we spoke about earlier in case you've not added this extension you'll have to manually import the corresponding components now I want each of my component to have a specific destination or a separate page therefore what I'm going to do is go to the app routing module. TS file and over here I'll create a path for all the pages that I want to display in my project I'm not going to be typing this manually I already have the code present for it so let me just copy paste it over here so now my app routing module. TS file is ready so the path match property that you see over here here can have two values that is the prefix or full when the user specifies some URL within the address bar this property will check if the user has correctly specified the whole extension or will just check for the prefix of it by default the value of this property is prefix the reason why I've specified full over here is because I want the user to correctly specify the URL Link in case he does not do so I'll redirect to the homepage so now what I'm going to do is go to the header component and within this header component I want to mention the home component the student list component and the enroll component within the HTML part of this header component what I'm going to do is paste some Navar code from bootstrap so I'll go to the official bootstrap website I want my header to be right aligned so I'll just pick up some right align Navar you can take any of your choice I'm just taking something that I prefer to I'll paste it over here what I'm going to do is modify the content I have my Project Specific content present in my previous project so I'll just copy that from there HTML part of the header component is ready now in case the user clicks on home he'll be redirected to the homepage if he clicks on student list he will move on towards the student list component and if he clicks on enroll he'll move on towards the student create component I'll just save this next I'll have have to move towards the app component. HTML file over here I'll have to include the header I'll delete this and I'll include app header let me just save this I'll delete hello world now when I run my server my header component is present over here okay I see this edureka from here I'll just delete it so that's present in the home component so I'll go to the home component. HTML file I'll delete this and I'll save it so now as you can see the browser has refreshed and my header component has been displayed now within the homepage I'll create a bootstrap Jumbotron or an area that is very important so what I'm going to do is just copy the code that's present in my project the next thing that I'm doing over here is modify the home component. HTML file since I have the code ready I've just pasted it over over here so let me just explain to you guys what I've done over here the first thing that I've done is included an image because of the first image tag you able to see this image present over here the code that I've used for this is the responsive image code present in bootstrap the next thing that I've done is within a div tag I have a class of Jumbotron jumbotrons basically Mark areas that are very important so as you can see over here the gray area is nothing but the Jumbotron now not just that I also have some cards over here that are aligned next to each other and within this I've just specified a few blogs that are very important finally I have this last Jumbotron which contains a link to all the front-end web development blogs of edura my homepage is ready so my homepage is ready now I'll move on towards the next component that is the student list component over here I'll open the student list component .ts file within the student list component class I'll create two variables that is student and selected student then I'll be making use of the same service class that I've created which is home service so I'll just create a public parameter I can give any name to the variable but I'll just specify as home service next next I'll create a public function and I'll just name it as select student this is going to take student parameter this is going to take student as a parameter and within this I'll just return this do selected student and I'll insert it into the student property now I'll have to update the view of this component so I'll open the student list component. HTML page and I'll just copy paste the code that I've already written so now I'll just come and refresh my browser looks like the header is missing there it is the header has moved towards the end of this page that is because I've not specified the CSS for it so I'll just get back to my project and I'll go towards header component. CSS file and one more thing that I have to do is move on towards the app component. HTML file and instead of placing the header after the route Outlet I'll have to place it before that so now let's get back to our development server so as you can see the header component is present where I want it to be now I'll just click on the student list so as you can see over here all the students have been retrieved now in case I click on any of this it will will show me the details of that corresponding student now two of our components are ready the next thing that I'll have to do is manipulate this enroll component I'll get back to visual studio code and over here I'll open the student create component So within this I'll create an array called as student and this is going to hold the IDS name description and the email of the students and one more thing that I'll have to do is import the service class so I'll just say import the name of the service class was home service what I'm also going to do is create a student class that will allow me to display the created student in the student list the student create component.ts class is ready next I'll have to modify the views of this component so I already have the code ready for this so I'll just paste ped over here I've copy pasted the required code I'll get back to my browser and I'll rerun my project so let me just see if everything is working I'll go to the homepage and over here my homepage runs fine I'll click on student list so the student list component also works fine and the student create component so over here let me just type in some details I'll just give some random name so now let's get back to student list so here it is the student student that just got enrolled is also shown up in the student list so this brings us to the end of this session I hope you guys have enjoyed and learned something new goodbye and take care e e e for