This is going to be a quick guide. I want to talk to you about a special component inside of angular. It's not really inside of angular, it's inside of the built in angular app that we have, called browser sync. If you notice I have a set up right here where I have my text editor on the left hand side. And then I have the browser on the right hand side.

If you open up the terminal then you'd see I have the npm server running right now so this is a live feed and this is going to be some development pattern that you are going to come across a lot when you see angular developers working. It's being able to see what you're working on and the actual results of that on the same screen. If you have multiple screens then usually what you'll see is all your code base on your main screen and then the browser open in another one but, for the sake of this tutorial I want to show you both. And now for the rest of this guide whenever we're working on the angular part of the application on the front end side I'm going to have this setup and if you're following along you may also want to do this. This is different than Rails development and it's because of a tool called browsers sync.

If I come to our home page component right here and I change the template to say freelancer, if I hit save right now watch what happens in the browser. Look at that.

I did not go and refresh the browser but because of the browser sync tool, what it does is the npm server is actually looking for file changes which means that any time that I make a change in the file and I hit save then browser sync is going to go and refresh the page. This is incredibly helpful when you're doing front end development because you don't have to keep on switching back and forth between the browser and then your codebase. You can actually make changes and see them all happening in real time.

Another thing that you'll see me do quite a bit is bring up the inspector. So if you have chrome right click on the screen click on inspect and then come down to console. And what you'll see here is any time that you have an angular error it's not going to come up in the terminal but usually you're going to see it here in the console.

Let's say that I come here and I get rid of our template file. You can see that it just says app loading which means that app never actually loads it's still loading.

If you didn't have the console open you'd have no idea what was going wrong. If you come down here though you can see where it says Error: (SystemJS) No template specified for component HomepageComponent(...).

This is awesome because if you came from earlier versions of angular, it had some of the worst error messages you've ever seen in your life. They had no kind of real descriptions. It was just very challenging. Every time you get an error it's like you had to google it and find what you're doing wrong. Thankfully though, angular two is much better at this. So what I'll usually do is I'll keep the terminal open here and if we have any errors they're not going to show up on the screen, they're not going to be in the terminal, they're going to be right here in the browser console. If you're following along I recommend for you to do it as well.

Now I'm going to hit save after I make that change and you can see that that comes back. Now one other thing I want to talk about, and this isn't as much for browsers sync, it's more just so you understand the way that the entire system is comprised. We already talked about how our application has these node modules and these are all of the libraries that were in our package.json file.

When we ran npm install the npm library went and it checked each one of these and it brought them in and verified their versions and dependencies and installed them in node modules. If I hit command + t this will let me do my universal fuzzy search and if I just type in browser sync or just start typing browser and browser syncs the first one that pops up, as you can see it's right there in the bin directory in our node module.

If I hit return this will bring up all of the code that makes the browser sync functionality all possible. It's a number of reload statements, and a number of different things. You don't have to worry about this code. This is some pretty advanced JavaScript, especially if you've never done it before. More than anything what I wanted to show you was the structure because if you see that browser sync working the first thing that should pop in your head is, how in the world is it doing that? What in the system is making it possible for it to capture any changes and then to go and refresh the page all without us touching a single thing. It's all because of this code right here. There's nothing magical about it. It's simply code that goes in and listens for changes to files in our entire application and then all it does is it refreshes the page. It's pretty straightforward on that side.

That wasn't as much a talk about browser sync specifically. It's more to show that every single thing that we cover here and all of the features we're going to build in the application are included in our directory. When you see something that seems really cool it didn't happen out of thin air. All we're doing is we're calling code usually from node modules if it's an outside library or code that we create right here.

So that's a little bit of an introduction on what browser sync does. How I will have the system configured for the build out of the application especially the angular component side of it. And then also how the entire system is structured in terms of modules like browser sync, and how they're called, and how they're set up in the system.

So now that we have all of this in the next guide we're going to start building out our file structure so we can be organizing our code properly.

Resources

• Code at this stage