Angular for Beginners | Shalini Mittal

are you a web developer creating dynamic websites using javascript as a programming language but gone through a nightmare of boilerplate code what it means writing repetitive lines of codes which are common across the application maintenance what does it means javascript is unstructured hence it is really difficult to maintain an unstructured application change we all know that change is constant clients come up with many of the requirements in the future any unstructured application is really difficult to implement changes compatibility one of the most important concern for any web developer whether it's device compatibility issues or browser compatibility issues focus as a developer why do I have to worry on all these aspects I should be able to focus on the business logic and create websites as soon as possible providing all the business implementations right if you answered yes to any of these questions then this course on angular is just right for you this is shalini metal and in this video we are going to create a simple project using angular what is angular angular is a framework that is used to create a structure dynamic web application resolving all the issues that we discussed and lets a developer focus on the business logic did you hear the term framework what is it to explain you about framework everyone I am sure must be using MS Office when you click on Microsoft Word you have the screen where you can select a template say for example I am interested in writing a journal I click on this and the moment I do this can you see it gives me a basic template advantage of this is when I get this template I am able to just modify the content and rest template I have it as it is isn't it amazing that's what framework provides you it they provide you with a basic template implementing the best practices and the design patterns that any developer should follow for creating a structured application angular is built on basic two concepts first that is spa single page application now what do you mean by that it isn't that you are just going to have one page where all the HTML code resides for everything for every functionality that you want to provide and you'll just have in a one class or one file no single page application means say for example you go to Chrome open the Gmail application can you see the moment I click here say set the moment I click here on the categories you would notice only this middle page gets refreshed and all the other pages like for example this side bar the menu bar they all remain same only a part of pages refresh this is what is single page application means in one application based on where a user clicked for that click whatever content needs to be displayed of course it's displayed only on one part of a page and if that part is refreshed the next important concept is dependency injection let's understand this with a layman example suppose you are going for trekking now you're going for trekking in a snow area but you decide in an area but it doesn't snows at all the low end up purchasing snowshoes which are not going to use it no right you go for tricking you rent the snowshoes use it return back and you come back advantage you don't have to invest money in snowshoes which are which are not going to use at the same time you don't have to carry the burden of these snowshoes on your backpack to go for trekking same applies in the angular applications how say for example I have a class traveler I am a 10 year 10 to 12 year old child and my family likes to travel a lot so class traveler now as a family we travel in a car definitely I'll have a car object 7 is new car we travel fine now I'm an 18 to 20 year old child I have a girlfriend or a boyfriend it depends right now car no I need a bike I will be traveling on a bike so as a traveler now my dependency is on a bike object so I will say beavin equals to new bike you saw what happened you have to go to the traveller class you have to change the code and now instead of car object you have to create a bike object means your traveler is slightly dependent on the vehicle type this is not desirable if I change a vehicle should not change the traveler class how do you do this yes dependency injection so I'll create a class vehicle I'll have car bus flight train bike whatever mode of vehicle I want to use as a subclass of class vehicle the traveler class will have a reference to the class vehicle in the constructor and then at runtime traveler says hey give me a car object because car is a type of vehicle a car object can be passed I say tomorrow I want a bike because bike is a type of vehicle I can pass the bike objet tomorrow I change the type of vehicle my traveler class remains intact and I just have to create new classes and make it make it a subtype of vehicle this is how angular implements dependency injection before we actually start learning angular let us understand the prerequisites required and get ourselves a good with the scene so the prerequisites required are HTML CSS and JavaScript if in case anyone is not aware about these three languages please go ahead on w3schools calm and your cells of it you have to know these two languages professionally but at least some basic idea that hTML is used to create webpages CSS is used to style the webpage and javascript is used to add dynamism on the webpage at the same time it is good if you know xml jason HTTP verbs and rest services but do not worry if you are not aware about any of these four let us see the list of software is required for learning angular and typescript install these softwares and keep our machines ready for angular and typescript the first software that we require is node.js so go on to the Google type in node.js download the first link that is the official website click and you will get the node.js download options for different operating systems based on your operating system go ahead and download the respective node.js once in node.js is installed you can check whether it's installed properly or not by opening the terminal and typing in node - V if you get the note version displayed that means your node is properly installed next we will require the typescript to be installed to do that go on your terminal or the command prompt and fire the command npm install - g and typescript once you do this you can press Enter it takes some time please wait have patience and once it is done it displays in my case updated in your case it will be something different like installed successfully to check for the typescript was installed successfully or not you can type in TS c typescript compiler - v if it displays the version that means your typescript is properly installed now to install angular CLI we will be typing in npm install - g at the rate angular CLI CLI is nothing command-line interface so angular official website provides you with this angular CLI to be downloaded and installed and then you it just gives you an interface to create projects and various commands require for the angular project so you can press the hit you can press the Enter key takes some time to download as well so we'll just forward this installation once it's done because I already had it just says updated one package in your case there will be a list of software's it downloads and installs and it takes usually around two to five minutes sometimes even to download and install the CLI so please wait and have patience next to check whether angular is installed properly you can just type in ng V and if you get the output angular CLI version that means your angular is installed properly lastly we will be requiring the editor where we will write our codes the editor that we have selected is Visual Studio code open the google search engine again and type in Visual Studio code download you will get the first link that is the official website you open this link again download the Visual Studio code for your operating system once downloaded and install if you open the Visual Studio code it shoots you should see something like this that is a welcome screen this so if you see a welcome screen that means your vyas code is installed properly to create an angular project use the command ng new and give the name to the project I am giving angular demo once you do this it asks do you want to add angular routing we are going to say yes because routing is the way that to implement spa in angular remember spa single page application when we hit enter it asked me for the style type if you know about pre-processors you can select any one of these or you can just keep the default CSS as it is it takes some time to create and download all the artifacts with a speed up the stern loading once the download is complete you get all of these that it's printed it creates all the folder structure and a project is now created under desktop with a project name as angular demo open visual studio code go to file open go to the folder where you created the project in my case it's desktop and angular demo I'll select this open once you do this you get the project in your workspace let us first understand the folder structure package dot JSON is one of the most important file where you provide the commands that you want to use secondly the dependencies that angular uses all these dependencies are downloaded in the node modules folder you also have development dependencies like testing libraries which are not carried forward in the production environment the next important file is angular dot J's this JSON file basically provides all the configurations that angular requires to compile and execute your angular project it specifies the projects the project type the source route that is you can see its SRC prefix app this we will come back to later what do you mean by prefix app you have the output path that is where the output directory is the route entry files so these two files are very important that is the index dot HTML file and main dot TS you can see this is the name of the main entry point file and this is for the applications HTML index file we have a TS config angular uses typescript as a programming language to create angular projects it needs configuration information with respect to t s that is type script which is inside the TS config dot app dot J sir you can have as like images videos audios in the assets folder you can provide styles you can have your own customized styles angular does provides with a global style start CSS so if you open the SRC folder you already have a style start CSS and whatever styles you apply in this file applies globally we also can have our third-party JavaScript libraries and provide the path for the same over here we saw in package store Jason we had a command that is ng so let's see what happens when we fire this command here right click open in terminal and you can just execute the command ng search this command basically starts your angular application and compiles all the type scripts files and then your project is running on a live server that is localhost 4200 so let's see what is there on the HTTP localhost 4200 so let me just copy this and let's open the Chrome browser when I type in here localhost 4200 you will see it displays this HTML page hold on did we create this HTML page no that means the moment we used angular CLI this page is already created for you don't worry we will be going through where this HTML page is created and how angular is able to display this page you would see the ng serve commands basically execute the application and it is up and running on localhost 4200 in angular Jason or we have two important files to look over in next dot HTML again SRC folder index dot HTML and here you would see it's a plain HTML file just one thing that is different is app root remember in angular or Chasen we saw prefix that is app so by default whenever an angular creates HTML tag that HTML tag has a prefix of app next important file is main dot TS this main dot T is basically provides you the platform browser dynamic so angular handles all the browser and device compatibility issues so it handles because of this module you also specify the bootstrap module of your application and that is app module module an angular is nothing but a file so if you know JavaScript in JavaScript we do create dot J's files and every dot J's file is called as a module it's just about that so here also we specify the bootstrap module this half module is a special module inside the app and act dot module dot TS all the files in angular you save with the extension dot tears because it's a typescript file so you can consider this as a configuration file for your angular project so you create n number of modules you have to configure them in this file so that angular knows about them where to look for them and then angular takes the responsibility of instantiating them initializing it and then displaying the HTML view here we already have the two predefined modules browser and the ng modules which provides you with the core functionalities the aprotic module because we selected routing as yes we have routes in the app routing taught module dot tiers here you can create your routes so it's it's empty as of now because we haven't specified any routes or the path over here we have router module dot for route that is they tell the router module that hey go ahead and you are going to create routes for everything defined inside this routes array again you have one more important file over here that is bootstrap app component you will hear this term component a lot in angular component modules are few of the building blocks and angular so remember in modules you basically configure all the angular application level stuff component is nothing in angular but it's a normal class so if I open a prod component or TS you will see it's a normal class app component it has a property that's an instance variable that we see and components are basically nothing but they provide the binding of data with the view so component are responsible for generating the view so from various generates of you you can see we have the template URL so template URL you specify the view that this component is responsible to generate and the data to be tied up with this view say if you see angular demo can you see angular demo here so if I go and change this to welcome to training and I save it see it recompiles so if we have a hot server and now can you change see this change welcome to training so how this data is getting binded to the HTML view let's explore this HTML page so abroad component or HTML can you see all the styles and the full HTML page that is being generated this is from there the HTML pH gets generated and if you remember an index dot HTML we had app root and this app root so how does index or HTML knows that for this particular tag what content to display because you've specified in main tortillas the bootstrap module app module and in the app modules a bootstrap component app component it goes to the app component looks up for this selector looks up for the HTML content to be displayed for this selector you can have any style specific to this HTML page and it also binds this data with this HTML page so ideally I can just go ahead and I can delete everything and if I save see it's a blank page if I add a heading now and I see I want to bind that data so remember in AB dot component or tears we have here or attribute that is title I want to display this content but this is a variable so if I just try it title over here it will just display title but not the value for the title we want angular to look up for this title as a variable go in the components class check for the value and execute this as a variable and put that string expression so we use curly braces can you see now we got welcome to training if I go to Styles dot CSS remember the global Styles if I say here body and suppose I use the background color and if I give a background color I save it it applies globally this syntax in angular is called as string interpolation and the syntax is used for data binding and hence it is and hence it is called as one the data binding there is another syntax of data binding that is we can use square brackets so for example here in SRC folder we have a assets folder I've just pasted an image let's see how we can refer to this image so I will be creating here one more property card is equals to dot dot slash because it's outside the app folder the name of the folder is assets slash Master Card dot PNG now I will be creating an image tag which basically refers to the card attribute here so again I can have a H on tag and I can say I am G using the square brackets I can bind the data and just provide the name of the property if you would see we get the image you can use the curly braces that is string interpolation or the square brackets for implementing 1v data-binding in angular let us create a button and I will be saying button and that's it suppose click here ok I'm gonna do this a button is created noise shows about that now let me go ahead and disable this button so disabled is HTML attribute which you apply the button gets disabled you can see over here let's just apply some styles to the button just applied some styles and we have this button it's disabled now I want to be able to dynamically apply the value for disabled if a value is true the button is disabled if the value is false the button is enabled so let me go ahead and create one more variable choice and I initialize it to true I want to associate this disabled with this attribute I can actually use the curly braces syntax and I can see choice I can let's say carrot create here h3 tag and the way we did with curly braces I can also do this I can see the inner HTML attribute will be equal to choice so either you can use square brackets or you can use curly braces and you can see the value is displayed it's true fine it's disabled let me change this value to false and if I execute you can see the value is false but the button is still disabled so this is the difference in the curly braces and the square bracket syntax curly braces evaluates everything to a string now this particular choice variable is of type boolean so I wanted to retain that data type of the variable boolean hence curly braces will not work and we will have to use square brackets so then wrap this HTML attribute in the square brackets and now it's false you can see the button should be enabled the moment I change this to true I save it recompile this is true you can see the button is disabled for event binding you use the round bracket syntax and you have the event click and I'll say on the click call a function say sure again the syntax a means the same as in any JavaScript code so I have a show function and I can say over here suppose alert and button clicked you save it execute okay it's true so it's disabled so let's make this as false when you click the alert is display so this is how you can do event binding so the round bracket syntax is used for event binding square brackets and the curly braces for data binding so the data flows from the component to the view and the event goes from the view to the component to handle the events raised by the users now let's delete all of this and I will be adding the bootstrap libraries so I'll go in index dot HTML and we'll be adding the bootstrap Syrian links so just go to index dot HTML and copy/paste the bootstrap related CDN link so you want to use bootstrap library in your angular yes you can do that as well so suppose I say here div Jumbotron this is again a bootstrap class and I can say blog hub that's the name of my website you can see we have the blog hub so we have this Jumbotron you want to decorate this Jumbotron you can and go to styles and apply styles to it so you can see it's brown and you have a color wallet let's go ahead and change this so we'll put this in the h1 and I'll use one more CSS bootstrap class that is set so this is fine let's go ahead and add one more component because in angular you will be ending up creating many components to create a component on the app folder you say right-click open a new terminal fire the command ng angular generate g c component the name of the component so the folder I want this blog list and I want to add this inside the module which is this app routing dot module dot TS so I'll say a plotting dot module dot tears the moment I do this it generates so you can see inside the app you have a blog list you have the same structure as for the app the blog list component HTML dot though this is a testing file and the block component dot tears and if you notice it also because we asked it to add it in the app routing dot module dot T is if you open can you see it has configured the component inside the app routing module dot TS now just go ahead and a plot component of HTML and here if I just say add so if you open blog list component dot TS can you see the selector so it's all about selectors that is every component that you create is going to have a selector name which you can use it as a HTML tag the moment I do this I save if you would see I don't have it and if I open the confirm blog list is not unknown element it doesn't knows what is this because it does not finds this app blog list why does it says that is if you would notice in app dot module dot TS we have app component but the blog list component is defined in a crowding dot module dot tears and we added the blog list selector inside the app component and app component doesn't recognizes the blog list so we have to basically export the blog list component so that it is available to the app component dot HTML now if you would notice the error is call and we got the output blog list works and if you see this output is inside the blog list dot component dot HTML let's modify this for the list of blogs so I will be having let's stop blogs so then we have this list of blocks in the center we have to create many blocks so let's open the blog list what component of TS and here we will be creating few block objects and we will display on the list and then we will be learning that how how basically angular displays that list of blocks that we create in the component in the HTML page for creating that I will be creating few files so again you go inside the app folder create a new folder with the name as model and inside this create a new file with the name as blog hub dot tears create a class and trailers class will add few properties for the class block so we just have ID we have title we have description and we have category for this class block let's create a list of blocks so I will be creating again a file with the name as blog list dot TS and we'll be creating few blocks so we have this four block objects and we import blocks from the blog have module and we create the four objects so let's go ahead and blog list or components here we will be creating a property called as blocks which will be of type block array in the constructor so ideally the initialization part is always suggested that you do it in the init so I will say this dot blocks is equals to I have to import it from the blocks so can you see it so so I have to import so I select the second one if you see the first why it is a property inside over here I want to go with the can run and you can see it imports the blocks from the model blog list now once this is initialized I have this blocks property this blocks property consists of block of chicks and I want to display those block of chicks on the HTML page so for this blog list component we have the block list dot component dot HTML here and we want to display the list of blocks so let's go ahead and do that again for a list of blocks because we have many items either you can take a UL tag or you can have various defects so suppose I take a div and inside this we will be having the various block objects but how do you basically tell angular that hey I have this blog array over here and because it's cell array we have to iterate over the array that means we need to be able to use something like a for loop iterate over it get one one block object and then display the contents of that block object to do that angular provides you with a directive that is star in g4 and the syntax is I say let block off and the property name is blocks the moment I do this I can see if I want to access the block object I can just say block and curly braces now let's see what happens once we do this oh we have an error so let's see what is it in the console okay it says it cannot bind to ng 4 if you get this error that means there is something that's missing now what is that is when you open after routing dot module dot TS the blog list component is configured over here and we have to then import one more module and that is browser module so if you open app dot module dot TS you would see we have the browser module over here copy this and just paste it over here so we need this browser module which is from the angular platform browser and just copy this because this browser module is the one which has the implementations for the ng4 and this browser module is not in this module but blog list component is declared inside this module hence we also have to declare the browser module over here now the moment I do this I save it and if we see can you see now I am getting the list of objects but it is just as playing object object object object I definitely don't want this I want to I want the properties of the block that is title description and category to do that I can go here and I can say block dot title so can you see now I have the titles let's remove the h1 from here fine so now we have the list of blocks let's decorate this a bit and also let's go ahead and add the other stuff so title description and category and I will be just applying styles to this particular diff so that it's decorated so just added few styles and now if you go ahead and see okay so we have this list of blocks and CSS is up to you how do you want to decorate them so this applied few Styles added this ideas list to the diff and now if you see the output we just have these four blocks with some colors and CSS so this is how you can basically add a component you can add the selector in the show app component is the parent component for the blog list component blog list components displays the list of blogs there is one more directive that you can use so for example if there are no items in the blocks I can say they've start ng-if so I'm comparing for the condition if blogs dot length so we already know the length attribute of the alleys is zero that means there are no items I just want to display div so just add it if the length is zero that means there is there are no blocks be the first one to create a blocks or if I can say my blog start list is greater than zero only then go ahead and display this list of blogs so right now if you would see ever get the same output no difference only if I go to blog list what component dot HTML if I go to blog list what component dot tears and if I save this as an empty array I just do this if I save it now can you see it says be the first one to create a blog so you can use the if directive to check for the conditions and if the condition is true only then go ahead and display the list of blogs let's go ahead and modify this so this is how we can display the list of blogs and use the event for structural directives to modify the HTML elements dynamically we can add the selectors in the HTML file we would need one more component and that is the form so that we can let the users add blogs of their choice again for creating the form we'll be using the same syntax and I will be same I'm just instead of blog list we will change this to blog form so it adds up and let's export this as well again if you go to block form dot component H block formed what component or TS you have a selector remember this app and this app - is just the default if you want to change this app - to anything else opposed I want just to keep it app just to keep it block form I can do that as well and I can go to app component dot HTML and here let's say I'll add a form so I say this if you open the block form that component it just has a content displaying block form works and if you see the output remains the same we do have a form so let's just add the few HTML stuff inside this where I will be creating just a form so just a simple form I will add some CSS to it so you can see we have a form this category is empty so we'll be filling in this as well so we have this form and we have this little category of categories so open block form dot component TS and add a categories property which will be of type re so we'll have a categories initialized with these values so we have technical personal ad nature yeah so user will be adding values the title and the description and select a category we have to take that data now to be able to do that in the block form dot component dot HTML so let's close all of this it's confusing so we'll have block form and the TS file okay now here I want to be able to fetch the values so in angular it provides you with a special variable that you can associate to so I can say hash block form is equals to mg for the moment to do this your associate and if you would notice there is an error and the error it says this there is no directive in G form for a firm to be able to access data of these form elements you have to inject the special directive ng form and for angular to be able to process that in act routing dot module dot tears just say input angular fonts and here you have forms module and just you have to provide in the in the imports as well so in the imports grows all the angular specific modules declaration goes all the components and exports is whatever you want to export to the main module that is app dot module dot tears now once you do this you can see I'm able to access the form if I go ahead and here just display see div and I use block form because that's the variable name has created and I can say block form dot value perform value block form dot value just go ahead and let's see what it displays so we have form value and you can see it's object object now this is something which you don't want we want the form this block form basically should be able to display the values in the title description and category that we select or we type it to do that I will have to add a pipe the pipes and angular are nothing but they are just used for formatting the data for the presentation so for example here I say J sir if you go to blog list dot component dot HTML you want the category to be printed in sake caps you can say pipe and you can use a pipe called as uppercase and let me move this category before the title now if you see the category uppercase and if you see the output you will see all the categories are in capital and here now I have empty JSON object for angular to access these form elements you have to add a special directive to every form element and that is ng-model so here I will be adding ng model same I will be adding over here for the type description and same we will add it for the drop top McKenna C title description and category and of course they are empty the moment I start typing C the block form gets updated right I can click on the create button we have seen how to handle the event binding so let's go ahead write the event binding for the butter and get this data and pass this data to the list of blocks so that it gets updated over here so in my blog form that component dot HTML when I click on the submit button it's a type of submit the form on submit event gets fired so let's handle the submit event and I'll say insert and I'll pass in this blog form dot value let's create in the block form that component or TS let's have this insert function something will have a variable that is able to access the data Bastien when i click on the block submit form and if I just see alert and block let's see if I am able to get the data in the block form component or TS and once I'm able to do it next we will see how we can update the blog list which is in the blog list component dot HTML I type in angular web framework I select a category I click on create an object is passed so displays this way we can actually access the values so I can go in block format component or TS and suppose here I say block dot title if you would notice I again enter angular and I say web framework I click on a category and I say create can you see we got the title now just that because we have got this blog object we should be able to pass this block object to the list of blogs now to pass the data we have one more important building block in angular and that is services so let's go ahead and create a service as well so inside the app folder I create a new folder called as service in this service folder I'll open in terminal and I say ngg I want to create a service I say s and I will be having a block service so maybe I'll just say block so you can see it created a block service tortillas so inside the service I have this block service tortillas you can see one more thing to notice it angular provides you with various decorators so whenever you have act symbol they are called as decorators so we had a decorator in app dot module with an NG module which basically decorates us class with mode attributes to parcel same way for every component you would see a decorator at component this decorator basically modifies the behavior of this class and tells angular that this is a special class which is going to act as a component with a special with a special functionality that it is going to represent the HTML page and bind the data with the view same way the moment we have service it has a decorator at injectable so angular knows that this particular class is kind of service which can be used by any components in the project and because it can be used by components in the project it uses dependency injection remember we discuss dependency injection so any component has a dependency on this class it has to be injected hence the name at injectable so here I will be creating a blocks array and which I will see to be of tall type blog array I want to initialize this I will initialize this from the blocks importing it from the model block list so now we are moving so now what we are doing is instead of the component directly accessing the block list by normos service accesses this blocks list and whenever my form creates a block I'm going to update this list so I will say app add block I am going to get a block object from the form so from form is going to call this add block and I'll say this dot blocks dot suppose and shift and is again a JavaScript method it's with respect to JavaScript arrays so you can check on w3schools if you don't know about what is unshipped and I'm going to add this block let's just print after I add what it prints okay now my block form dot component we'll go ahead and modify this and here now this form has a dependency on the service because it has to call the add block method of the service now the video inject the service is in the constructor so I will say service which is of type blocks service the moment you do this it auto imports it for you and then here I can see this dot service dot add blog passing in the block object I'll remove this alert now from here and I can just add a console dot log inserting that's it now if you go ahead I have this let me open the console I add angular I'll say framework I select a category I say create can you see inserting and then block service now instead of four I have five of chicks okay I want to add the ID so in the block service tortillas let me do this so I will say idea is private so I cannot access so a let's modify that here in blog hub dot tears I'll make this public so the service can access that's it how the moment I do this again you would see suppose I see angular I select a category I click on create inserting and now can you see title category and it also has an ID so it gets the length and it adds an ID for the same so I'll have to do in the service ID Lent plus one because it the ID should be five and not four so then let's say I again enter a title html5 design I select technical I create now okay so we have the ID yes fine so you saw that we have the block they are able to access it in the form and it is added and at the same time if you would notice it also gets added in the list of blocks can you see we just had at HTML size it is there now why is this is happening is in my block service dot TS you can say this blocks array is referring to the blocks which is defined in the blog list and inside this blog list we have this block which is also referred by blog list dot component dot TS so the moment anyone changes the blog list it it gets automatically updated to all the other components and that's perfectly fine because that's it because this is what we need and this is why services are used so the moment service updates those blogs re my list component who is referring to the blocks array because it's a reference so we have the blocks which is defined in the service so we have the blocks which is defined in the service which is basically accessing the blocks which is defined in the blog list dot tears so this service updates us blogs are a which is referring to the blocks inside the blog list or tears it automatically gets updated for the list component as well but in real time scenarios we won't have static data lying in our application this data will be actually coming in from the database so your blog list component dot tears should actually be referring to the blog list defined in the service so let's modify this code again this blog list has a dependency on the service so I'll create a variable which will be of type block service and then instead of this I will say this dot service and let me create a get blocks method over here so I'll say get blocks and this is ideally how you should do it return the start blocks and in a blog list here then you can save this dot service dot get blocks and in the block service please keep this as private now if we go of course everything remains the same it does get state off from the service I can add new data so suppose I can see over here Tinh Singapore trip I add and I'll see amazing experience I select personal I click on create you can see it's added so this is how basically you create angular project you have components you add various components you create services which allows you to share data across your components so this is all fine till here we are able to create add bootstrap create a form update data and all let's add routing so here you can see everything is on single place but yes angular comes in with single page applications but also we have to provide routes so to do that instead of adding in a broad component of HTML adding these components directly we'll be creating links I will be using bootstrap navigation bar to add the link so let's add that HTML code so I've just added the navigation bar of the bootstrap added some styles to it so this I'll leave it to you how do you want to style your applications and then we have these two links create block and blocks but then when I click on create blog how it is angular knows what to display on the clip of create block or what to display on the click of blocks for that open the app routing module dot tears and this is the array where we configure our routes so I am seeing if my part is say list okay for this path the component responsible to display the data is blog list component and the same thing we do it for the form so when I say when I click on create the component responsible for displaying the data is block form component let's add these routes to the app component HTML here I will be saying eh so you add router link is equals to slash create and the same thing you do it for the blogs as a soar outer link is equals to list now when I click on create your anger needs to know where to display the content for this create blog that is in the block format component HTML for that you will have to add a router outlet so I will be adding a tag over here saying router outlet again this is the angular specific tag at the moment I do this you click on create block it displays the form component you click on block it displays the list of blogs can you see it's so beautiful you can create a click on create blog you can add the data so suppose I say a new title I say new description I add something I say personal I click on create I say blocks and can you see it's added over here so this is how you can create paths and the moment you create routes if you would notice the URL or so changes this is very important when you go with routing that the URL has to change so that when i refresh the spirit I get the same view with this we come to an end of this video happy learning take care and bye bye

Channel: Telusko

Views: 48,700

Keywords: telusko, navin, reddy, tutorial, java, python, blockchain, django

Id: W5dEbsHrb9k

Length: 55min 56sec (3356 seconds)

Published: Sat Feb 22 2020