Angular2 for beginners in easy and funny way

this is angular2 for dummies now if you ask me what is angular I will recommend you to stop this video and go to the 69th honeymoon with jQuery this tutorial has five parts in the first part I will talk about four simple steps that anyone can do to create an angular 2 application without knowing a damn thing I will call this part resumee driven development in the second but I will show the best architecture to create an angular 2 application we'll talk about the components and a little bit about angular CLI and if needed we will search something on the Google that's why this part will be called google driven development in the third part I will show you how to load data from the server and show it in the UI of course being a developer you will create an ugly UI and that's why your manager will yell at you later I will show you how to use material design to make UI fancier and this part I will call managerial driven development in the fourth part I will show how you create multiple routes view components and pass parameter in a route by spending all time in the weekends and this part I will call no social life driven development in the fifth part I will show how you build deploy and run unit tests in an angular 2 application and if there is an issue in production how you will spend all nights to chase a bug in production that's why this part will be called production broken driven development let's start with resume driven development the goal here is to give four simple steps that anyone can follow to create an angular 2 application and then see it running in the browser before we start make sure you have node installed in your machine in any case if you don't have node installed just go to google and search for node download and if you click on the first link you will go to the node website and from there you would be able to download and install node in your machine one optional thing if you want to use the same code editor that I would be using feel free to download Visual Studio code from code dot visual studio comm now we will simply go to Google and search for angular CLI and if you click on the first link you will go to the github pays off angular CLI and if we scroll down you will see that command that you need to run to install angular CLI in your machine now we will open the command line for a poor developer who doesn't have a Mac so the first step to create an angular 2 application is to install angular CLI in your machine and to install the angular CLI we will follow exactly the same command written in the github page so we will type NPM install Z at angular slash CLI and press Enter this will take few minutes to install angular CLI in your machine when the CLI installation is done we will go to the github page and if we scroll little bit you will see generating and serving an angular project and we will follow the next steps written here so our second step is to be create an angular 2 project by using this command NZ new and then name of the project so we will go back to the command line and type NZ new give a name to our project and we will give the name smartly so that it sounds like we are doing a serious development like we are building an application for a big corporate or a bank that's why we will name it as a then Guler bank and after that we will press Enter it will take few minutes to create the application when this is done you will see Project Bangalore Bank successfully created this is our second step the third step is CD project name then we will type exactly the same thing city and our project name is Bangalore Bank and by doing this we will go inside the directory of the project that we just created so third step is done very simple and the fourth and last step is to type and this herb we will do exactly the same thing NZ and then Serb will press ENTER it will take few second and when it is done you would be able to go HTTP localhost 4200 and see the application running now we will go to the browser and open localhost 4200 and we will see app works it says app works it doesn't says hello world a true developer would not be happy to see app works he wants see hello world so I will open the code editor I have Visual Studio code installed in this machine in the Visual Studio code go to file and then open folder from there find the place where you have the Bengal er Bank directory and then select folder after that Visual Studio code will load your project here and you will see a lot of files here ignore all of them just pay attention to the SRC folder expand it and then you will see bunch of other folder just pay attention to the app folder and then expand it and you will see few other files and we will just click on app dot component dot TS and if you open the app dot component dot TS you will see at the bottom of the page app works now we will go to the browser and put it on the right side and put the code editor to the left side now we will change this app works to our familiar hello world so we will type hello and go Lulu baby and then if we hit save within a second you will see that browser will get loaded and you will see hello angle Lulu baby that's all now you know four simple steps to create an angular 2 application the first step is to install angular CLI by executing this command second step is to create a project third step to go inside the directory and the final step is to hit and this herb so you are done with angular 2 now feel free to add angular 2 in your resumee if you are a freelance developer or a consultant you can also add angular CLI and typescript in your resume now we will talk about the second part of this tutorial which is google driven development and in this part we will talk about the best architecture for an angular 2 application how you can create and man is a component how we can do different templating and binding before getting started I want to tell you a secret that if you are interested to make a relationship with angular 2 you should know that angular 2 carries two stepchildren and also you might have to deal with an unwanted stepdad called typescript don't worry much about this stepdad and stepchildren in this tutorial we have used angular CLI to create angular 2 application if you go to the visual studio you will see like we have like a lot of files don't pay much attention and this we just open the package store Jason and you will see in this part the dependencies you have bunch of module of angular time total we will import those or get those in our component and these are to a stepchild the rxjs John Doerr Jas and here is the dev dependencies which you need just for the development purpose in your machine and angular CLI is one of them and bunch of jasmine and karma to create and run unit tests and the last part is your stepdad type script in the folder structure you have into end testing don't have too much pay attention right now and node modules this is where all this module stays for your development purpose and this is the main folder you have to go which is the source code inside source you have seen the app component and few other files like assets where you will have your as bizzy's or any other acid this is the different environment related configuration if you need this is the lending HTML or index dot HTML and most of the time we don't have to touch anything there and few others about your central styles and the taste and few other conflicts that we don't need to worry much about right now we will first create a component and then look into different pieces of a component and to see how a component could be created we will go to the github page of angular CLI and after scrolling little bit you will see ng generate component and you will give the name of the component or a short from which is like ng g G stands for generate and you will write component and the name of the component so we will follow exactly the same thing by going to the command line interface first we will press control C to terminate the current execution of the code and then we will type nzg component and name of the component will give circular and if I press ENTER it will create four files updated one file we will look into the update pod little later first we go to the visual studio cord this is the circular folder the component we have created you can think of a component as a room in your house and it has four pieces the first part is CSS that's why it's called circular dot component dot CSS that means this is the style for circular component this is like a painter guy who puts color on the wall or any other things the second part is circular component dot HTML where all the structural layout of the room exists this is like architect the third part is unities is like a stepchild you don't care much about at the beginning who might give you pain later and the fourth part is circular dot component dot TS which is the most powerful part of this component you can think of it as your girlfriend who makes all the decision about your house if you open CSS first at the beginning is empty that means there is no style here if you open the HTML file you will have a simple paragraph tag which says circular works we will skip this step child right now and we'll go to the most powerful part of this component if you look into this component you will see at top we are importing two things from angular core we are importing the component so that we can create a component class here and we are importing something called on in it and here some information about this component what it says is say select or apps circular app in front of it because it is under the app and then circular is the name of your component and then it says the template URL is component dot HTML which is this file and this is component dot CSS which is the style at the bottom of this file you will see like export class circular component implements on in it this is a circular component class that implements on init from angular core and inside it you have the constructor of any class n then NZ on in it this NZ on in it is an event hook that would be executed every time this class is initiated there are a few other event who could be added it to angular component if you want to know more about event hook you can go to google and search for angular 2 component lifecycle and if you click on the first search result you will go to the angular document and there is bunch of other event hook if you're needed you can spend your weekend to know more about them we will go back to the component now we'll see the binding and templating how this thing happens since this is a class it could have properties here I will make this property public and then I will name it as happy text happiest time for me is manager he is on vacation now my goal is to display this property in the HTML so what I will do I will go to the HTML which has circular works I will create another paragraph tag the goal of this paragraph tag will be bind to the happy text property I have created to make this binding happen I have to do two curly braces inside this I will write happy text the property and save it now I will run the code so I will type ng serve here and I will go to the browser so I will do localhost 4200 that I see hello angle Lulu baby but I don't see anything circular works or the happy text to see it in the browser what I have to do I have to go to AB dot component or HTML because it's currently showing whatever in that is tml so if I go there and I need to add circular component in this HTML because this is the opening HTML I have to go to the circular component dot TS and know the selector this is the selector for this component if I copy it and create an HTML tag in the app dot component HTML with this so I will do have circular and create an HTML tag here this is how we are using circular component here in the app dot HTML and now if we go to the browser will see circular works and manager is on vacation now the question is like why we need to add it in the app components because of F dot module ts that we didn't talked about before so AB dot module dot TS is the gate of your house so if you open the app that module 30s you will see like bunch of import from angular and input of two component one is the app component that angular CLI created and second one is the circular component that you have created and you see that you declare two things app component and circular component and below it there are few other things is imports we don't need to worry about right now about that providers and bootstrap so these boosters tails which component you will starts with since this application is starting with app component that's why it was showing an app component as default and if you want to add something in this app component we have to put it in the app component dot HTML file that's what we did it here that's so it shows manager is on vacation if I add more HTML here like I create an s3 and I write I am Django Lulu I am the partner of anga Lulu save it you will see this will get immediately reflected and in this browser this part is your ab dot component and this is your circular component if we go back to the circular component dot TS we have seen ng on it so in the initialization we want to change the text we want to change this text that means we want to change the value of happy text to access happy text we have to write this dot happy text and we'll set values and another happy moment for us would be manager is sick if the manager isn't feeling very well he would not be in office and we'd be happier now if we go to the browser we see manager is sick so this is the simple way of unbinding but if you want to bind to an event for example we want to create a button that will change the value of this happy text so we will do here create a button and this button will have text make me happier so this will have a click handler first go to this component and create the click handler we'll create an event handler we will name it make happier and we will use the same approach to change happy texts so we will type that these start happy texts and the most happiest news for us is men easier got fired if I save it and if I go to the UI this will not do anything because button doesn't have an event bind to this method we just created so we will go to the HTML and we will create an event binding the name of the event is click and the method we want to bind we already created here so we'll just copy make happier and here we will paste it and then we'll give curly braces if we put the curly braces that angular node this is a method execution we will save it and now we'll go to the browser if you get here you will see manager is sick if you want make yourself more happier you will click this button and you will see a manager got fired the last binding we will look into is binding to a collection say for example if I have a array of to-do lists so I will create a property and I will definitely make it public and name of the property is my two dues and I will have a collection bunch of tasks here so the first to do is wash coffee mug second to do is take a shower and third to do is say hi to the new hire and we will stick to this three tasks for now in the UI we will look through these items and bind to a list that's why we're here we will come and create an ordered list and then we will have multiple list item and this list item we will do star and z4 and inside this we will create a block variable let to do of my two dues and then inside it we will put like curly braces to do and then angular will look through all the items in the 2-dose and bind to the Dom and if you go to the browser you will see all the three items here like other items if you go to the component and add a new item in your collection shampoo your here and if you save it you come to the browser you will see like the browser reloaded and added a new to the list for you that's all about part 2 of this tutorial we talked very high-level of the architecture of an angular 2 application we talked about component how you can create them and then we talked about template binding and also how you can bind event to an angular application let's start the third part of this tutorial manager CL driven development in this part we will work with a realistic example where we will have a search box and you will be typing some text and have a button that you click and it will go to the server side and face some data from the server and display those search result in the UI use this we will create a component and we have seen how to create a component so we will go to the command line API terminate the current processing create a component and ZG component and we'll give it a name called search so that we can search in this component and within a few seconds it will create a component as usual and to see this component is working correctly we will hit ng surface and then we will go to our app dot component dot HTML file well currently we are using apps or cooler instead of this guy so we'll get rid of this guy and we would like to add search component here you will see in the folder you already have the search component and if you open the component here you will see the selector app search so we will copy this guy and if we create the HTML tag then we will save it and we have to go to the browser and we'll see search works that's how we know that search component is currently getting displayed here our goal here to have a input text and a button so let's do that in the search dot component dot HTML we'll open it and get rid of this search works we'll get an input tag under it we will create a button the X on the button is called search if we save it now go to the browser you will see this get reloaded to a text box where you can type when this is fully functional you'd be able to click on the search and he will display the search result below this text box to load data from the server the best practice is to use a service and if you are not familiar with a service service is something like somebody provides some kind of service that's so it's called service for example if you think of Amazon and you provide some instruction may be some send some money then it send items to your home that means they are providing a service and you give them some command since we are using angular CLI for this tutorial creating a service is super easy we will go to the database of angular CLI and if we scroll little bit you will see bunch of scaffold command and one of them is service and it's pretty similar to the one we are familiar with ngg service and the name of the service so we will go to the command line and we will stop current execution and we'll use this command nzg service we'd like to create this service inside a directory so we will give the name of the directory and then we will provide name of the service and in this example I would like to use github API to search users who have profile in github that's why I will create a folder called github inside it I will create a service with same name github if I press enter it will create two files and give me a warning created the service pack which is the test file and it also created a service file and there's a warning the warning you should pay little attention in this time it says service is generated but not provided it must be provided to be used so keep this in mind and we will run and deserve so that our code is always running now we will go to the visual studio code and if you scroll you will see a like a github folder inside this you have two files one is the service another one is the unit test if you open the service you will see you as usual have something from angular core importing the injectable that's on top of your serve glass and it has a plane constructor to make an HTTP call you have to import the HTTP module in your service so we will use import and and this input would be from angular so we will type angular and slash HTTP and then we want to import the HTTP we will just type HTTP HTTP will be imported second thing we have to do we have to create a property in this class so that we can use the HTTP module from any method we create in this class so we will create a private HTTP and then this would be type of HTTP if you didn't saw this cullinan and then is some kind of name this is declaring type by using the type script so if you are not familiar with typescript I will recommend to Google typescript and spend some time about typescript the goal of this service is to load data from the server so we will create a method here called get user and first we will not return anything from here for now we will use a hard-coded search text so that's why we will create a constant search text and we will set a value as j/s and then we will have the api's for the server-side in this example I will use github API where I can call an API by providing a search text and API will return me all the user profiles which matches this name we create a constant of URL which is a link to the github API s and it is HTTP and then API dot github.com slash arts slash users and after that we pass a query parameter Q is equals to and since we want to use this hard-coded text for now we will add search text here and after this we need to use this HTTP property of this service and we will do it by typing this dot HTTP and then we will see multiple method that HTTP can do in our case right now we will use the get and then pass this you our L after this we will call the SUBSCRIBE method and inside this subscribe method we will use an input parameter press which means response and we will use the es6 arrow function inside this we will create a constant name data and the value of data would be raised dot JSON so what we are doing here we are using HTTP to call this api's and then we are subscribing to the API call when this is done we are getting a response and after getting the response this is our callback function where we convert the response to a JSON and set it to a constant data after that we will console.log this so that we want to make sure that we are getting returned from the API s and then we will return this to whoever is calling this the next step is to call this method from the search component that we have created so we will go to the search component and the most powerful file in the search component is search component dot TS we will get here and if you remember there was a warning when we created the github service it says that it's created but not provided so we have to do the providing work here first we will import that service here and I know that it is in the github folder so I will go to the github folder and then get the github service and from this github service I want to import the github service which is very simple and then you see on top of the search component there are few metadata like the select your template URL and style URLs I need to add one more here so I will add a providers and providers takes a collection and we will provide github service in it so the providing part is done the next part is to add a property through which we can use this github service and adding a property during construction of this class is very simple we have done it before we'll just create private give it a name github service and the type of this service would be github service if you are not familiar with typescript this might look little odd to you this is just telling that the type the strongly type of this property is github service so we'll have access to this github service next thing we will do we will add a call to this github service from this method and what we will do we will use this dot github service and call this method get user for now a quick way of checking whether the our call to the service is working or not now if we save this and go to the browser and we will not see any visible changes but if you open the dev tool and go to the console tab you will see there is something is logged as object if you expand this log you will see total count 39,000 and it also have a collection of items and if you expand this you will see some people's github profile where you will see some information about the user profile so we are successfully making a call to the server and getting some data our next step would be to display this data in the website we have to do few more things to show this data to the website first we need to go to the service and do some work in the service so if you go to the github service right now this method does not return anything and so we have to return something and to do the return we have to take some help from the stepchild that your girlfriend angular2 has and that is rxjs so we will import rxjs here and we'll load it from rxjs /rx and from there we will load something called observable so that we can make this method observable to return something from this method we will use this method and we will type observable and we want to observable of anything from this method and you will see like the rate is squiggly line here because this method isn't returning any observable right now we have to do two more changes here previously we have a subscribe here that's why we were consuming the changes here now we want to move this subscribe in our component so that we can consume the JSON from there and that's why we will convert this subscribe to map so that we will go through every response every time it comes we will convert it in a JSON and then return the data and we still see the squiggly line because this function isn't returning any observable we just have to add a return in front of this gate so if you add a return in front of it the dead squiggly line is gone and that's how you create a method that calls to the server and then returns the data the last thing we need to do here is to get rid of this hard-coded subtext and take it as a input parameter so we will copy this guy take it as a input parameter and then get rid of this line and that's how we will take an input parameter of the search text we will add it as a query parameter and the last part of this API call and then we will make an HTTP call we will get it returned from here and if we save it we will get an error in the search component because here we take an input parameter to this method but we are not providing any parameter from this so this is some goodness of type script that if your signature doesn't match it will give you an exception in the code editor as well as during compilation we will create a property in this class and that's why we will have public and name of the property would be search text and this would be the search text we will getting from the input X box and to get the value from an input X box we have to do few more steps first we have to create a on key up event handler for this so we will get an event name key up and we will create method named on key up and we will pass the event object to this method and we will save this guy we will go to the component and then we will create here on key up and we take the event as an input and inside it we will set the value of the search text so this dot search text would be value of the event dot target dot value so whatever the value in the even that's happening in the input text board would be said to this search box and we also have to change this guy to the click handler of the button so we will go to the HTML we will create a click handler for this and we will type click and then we will create a method get users and we will call this method from here we save this guy we will go to the component and create another method get users now we have to move this call to the service inside the gate user so we'll just take it from there and then we will paste it here and we have to pass the parameter that's why the red is quickly line so we will pass this dot search text and then we have to subscribe if we don't put the SUBSCRIBE it will not make the call to the service so we will do the SUBSCRIBE and inside this subscribe we will pass a callback function that will take like the response and we will use the es6 Aerobed function inside this we will just console.log to the response we are getting as we all need now make sure this part is working then we will worry about the binding to the UI we'll go to the browser it should be reloaded by now and if we type J s and we search we get the response in two different places so we are getting this one is in the github service this one is search component so far so good so what we will do now we will show this result we see there are few properties that return one is total count let's show that total count first so we will go to the component and then when we get this result set we will set it to a property we will have the two properties and the first one will be public type search result and in the search result we will be just set it here by typing this dot search result and the value of the search result would be the response we could have extra properties here if we want and that would be the search count and the value of the search count we would set here and that would be like this dot search count is equals to race dot total underscore count and we will save this guy our next step is to bind the search count to the HTML and we know how to do it we will go to the HTML below we will have a paragraph where we will bind this to the source count and we know this is such count and we'll save it now we will go to the browser and this gets loaded and we'll type J ass maybe lower this guy little bit and we'll head yes we will see that 39 thousand results is here and if we want to bind the result here for example we have like 30 items and we can below we can look into the items we are returning and every item has a login name we will try to display the login name in the search result so what we will do we will go here and then we will create a list item which would be oh L here and inside it we will create a list item where we will loop through the items and we have done this before this is nz4 and inside it we will create a block variable lit and we will say user of search result dot items because all the profiles is under items of search result and we will deeply user dot login if we save it now go to the browser if we have done correctly but we see an error message and what it says it says items of undefined it cannot read the items of undefined why this is happening the reason is happening is in the beginning we don't have any search result search result is undefined and that's why javascript is breaking because it cannot get the values of items from an undefined so what we can do we can add a condition here star and Z if which tells that only run this HTML when you have values of search result and we will save it now we will go to the browser and looks like it's got reloaded or we will reload again and we will see there is no exception and we can do the search again here so for example we search for Jas again and we get bunch of fast 30 users here since we get this opportunity to search user we will use it for our personal interest so we want to see which of the users has single in their profile we will type single and hit Search we'll get single off oh how dare is the single old single Eric single Flay we can use it more personal use because there are 1389 and I just need only one after showing this UI to my manager he starts yelling at me of course I didn't show with the single example I showed it with angular or some kind of serious text search and I found 2500 users name but he still continues to yelling at me because this looks very ugly so I spent some time to search for some other framework and I get to know angular material so what I did I went to Google and search for angular 2 material and from the search result if I go to the first link I will see angular 2 material github page and if you scroll down you will see getting started guide and if I click on this getting started guide I will see step by step to install angular 2 material in my project so in the first one you will see npm install save angular material so i will go to the command line API and I will press control C to stop current execution and then I will type as it is npm install and then save at angular slash material and after pressing enter this will install angular material in this project so that I can use all the goodness of angular material in my current project the next step in their website is animation and since in this tutorial we will not worry much about animation we will skip this part and will go to step 3 where it says how you can import angular material in your project and to do that you have to do two things first you have to import material module in your app dot module dot T file and then inside add NZ module you have to import material module now I will go to the Visual Studio code and open the app dot module dot TS file and inside this file we will first import the angular material that we have seen right now and that would be from at angular slash material and from this module we will just import the material module when we get the material module in this file the next thing we will do we will import material module to this module and to do this we will type material module inside this import collection we'll just press comma type material module the next step is to get the components from the material designs I will search again angular 2 material and then I will see that this is their website angular material so you will see bunch of components here and we will use a card here and there are few examples of card here maybe we can use something like this and if we look into the code view sources this is the HTML it has some type of script and then it has some CSS so what we'll do we'll just copy this card and then we will paste it in our search component which is here and instead of this guy we will have card here and this card would be repeated every single time and what we will do we will get rid up like a lot of stuff here so we will get rid of this paragraph tag and then instead of card title we will put this user login here so we will take out this ng4 from here and we will repeat md card for this purpose and we will use this user dot login has a title of this card and then we'll get rid this list item we will the save this and then we will start running our project by using ng serve when this is done we will go to the browser and then we will search something again with single and then click this search we will have a lot of card here but with the image is broken so we will get the right link of the image if we hit the f12 we will get a failed word for the image this is the broken image but if we expand the object and the items every item M has a link to the avatar so what we will do we will use user then avatar URL so instead of the source he means what we will use wheel is the avatar image you will get rid of this guy and this you DV user dot avatar underscore URL and we have to change this source property as an attribute binding so we will just put it in a box bracket and we'll save it and we will go to the browser and then we will search for again some takes like single and then if you search Center we will get the image of the user which is really big size we can work on this to make it smaller we will create a CSS class and we'll give it a name as a like a profile image now we will go to the CSS of this component which is search component dot CS and we will set the profile image class profile image and maybe we will give a height of 50 pixel and then width of 50 pixel will save this guy and go to the browser when the browser gets loaded we will search again single and then we will hit on this button we will see the thumbnails and the user's name we need to guard little smaller and put some styling we will do some cleanup in this guard so we'll get rid of like card subtitle so that it's little cleaner here we will also get rid of this card contained and the like action those things then we will add some style to this card so what we will do we will go to the CSS and then we will apply some style I will give some width which would be hundred pixel and then I will float them to the left and then I will give some margin of five pixel I will save this guy and I will let the browser reload when browser is reloaded I will search for married people so that I can exclude them from my connection here you will see the card of different user and this might save your manager ceiling for one day this is all we wanted to talk about in the part 3 we talked about how to create this search component which included input Xbox a button displays number of search result that matches with the text and show them in a nicer way by using material design we also created a service called github service and inside this service we used a method to make a steady P call to the server we also talked with stepchild of angular 2 who is his rxjs to make this service working the way we wanted this is the port part of this tutorial and in this part we will talk about how you can create routing in angular 2 application and by using routing how you can go to multiple components and if needed how you can pass a parameter to air out first we will go to Google and search for angular 2 routing and after getting the search result we will go to the first link in this first link if you scroll little bit you will see a lot of contents and first one is routing import so how you can import routing in from the angular core module if you scroll little bit you will see how you can define your route so this is the routes from angular module and you declare multiple routes here and to declare a route you need minimum two things first one is the path this is the slash URL that you will put in the URL and this is the component that would be displayed when you go to this path in your browser and then we have to import the route definition in our module so let's go to the visual studio code and to create routing in this application we will follow four step number one we will create a separate file so that our route definition is nice and tidy in a separate file we will just right click this and then click new file we will give it a name AB dot routes dot TS and then here we will import the route definition from angular router will just type import from at angular slash router and we will bring routes here to declare the route for our application and then we will export a Coniston and the name would be a Prout's this would be type of routes which we will define by a collection in this collection we will define all the definition of the route if you remember we have created two component before one was our circular component another was such component so what we will do we will define path for these two component the first one would be circular we will say the path and the path we will give circular and then we will define the component and to define the component we have to import the component to this file we have done this 4 million times so we will just import and we will input circular component we know where is the circular component the start circular and then we will go to circular component TS and here obviously we will type circular component and then we will add circular component here so we have declared the first route for our application if we type circular in the URL it will come to this circular component since we are in the same place we will create another route here that will go for the search so the path would be search and then we will go to the search component so the component we will import the search component same way we did imported the circular we will import and then from we will do search and then search component and here obviously we will type search component and the last part is to define the search component here so we are done with defining the component the next step would be to import this component in our app dot module file so we will save this guy and we will open the app dot module start es file in this file first we have to input the route definition will import the app routes that we just declare so we will just type here from and we will import app dot routes it will come here and the value we want to import is a Prout's and if you remember the documents we have seen in the angular 2 web site we have to import the router module and then set the route definition for the route so we will go back to the code so we will import the router module from angular library so we will type import and then from we will do at angular slash router and from the router we need the router module so we will type router module then we will scroll down and we find the imports here so we will do like router module and in the router module we will say for route because this we want to set for the route of our application and we have to pass the router definition and we already imported this before that is AB droughts type comma then we are set for app modules so we are done with three steps we created the our app routes we imported the router module and we also imported the our routing definition and then set it we will save this guy to know about the last step we have to go to the documents once again and in the document if he scroll little down you will see that router outlet so that angular 2 knows that where it should display the component this part will make more sense when we are done with this let's go to the visual studio code and this time we will go to the app component dot HTML this is the landing component where we have to tag the first one is the h1 the title and second one is the search component if we go to the browser open our website you will see this is the h1 the title and these part come from the search component what we want to do we want to keep this title constant in every doubt and we want to vary this part so if we go to the circular path we want circular component to be displayed here and if we go to the search we want to display the search component here and to do this we have to just change this one so if we remove this guy you will see only the title of the website and and here we will add the last part of the routing task we will add router outlet here this would be the outlet where all the component would be displayed and we will close this tag so now we will go to the browser and if we come here and type slash circular we should see the circular component below it if you remember correctly this is the circular component and this comes from your parent component that title and if we change the route to search so we will just change the circular to search and if we press ENTER you will see the search component getting displayed and all the functionalities should hold here for example if we type single here and search we will get the search single result here as well so to do the basic routing we did four step first we did we create the route definition here where we declared what would be our different route and then we go to the AB dot modules and then we imported the route definition as well as we imported the routing module from angular code and then we import it and say that you should use this route definition at the root of this application and the last part we did we went to the app components and defined where this would be displayed now we want to implement the route parameter what the route parameter will do it will do based on the click it will display detail information about the user and if you click on this it will go to the same component but taking a separate parameter so to do route with parameter we will first declare a component where we will display this user information so we will go to our command line we will stop it by pressing control C and we will create a component and see the component and we will give it a name as a user component so after creating this component we will go to our route definition and in the route definition we will import the user component it would be from user and then user component and we will definitely import the user component here and while we would be creating this path we will have to declare that what would be the variable name of the route parameter so first we will do as usual create a path in this path declaration we will first tell this is the user path and then we will add a path parameter and to do this we will just add : and then name of the parameter and we will give it a name as like user ID so whenever angular sees that you have a route with users less something it will consider that something as a route and then you have to tell that which component you want to go as usual so this is the user we will definitely go to the user component so the setting part is done let's visit the UI to see how we want to make it working and in the UI you see this is the login name we want to convert this text to a button so that if you click on this it goes to the new path and all this card exists in our search component so we will go to the search component and inside the search component in the HTML file we have text and this is the user dot login information what we will do we will convert it to a button in angular material you can define a button multiple ways what we will do we will simply create an anchor and for this anchor we will get rid of this edge ref add a special attribute of material design which is MD and then raised button inside the anchor we will is the same binding we used which was user dot login we will save this guy and then go to the command line API and to start our application as usual we will do ng serve when this is done we will go to the browser and if we search again then we will see that all these change to a raise button if you click this you will get a material design effect here but it doesn't go anywhere to make it going to the user component with this parameter we have to do two more things first we have to create a click handler in this anchor so to add a click handler we will go to the search component dot ts here we have to do four things first we have to create a method we will give it a name show user detail and we will take a input parameter as user and after creation of this method next step is to import router from angular so we will do as usual import from at angular slash router and we will input here is router and when we have this router here third step we have to create a property you add a property in this component we will make it private and then we will give it a name router with smaller R and then we will define the type would be router and we'll put a comma we'll have a router property that represents router from angular library the fourth step is to read this property and then tell it to navigate which would be this dot router dot navigate and this navigate method takes an array which contains depend parts of the route since we want the user to go to the user route our first part of this error would be user and second part would be the variable based on the current user so we will type user dot log in the last part we will do we will go to the HTML and then add a click handler here so what we will do we will as usual type click this would be the name of the event and then we will type show user detail and this user detail will take an input parameter of user we are passing the user so that whenever you are clicking on this button the current user of this code is passed to this show user detail method and inside the user detail method you will read the user dot login that would be passed as a user ID to the user component so if we have done this correctly we will go to the browser and paste up to this part so we will go to the browser and search for lazy people in github and whenever we find all this lazy people we will click on this this should take us to the user route with this part as in the URL so if we click on this you will see the URL change to user slash lazy whatever the name is and it comes to the user works that means the routing with parameter is working for us but to make it complete we should load detail information of this user based on the route parameter and this is user component so to load the user information based on the route we have to go back to the user component and do some work over there let's find the user component which is here and we will go to the user dot component dot TS and first what we need to do here is to read the parameter from the component that's exist in the router and to do that we have to import stuff from the angular library so we will do from and this would be at angular slash router and from there we will import active route the reason we want to input active route because we want to know that current activated route information and next step is to create a private property in the constructor so we'll make this private and we'll give it a name active route with lowercase a and then type would be active route so inside this ng on it we would like to read the current route parameter and then we would like to set it to a constant named user ID so that we can fetch data based on the user ID and the value of user ID you'd be this dot active route get the snapshot of the route it is snapshot not snapchat don't get excited about snapchat this is snapshot and in the snapshot we will get the params and these parents takes a parameters so we will give the name of the parameter we have passed if you remember the route definition we have passed a parameter name user ID and if you have done correctly this should get the user ID from the route to make sure it's worked so far correctly we will do a console log and inside the console log we will just log user ID to make sure we are getting it we'll save this guy and in the browser they will go to the search and this time we will look for dumb people from the dumb people we will select this dump truck man and if we click on this it comes to the user drum track man and to check that we get the user ID correctly we'll go to the dev tool and inside the console tab we already have the drum track man as a parameter so we got the parameter correctly and the next step is to load data from the server by using this user ID to do this we will go back to our old body github where we created a service we will open the service and here we will create a new method and that would be get user detail and this user detail will take a parameter of user ID we will add the return little later and we will have a constant URL and this URL I remember it this is HTTP and then API dot github.com and then slash users after users you will just add the user ID so we'll slash and then add user ID here and this is the URL we need to do and then we will make the HTTP call that we have done before we sees this dot HTTP dot get and we'll pass this URL the next part would be map and inside map we will get the response from the server and this response will be managed by this callback function and inside this callback function we will create a constant called a user and the value of this user would be the response then we will convert this to Jason and after this we'll just return the user and the next part is to return observable from this method which we have done before I observable since we don't have a strongly typed class here yet so we'll just type any so that we can pass anything and the last part we will just add return from here so that read is quickly line is gone so we are done with setting our server call next part would be going back to our user component and call this service method from there and to do so first thing we will do we will import the github service here and we have done this zillion times and that would be github and slash github service and from there we would like to import the github service after importing the github service our next step is to provide github service to the component and to do that we will add a provider in this metadata so we'll type providers and then we will pass the github service that's very simple the next step would be create a private property in the constructor so that we can access methods in the github service we have done this before we'll follow the same steps here so we will type private and then we will name it github service and the type of this github service would be the github service that's very simple we'll add a comma this part is done in the next part we would like to make a call to the github service so we will type this dot github service and we will call the get user detail and we will pass the parameter user ID that we have created before and after this we will do subscribe inside the subscribe we will get a response and to handle this response we will create a callback function and inside the callback function we would like to set the response to a property of this component so we will declare a public property named user where we will set the response and to set it we'll just type this dot user and value of it would be the response before binding to the U I would like to know that what are the information we are getting so that it becomes easier what are the information we would like to see in the UI and we will do the console.log here and we would like to log this dot the user information and we are done here we'll save it and when you go to the browser if it's get loaded again we will search for that dumb people again and from the dumb people we will click on this drum truck man and if we go to this user slash junkman route and at the bottom we will see that object is logged and if you would like to see what's the detail information there we will see there are company name there are user email and there is number of followers this person have and there is a name this is the logging and bunch of other information about this user now we will go back to our visual studio good and this time we will go to the HTML and here we will change the HTML little bit first we will create a h1 that says user detail information and below this we will create a div and inside the h3 that would be binded to the user names so that would be user dot name and below that maybe we'll put a paragraph tag that will provide the user email so the email would be binded here and that would be user dot email and maybe below that we will sell that how many followers this person have so we will create a small tag and inside this we will type followers and after that we will bind to to user dot followers we'll save this guy and if we go to the browser we see oh we see an error and what does this error says he says in line template error and it says cannot read property name of undefined the reason this is happening at the beginning time when you are loading the page you don't have a user definition because we set the value of user when we get the response back to the server so to solve this problem we will just type star and Z if and that's how we will tell hey just parse the below code when you have the value of user we save this guy and then we go to the browser we see that the route currently is at the root that's why you only see the hello angle Lulu baby and if we just go to the search route you will see the search box and then we search for dump and we will get the result set as before if we go to this job truck man will see the detail user information and this is the name email and 20 followers to make sure this is working for the other cases we will go back to the search once again this time we will search for Jesus and if we search the Jesus we will get this looks like more Jesus and if we go to this link we see that this is the detailed information about Jesus and Jesus has 173 follower and these people might go to heaven rest of you might burn in hell so we are done with part 4 of this tutorial what we did we created bunch of routes and if we go to the route definition which is AB dot routes dot yet and you will see that we created three routes one was circular another was search and the last one is using dynamic parameter based on the route this is the last part of this tutorial here we will talk about some small stuffs that might help you to debug releasing the production and those kind of thing the first thing we will talk about pipes for example you are seeing this text as like a lowercase and you want to make these all upper cases you can use a simple pipe and to see it working we will go to our code editor and in the email we will add a pipe here just simple pipe and will tell it to be uppercase and we will save this guy if we come back to the UI you will see that after loading its all upper cases we will look into the other pipes in angular2 so we'll go back to the code editor and we will add a paragraph tag here and inside this paragraph we will have some text created ad where we will display the date and we will bind it to user dot created underscore at and by default if you look into the UI you will see it shows a ugly date that's not very pretty and to make it prettier you just add a pipe and mark it as a date and if you come back to the UI after reload you will see that it becomes more readable date next step we we'll see that how you can debug an angular 2 application to do some simple debugging in an angular 2 application you can use a Chrome extension and the name of the extension is a u zu r y and if you search for a gory chrome and you will go to this link you will see the Chrome extension and you can add it to your Chrome browser I have already edited it now we go to the website that we have created and open the dev tool and in the dev tool somewhere you will see augury and in the augury you will see the component structure you should click on the user component you will see information about it on the right-hand side where you have the instance provider you have the current state of your component and if you like you can change some of the values here for example if you scroll down and this name is steel and you change it to theory and you press ENTER and you come to the UI you will see that the name of this guy it changed to theory and you can chase something else too if you want that theory second and then you enter is gets updated right away and beside properties you will have the injector graph how components and module are injected to your current component and if you want you can no information about the routing tree next we will see that how we can deploy this to the production and to do so we will go to the command line API and then we will cancel the current execution control C and we will type NZ build if we do that and this will run the whole project when the build is done you can go to the directory where you have the project and inside it you will see a folder called list and this is the file you want to replied if you just build by using NZ build it will not optimize your resources to optimize your angular 2 project for the production you need to execute NZ build and pass a flag prod if you do that when this command is done you can go to the disk filter again and you will see like less number of files and all our minified here and ready for production deployment so we are done the fifth part of this tutorial if he was this tutorial angular 2 for dummy up to this point to fill your tummy with yummy angular 2 please subscribe to this channel otherwise my mommy will kick me out of her basement

Channel: That JS Dude

Views: 75,429

Rating: 4.8367348 out of 5

Keywords: angular2, angular2 tutorial, angular2 for beginner, angular2 for beginners, angular2 for dummies, angular-cli, learn angular2, angular2 services, angular2 http, angular2 routing, angular2 debug, angular2 course

Id: rOr1r1rSZQ8

Length: 70min 45sec (4245 seconds)

Published: Sat Apr 01 2017

Reddit Comments

[u/jhankarMahbub]

Feelback, suggestion and yelling will be welcomed

[u/AlirezaSavand]

Hello Angululu baby, damn!

This is so good!

Would love to see more JWT and http related stuff as well.

[u/mysticalsoulduck]

Would love to see more!