Angular 2 In 60 Minutes

hey guys what's going on welcome to the angular 2 crash course now if you've been following my channel for a while you may have seen that I do have an angular 2 playlist where I go over all the basics and fundamentals but you may have also noticed that there's some things that no longer work in that series that's because I made those videos back when angular 2 was still in the release candidate stage so there's been some changes to the framework and the syntax leaving some of those videos useless so angular 2 is now stable and I'm making a all in one guide or crash course whatever you want to call it with the updated syntax alright so we'll be using angular 2.2 stable for this course now we're going to go through a few slides for people that are just starting out so we can go over exactly what angular 2 is and some of the fundamentals then we'll jump into some code from there now after you finish this guide I would suggest that you check out my 12 project angular 2 cores from edge' wanax that way you can get some actual projects and some actual applications under your belt all right now leave a link in the description alright so what you should know before going through this course or guide you should know HTML and CSS now CSS is important in this particular video but I would suggest getting really good with HTML and CSS before starting hardcore JavaScript you should know some basic JavaScript before getting into angular but you don't have to be a pro by any means you should basically just know the fundamentals of programming things like functions conditionals loops things like that so what is angular 2 there's a lot of different JavaScript technologies out there some are libraries some are plugins extensions frameworks any of the two is a framework okay and it works on the client-side it's not a server-side framework but I'll go into what it's not in a second and it's used to create very powerful web applications it was created and is maintained by Google it is the most popular JavaScript framework to date and it's often described is what HTML would have been if it were created for dynamic web applications and not static websites so as I said a go-to is not a server-side technology it runs on the client it can be used on the server but it's it's based to to run on the client side it's not a JavaScript library such as jQuery or react or mootools or anything like that it's not a design pattern like model view controller or mvvm or anything like that it's not a platform like dotnet it's not a language it's also not a plugin or an extension okay it's a client-side framework so what angular 2 offers these are just some of the things that it offers but we have dynamic HTML okay so as I said it's basically what HTML would have been for applications because in applications you have a lot of dynamic functionality it's not just mock-up to display a static website uses powerful templates fast rendering uses HTTP services you can make get requests and post requests it uses components so it has a component encapsulation which is extremely helpful and makes your applications that much cleaner form an input handling event handling it has routing uses the latest JavaScript standards uses es2015 typescript and much much more so what's new from angular 1 well angular 2 is completely different than angular 1 and a lot of people ask me if if they should learn angular 1 first and I would definitely say no because I think that it will do nothing but confuse you ok because it's very different angular 1 uses controllers and scope which are not included in angular 2 angular 2 basically replace that with components okay everything is based inside of a component now which makes our code cleaner makes it more reusable it also has a reduced learning curve since everything's in slated in the component and no longer in scope and different controllers it's a little easier to learn it also uses typescript which is a superset of JavaScript and I'll get into that in a second and it also uses es2015 which is also known as es6 okay which is a later standard of JavaScript it offers better mobile support for mobile apps it also uses reactive extensions or rxjs which is a set of libraries to work with asynchronous data okay and it also gives us something called observables so what is typescript as I said it's a strict superset of JavaScript so basically it's everything javascript is with some added features it's maintained by Microsoft it gives us some features such as static typing makes it look a little bit more like let's say Java or C++ languages like that it also gives us class-based object-oriented programming which is extremely helpful and that's based basically what angular 2 is based off of his classes ok every component is a class so components are the main way to build and specify elements and logic on the page there are basic building blocks of the user interface an angular application is basically just a tree of angular components decorators allow us to mark class as an angular component and provide metadata that determines how the component should be processed instantiated and used at runtime so this is an example of a component we're importing the main component package from angular and then this is a decorator okay when you see this at syntax this is a decorator and we can provide metadata all right so the selector is basically what we'll use for the tag the HTML tag to insert the component the template is the content of the component in this case it's a div with some text you can see we have this double curly brace syntax this is interpolation basically we're bringing in a dynamic variable alright called name now if we go down here into the class see in the constructor we're saying this dot name equals max so we're setting this name property to max and that's what's going to display up here we can also have events okay so this button here has a click event events always have parentheses around them and then we're calling a function that's called say my name all right and then you can see that down here under the constructor and it's basically just going to console.log my name is and then whatever's in that property in this case it's max all right now if that's confusing to you that's absolutely fine we're going to get more into that later so in addition to components we have services which are used for reusable data services to share between components throughout an application so services basically you want to use those to access data okay if you're working with an API where you're fetching data from a database or back-end you want to put that in a service so that you can access it from all components okay you don't want to just stick it in one component because then you can't use it from other ones so you want to use a service for that it keeps the components lean and focused on supporting the view and services are asynchronous and we can return data as a promise or an observable using reactive extensions all right and I'll get into that a little later so we're just about done with the slides before we get started I just want to go over some of the installation methods so you can create an angular 2 app from complete scratch you'll have to install it using NPM and it can get kind of difficult so I would suggest using the QuickStart this is the github link to the QuickStart that's what we'll be doing there's also an angular CLI tool you can install that with NPM as well you want to install it globally we're not going to use the CLI tool in this video however I do have other videos where where we do use it alright so we'll use the QuickStart now the requirements you're going to need nodejs installed NPM which is node package modules that comes with no js' you don't have to worry about installing that separately and then you're also going to need git all right and I'll give you the links in a second - to get those set up all right so that's going to do it for the slides now we're going to jump in we're going to set up any other two and we'll get started all right so we're going to go ahead and get started now if you don't have no js' installed you want to get that set up just go to node.js org go ahead and download and install it it's really easy on Windows it's just a standard Windows installer and then if you're on Linux or Mac it's also easy I do have a tutorial showing you how to install it in a bun - it's also easy with a Mac just go ahead and look at the documentation excuse me now I'd also suggest that you get get especially since we're using the Quick Start we're just going to clone it using git if you're on Windows you just want to go to get SCM comm click on this download for Windows and just get that installed alright once you have that installed you'll have access to the git bash utility which is a command line utility I would suggest using that but of course you can use your Windows command line as well so this is the angular 2 website angular do this is where you want to find all the documentation all that good stuff but what we want to do is get the quick start ok so that's a github comm slash angular slash quickstart and you can download the zip if you want you click on this here and then click download zip but we're just going to clone it using git ok and it has the command right here that we can use so what I'm going to do is open up my let's see I'm going to go to my C Drive and then projects now like I said if you have the git bash utility you can right click and then just click get bash here and that'll open up a command line right in that folder ok so what I want to do is clone the QuickStart into that folder so I'm just going to grab this command and paste that in and instead of calling this my progeny call it my app alright so let's go ahead and run that and what that did is it created a folder called my app with the QuickStart in it so I'm going to say CD my app so that we can go into that directory alright now before we install the dependencies I'm going to add it to my editor which I'm using Visual Studio code which I would suggest either this or Adam is what I use for angular 2 because it uses typescript and it has some really good typescript highlighting so let's see we're going to add a project folder here of my app alright so this is the QuickStart this is what it gives us and I'm definitely not going to go through all this we have the index.html file okay if this has the main my app tag right here that's where the app can where the main app components loaded it also has the all the includes that we need script tags now if we click on package.json this is where all the dependencies are you can see angular actually comes in a bunch of different packages we have the common the compiler of the core HTTP and forms modules comes in a bunch of separate packages so in order to install all of this we have to go over and say npm installed okay so that will get everything set up it'll create a node modules folder for us okay it might take a minute or two and you can see down here all the other dependencies we have our typescript right here it comes with light server that's the dev server that we can run reactive extensions right here system J s gets all of our packages together karma which is a testing utility which we're not going to get into but it does include quite a bit of stuff here the QuickStart alright so it looks like that's all set you can see now there's a node modules folder so now we should be able to run our dev server by saying npm start and that should open it up in our browser and there we go so you can see that mine is it's running on three three zero zero two I think that usually it's on three thousand I might have something on that port right now running so that's why it's on that but yours may be three thousand all right so let's go ahead and just open up the console it's good to have that open f12 and Chrome and then what we're going to do is just look at the files here so in the app folder this is where our components go now notice there's there's a bunch of different app component files what we want to focus on is the TS files that's the typescript files that we want to edit all right pay no attention to the the map files or the spec or the J s basically app component ts gets compiled into app component J S so this is what we want to work in the TS the the compiled file is much more difficult to work with so we're not going to touch that the first file I want to look at is main dot TS this is basically where we bring in app module okay and then we're going to bootstrap that hot module now you don't have to really understand what this is I'm just going to try to explain it quickly angular 2 has a bootstrap module that does just that at bootstrap the entire application alright if we go into app module TS this is where we import ng module that basically binds together all the components all the modules things like that and then let's see we have our app component TS this is the main app component this is what's being imported all right now every component you have to import the component package from angular core and then it has a decorator called component a selector okay we already looked at this in the slides and then a template and basically we're just going to say hello and then whatever's in the name property which you can see is angular so that's why we're seeing this hello angular all right and since the selector is my app if we look at the index.html file you'll see that that's what it is right here my app alright so what we're going to do is in the main app component file let's just experiment a little bit here all right so let's add another property we'll call it email all right and we'll set this you know what I'll do is set the name to John Doe let's set the email to John at gmail.com all right so we should be able to put that in here now I'm just going to put this on multiple lines now we're able to do this because we're using template literals notice that this is a back tick not a quote that allows us to use multiple lines all right so let's go ahead and let's put a paragraph okay we can put any HTML we want in here and we'll put email and then we'll use that double curly brace and in here we'll say email all right so let's save that and that should reload and there we go I'm actually going to take away that I don't want the h1 around the paragraph so let's put that right so just put it right here all right so you can see that it's it's using interpolation and it's putting in the email value so let's say we also want an address we'll say address and we'll set this one to an object okay so we'll say Street say 12 Main Street we'll put a city say Boston and a state okay now if we go up here and we were to put in another paragraph and then say address and save you can see that it just says object okay because it doesn't know what which one of these to display so what we can do is if we want the street we can say dot Street okay so we'll save that and now it gives us the street so let's add next to it address dot city and then address dot state all right so that gives us the address and I'll put a label here as well all right and we can wrap the label and strong tags now as far as the application the application isn't going to do much I just want to focus on the functionality and the syntax of angular 2 okay so now that you know how to create variables or properties down here and use them up here we're going to take a look at creating our own component instead of using this app component I usually like to use this as kind of a meeting place for all of my sub components so in the app folder we're going to create a new folder called components and inside there let's create a new file and we'll call it user dot component TS alright make sure you use the TS all right now you'll notice that automatically it creates user component J s and a J s map ok so it automatically compiles the typescript files now I'm going to copy everything we have in the app component TS and put it in the user component and then we're going to change the selector to user and then we're going to change the class to user component all right so we'll save that and then what we want to do is when you add a component you need to add it to the app module dot TS file you can see we're importing the main app component now let's import the user component okay and that's going to be in the components folder slash user component all right now we have to what they do here we have to also add it to the declarations any time we had create a component and we import it we need to add it here as well why don't I keep the misspelling that all right so let's go ahead and save that now if we go to our app component now we want to get rid of all this and we can now use user all right now we're using user because that's what we used as our selector right here okay and then down here we can actually just clear all this out so let's go ahead and save that and it should look the exact same but now this is coming from our user component not the the main app component so now what I want to do is in our user component we're going to create a constructor and this runs every time the component is rendered so if we say console.log constructor ran and we save it and when it reloads you'll see we get constructor ran now we can change any of these properties we want down here so if we say this okay you want to use this and we'll say dot name equals say Sam Smith okay if we go ahead and save that and let it reload now we get hello Sam Smith now a good way to do this is not to define the values up here but to or at least defined the actual value you can define the variables in fact you have to define the variables so the properties but we want the values to be down here so let's go ahead and just copy all of this and put it in here let's move this back all right little tab these over so we want to set all of these to have this dot in front of them all right and then up here we don't want to actually define the value but we do want to define the property variable and then for address just go like that all right so if we save that that should still work but it's good practice to use typing okay so our Taipings so for name we know that that's going to be a string so we can actually define that to be a string okay same thing with email that's also a string now for address that's an object and it has certain fields inside of it so what we can do is create an interface for this address property so down here let's say interface address and we want to define the fields so name which will be a string I'm sorry not name Street we have city string and state string alright and then all we have to do up here is say that we want this to be of the type address okay so we'll save that and if we look at the command line that's running the server if there's any errors this will tell us all right now let's say that we want let's throw this off a little bit and change this to the word streets all right now you can already see we're getting an error here it's saying that the type address does not have streets in it okay to see doesn't exist streets doesn't exist in type address if we save that this should also tell us that so if we look right here or is it streets does not exist in type address so whatever we have here should match the interface okay so we'll change that back to Street so now what I want to do is I want to add an array of hobbies for this user okay so let's say hobbies and we want to set that to string but it's going to be an array so you want to add the brackets and then down here we'll say this dot hobbies and let's say music movies and sports okay so up here let's put in h3 and we'll say hobbies now if we just put in our double curly braces and we say hobbies let's save that now if you want this format to just have each hobby with a comma that's fine you can leave it like that but a lot of the times you'll want to loop through through an array and then maybe I'll put a list item or whatever it is you want to do with each one so to do that we can use we can use the ng for directive so let's say we want to UL and then inside here we'll have L eyes now we want to loop through those hobbies and output an Li for each one so in here we're going to say asterisk ng for and we're going to set that to Hobby of hobbies alright actually there should be a letter right here so wet hobby of hobby soon now we should have access to each one using this variable so inside the Li we're going to put our double curly braces and put hobby okay let's save that and now you can see that it's outputting a list item for each hobby now in addition to ng four we also have ng if so what I'm going to do here is create another property called show hobbies and we're going to set that or when I could have set it here we're going to set the type to boolean okay and then down here let's say this dot show hobbies and we're going to set that to false actually this should be boolean so we're setting it to false now let's wrap this in a div and we're going to put ng-if equals show hobbies okay we'll wrap the UL alright so if we go ahead and save that and reload let's see can't bind to NF oh let should be ng if okay so now you can see the hobbies are not showing anymore so now what we'll do is let's create a button that is linked to that has a click event that's linked to a function to display those hobbies so we'll go right above the ng if we just created and put a button now whenever you want to use an event you use parenthesis and then whatever that event handler okay which is going to be click and then we'll set that to a function let's call it toggle hobbies all right and then here we'll say show hobbies all right so if we save that that'll show a button okay right now if I click it we get an error because there is no toggle hobbies function so let's go create that down here after the constructor let's say toggle hobbies and just to test it out we'll say console.log show now if I click it down here you can see we get show alright so what we want to do now is we want to set show hobbies to true so we can easily do that by saying this stock show hobbies equals true save it now if I click it it shows our hobbies now I want to make it so that if we click it again it hides them so it kind of toggles them so what we can do is do an if statement here so we'll say if this dot show hobbies is equal to true then we want to set it to false and then we'll say else and let's wrap this we'll set it to true okay so if we go ahead and save that now if I click it shows it click it again it hides it alright now we can also set conditionals up here for instance if they're hidden we want it to say show hobbies but if they're displayed we want to say hide hobbies so what we can do is let's open up our curly braces here and we'll say look at the show hobbies value if if it's true then we want this to say hide bobby's if not we want this to say show hobbies alright so now let's save it now if we click that now it says hide hobbies ok and it switches alright so we've covered quite a bit already in this very simple application what I want to do now is go over inputs ok and data and binding okay so we can create an input and bind it to any of these properties so what we'll do is go let's see what I want to put will go under everything and let's create a form we actually don't even need the form tags but I think it's good practice all right so it's a label name put a line break and then we'll have an input with the type of text ok that's going to have a name of name and then we're going to use what's called ng model and that's used to basically bind this to a property now ng model is it's basically two-way so we have to use brackets and parentheses and then we're going to say ng model equals and we want to bind it to the name property alright now if I save this we're going to get an error okay we get an error because we need to we need to include the forms module in order to use ng model so we need to go to app module TS and up here we're going to say import forms module and that's going to be from at angular slash forms ok now we have to include that in the imports right here say forms module okay we'll save that and now you can see that we have this input it says John Doe if I go ahead and clear that out you'll see that it actually binds to that h1 up there all right I'm actually going to get rid of the hello I don't need that okay so whatever we type in here is going to reflect up there which is really cool obviously when I reload it's going to go back because we're not persisting the data but it is however bound to to that property all right so let's just add some for the for the rest of them and actually put a line break here and we'll copy that okay so we have name let's also do the email and when you use ng-model you also have to have a name attribute with the same same value so email what else do we have we have our address field so let's say Street and we can actually set this to address dot Street okay this will be the city and we'll set that to address dot city this will be what state all right so let's see let's also put on a put an HR right here all right let's save that so now we have our form and it has all the different values and no matter what we change here you can see that it's actually changing it up above as well all right let's actually put put an h3 here we'll stay edit user all right now we can also work with forms without using ng model and using that that binding technique so what I want to do is create an input here to add to this hobbies list so let's go right under the UL and we'll put an input actually let's just copy one of these okay we'll just say edit no not edit add hobby and we're not going to use ng model here oops okay so we're not gonna use ng model but we do want to identify this input so we're going to use a number sign and then we're going to call this hobby alright now we're going to wrap this actually in a form tag okay and we're going to add an event handler onto the form tag for submit so let's put in parentheses and we'll stay submit and when it's submitted we'll call add hobby okay now we want to pass along this input value so right here we should be able to say hobby dot value all right so let's add that down here say add hobby and that should take in hobby and then let's just do a console dot log hobby okay so let's make sure that works say test and enter and we get tests so all we need to do now is to push that on to the hobbies array so to do that we can say this dot hobbies dot push and pass along hobby okay so let's go ahead and we'll say poetry enter and then it adds there alright we can add as many as we want if we reload it's going to go away of course because we're not persisting it to a database or an API or anything but you know this is all about these are interface right now now if we want to be able to delete these from the interface that's easy as well so let's go up here and we're just going to add a button next to the hobby we'll give it a click we'll set it to delete hobby okay and for the text I'm just going to put an X alright now we need to know which hobby we want to delete so we want to pass along the index now when we do an ng4 we can also add to the end of this we can put a semicolon and then say let I'm going to say let's I equals index all right and then what we'll do is pass that I along to delete hobby so now let's go create that okay delete hobby that's going to take along the index and then all we have to do here is splice from that array that index so we can say this dot hobbies dot splice passing the index and we just want to delete one from that index so let's save it and now if we go and click show hobbies let's say movies we can go ahead and delete that all right we can add them and we can delete them okay so now what I want to do is create a service okay so we're going to look at two things here we're going to look at services we're also going to look at the HTTP module okay I want to be able to make a request to an outside API and bring data into our application all right so we want to grab data from I don't remember the exact URL but it's this right here Jason placeholder dot type II code comm okay this basically gives us a free online rest service and we can get post comments albums photos to do our users okay so we're gonna we want to grab some posts and it shows you the different routes you can use you can even make post requests puts deletes but we want to make a get request to posts okay and you can see that it gives us I think a hundred different posts with an ID title body so what we want to do is set up a service so in the app folder we'll create a folder called services and let's create a file we'll call it post dot service dot TS alright and then let's see in here we want to import a couple things we want to import something called injectable because we want to be able to inject this service as a dependency so that comes from angular slash core and then we want to be able to use the HTTP module so we're going to import HTTP from angular slash HTTP and we also want we're going to be working with an observable through reactive extensions and we want to import the map operator so that we can map that data so we want to say import rxjs slash add slash operator slash map alright now to use the injectable we're going to add the injectable decorator just like that and then we can create our class which we need to export so Explorer class and we're going to call it post service all right now inside here we'll create a constructor and let's just do console dot log and we'll say posts service initialized now in order to use this HTTP module we need to import it through here so we're going to say private HTTP and set it to that HTTP just like that now we want to use this in our user components so we're going to go to our user component and we need to import the service up here okay so import posts service and that's going to be from we want to go dot dot slash outside of the components folder into services and then post service write or no post dot service all right now we also need to add that as a provider so we're going to go in the component decorator under the template which ends right here and we need to say providers which is an array and then we want to pass in post service all right so if we save that we're going to get an error or we should I would think we get an error because we need to import the HTTP module alright so let's go into app module TS and just like we imported the forms module we're going to add here HTTP module which comes from angular slash HTTP and then we also need to add it down here all right we must not be getting the error because we haven't tried to use the service function yet or we haven't created it yet so inside post service under constructor let's create function called get posts all right and then from here what we want to do is make a get request so we're going to return this dot HTTP dot get and then we want to pass in here the URL we want to get from which is going to be this right here okay we'll paste that in there and then we want to go on the next line and say dot map okay this is going to actually we want to return an observable so we want to map response to res dot JSON okay it's going to be in JSON format and that's it so let's save it and then what we want to do is call this from our component and load up the post so let's go to user component TS and we'll go down to let's see the constructor that's where we'll do this and we should be able to use this the post service but we need to inject it into the constructor so we're going to say private post service and we're going to set it to posts service which we import it up above all right and then in the constructor let's say this dot posts service and we want to call the get post function now this is going to return an observable so we have to subscribe to it alright so let's do dot subscribe and then in here that will give us our posts and we can set it to an arrow function and for now it's just console dot log posts ok see what that gives us save it and there we go so you can see it's giving us a hundred posts with titles bodies IDs ok so now we want to do is we want to have a property up like we do up here for posts so let's say I'm sorry up here I'll say posts and we're going to set it to post ok and it's going to be an array so now this is going to be an interface that we create just like we did with the address so we'll say interface post and that's going to have an ID which will be a number it'll have a title string and a body striking alright and then what we want to do is set this dot posts equal to the posts that are coming in from the observable from the service ok so we'll save that and then we should be able to access the post from our template so let's go up here under the form we'll put an HR put an h3 and we'll say posts okay just like we did with the hobbies we're going to use ng for okay but I want to put that in a div so ng for equals let's post of posts and then here let's put an h3 that'll be where the title goes so let's do post title and then a paragraph and we'll say post dot body ok let's save it go back and there we go there's all the posts coming in from the API now this is getting a little cluttered with all this HTML all this markup in the template so what we can do is we can actually set a separate file for the template so if we say inside components let's say new user dot component dot HTML all right and then what we'll do is from the user component TS we're going to grab from the h1 all the way down to the last div we're going to cut that out and paste that in the HTML file save it and then in here we're going to change this to template URL oops I'll change it to template URL and set it to user dot component dot HTML now in order to use relative paths here we have to actually add something else here to our decorator you know what let me just have these over so we have to add module module ID and then set it to module dot ID okay and that will give us a text editor error but it should be fine all right so let's go ahead and save that and now it should be coming from the HTML file so just to test it out and we just say test and there it is okay so just to separate things a little bit kind of fins up your component file so we've looked at quite a bit so far components binding templates events directives services the last thing I want to look at is routing okay so we're going to just implement the router now what I want to do is create another component and this is going to be called a boat dock component dot TS and let's just copy everything that's in the main app component TS file okay and then we'll just paste that in it's change is selected to a boat and then in the template let's just put an h1 and we'll say above this app okay then we want to export about component all right now what we have to do to be able to use this is bring it into app dot module just like we did with the other components so let's go ahead and do that boat that's going to come from a boat dock component okay now it's not going to show up anywhere because we haven't loaded it I mean we could include it in the main app component but I want to add a router so that we can actually go to slash about and that'll load that template up or that component up so to start off with the router we need to create a file inside the app folder and we're going to call this app dot outing dot TS alright and then in here we want to import a couple things we want to put something called module with providers and that's going to be from angular core and then we also want to import routes and router module and that's going to be from angular slash router alright now we need to bring in the components that we want to use in the router which is going to be the user and the about component so let's go ahead and do that use your component that's going to be from dot slash components slash user dot component okay we also want to bring in the about all right so now we want to create a variable I'm going to use Const and we're going to say app routes and then : routes and we're going to set that to an array of objects okay this one this is going to take a path now this is going to be for the the route path so we're going to leave that blank and we want to use the user component for that route all right and then we also want the about so we're going to say path about component will be oops about component all right and then finally we just want to export down here say export Const routing and then just throw in that module with providers equals router module and then we're going to say dot for route and then we just want to pass in that out a Prout's variable and that's it so let's go ahead and save that then we want to go to our app module TS file and we're going to go right here and import routing from app dot routing and we have to add that in the imports right here just like that okay we'll save that now a couple other small things we need to do we're going to go into our index.html and then right below the bot the opening body we're just going to put in base href equals and then slash so we're setting our route our base route all right so let's save that and then we want to go to our main app component and instead of where our main have component instead of outputting user we're going to output router - outlet because this is now dynamic depending on whatever route URL we're at all right let's save it and let's see not part of any ng module let's see what the problem is here if we go to app module oh we didn't add the about component to the declaration okay we'll save that okay so the the home route is showing the user component that's good now let's go to slash a boat and now it's showing the about component alright so if we were to add more components we could add them to our routes by adding them right here okay so that's how we can use the router and if we want to put a link to the about page let's see we could put that in the main app component HTML so right here if we want to now as far as linking to our routes we want to use router link so router link to slash for the home which is also the user component alright let's save that and then this will be to a boat that's going to go to slash about alright I'm not going to focus on what it looks like it's if you want to bring in bootstrap and make it look better that's simple all right so now if we click about takes us to about home takes us back to the user component all right so that's how we can implement the router so we're going to go ahead and stop here I would definitely suggest that you move on to my 12 project course it is extremely cheap for the amount of content that it includes if if you don't feel like spending any money that's fine I would suggest moving on to one of the angular 2 projects that I have on YouTube all right so that's it thanks for watching guys if you're not subscribed please subscribe leave a like leave a dislike if you didn't like it and I will see you next time

Channel: Traversy Media

Views: 795,088

Rating: 4.9168854 out of 5

Keywords: angular 2, angular2, angular 2 tutorial, angularjs, angular

Id: -zW1zHqsdyc

Length: 58min 1sec (3481 seconds)

Published: Wed Nov 23 2016

Reddit Comments

[u/Spykid666]

This tutorial is really good. To the point!! thanks to @ngFTW for posting this.