Check out a free preview of the full Component-Based Architecture in AngularJS 1.x and ES6 course:
The "Exercise 1 Solution" Lesson is part of the full, Component-Based Architecture in AngularJS 1.x and ES6 course featured in this preview video. Here's what you'd learn in this lesson:

Scott walks through the solution to exercise 1.

Get Unlimited Access Now

Transcript from the "Exercise 1 Solution" Lesson

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Scott Moss: So again what you should see if you got this working was, one, if you were to go into the terminal, it's going to clear this real quick and type in npm start. What's really all that it does is you look at the package.json inside the scripts. And you see this start property and this is gonna run this command and so this is gonna run the gulp command.

[00:00:25] So if you follow that and you go look in the gulp.js, we go to the gulp command that's this one. So if you just typing gulp it's gonna run the default task which is this one which runs the build tasks first finishes. Runs the copy task second finishes, runs the serve task, finishes and it runs the watch task and then finishes.

[00:00:44] So it does all these in a synchronize order, so that's what npm start does. So if we run npm start, we'll see all its output, it's like, cool I'm running the gulp. This is npm right here, it's like, okay, I'm going to run the gulp command like you told me to.

[00:00:59] And then the gulp command is like, great, I'm gonna start the default task. And if you go look at the default task, it first runs the build tasks, so if you scroll to the build task, it's running this one first, but the build task cannot run until the todo task runs.

[00:01:14] So that's why this says starting default, starting todo and then this totals thing you'll see this means in a minute. But this is irrelevant on this step when we get closer to the end you'll see this means so is like cool finished todo. Now I'm actually gonna start the build task now and that's why I says, starting build and what build does, the way it is works is to get this to work.

[00:01:37] What we have to do is when I was talking earlier about webpack and how it only takes in one file as a entry or application. And it treats that file like the root of a tree like this goes and whatever that file imports or whatever its children imports, that's what gets loaded up.

[00:01:51] So all we have to do is, load up this paths out entry or, as usually if you're very familiar with go. What you would normally do is, you'd like, here's all the path to my JavaScript, right. So, you would pass them like paths.js, I'd probably done that first.

[00:02:04] Because, you're thinking like I want to compile all my JavaScript files. So I'm going to pass in the glob patterns on my job on all my JavaScript files. But that's not the case the web pack we want to paths an entry file and have webpack take care of stuff for us.

[00:02:16] Alternatively, if we were not using webpack and we were just using Babel, Gulp we will do that, we would paths in all the JavaScript files like compile all these files for us please. But then that means we would also have to do the bundling, and concatenating and stuff ourselves as well.

[00:02:30] And then of course it would run in the browser because cope doesn't give us common js in the browser so we still have a problem. So that's what's happening here we paths and paths out entry. That's gonna put that entry file in a buffer we pipe it to this webpack plugin that we have up here which is this webpack stream.

[00:02:48] Which is just the webpack tool and used or set up in a way that works well with go so it can take in a stream. That's all it does, it's the same thing as webpack from the command line or it's like the same thing if you were to require webpack, we'll call it 2 equals require webpack.

[00:03:07] So the same thing except for it just works better with go. It does the same thing though, does that make sense? So just like if you are using webpack we have to, we don't have to but it takes an optional objects, an optional configuration object. To figure out how to the instructions on how to run the files if you're pathing it.

[00:03:29] Luckily, we already made one that's the webpack and figured I'd say yes. So all l I'm doing here is this requiring that file, that's all I'm doing, so that's going to be an object, so everyone follow me here?
>> Audience: It's easier if you read that object in the function again but we have it in a separate file.

[00:03:46]
>> Scott Moss: Right exactly, we have it in a separate file. The reason we have it in a separate file is for whatever reason you were not using gold before it even you had a CI. Whatever even gold was in here and you just wanted to run webpack we can do that because it falls on the route like we just want to come from the command line.

[00:04:03] And I typed in webpack like this. It's going to look at that webpack and it's going to right, sweet. And then now get the result that webpack file, which if we go look at webpack is a bundle.js. That's the result of it, it creates a bundle.js. So get the result of that and stick it here, so pipe it to gulp.desk.

[00:04:30] To the destination which is the disk folder. So go for create a disk folder for you and put all this other stuff in here. So you have like this bundled.js.map, you might see some other stuff like in HTML. There's a cat image there, I don't know why it's even there.

[00:04:52] So that's what's happening there, so everybody follow me there so far? So now if you go back to webpack and see what's actually happening, the loader. So mine looks a little different from you? Different from everybody else's unless you like really to read up on what was happening with the babel loader.

[00:05:09] So if you look at the first two here, let's go in the detail about what's happening with these objects. So there's a lot of properties we can put on the actual objects for the loaders. But the first one is the test, so the way this one works if you just give it a regex right or anything to match it.

[00:05:28] I think you also take a stream is going to match the incoming file name that's being sent to it with that string or that regex. And if it matches true, if it passes, it's going to run the appropriate loader, all right. So what that means is, if I import anything in my application that has a .js extension then run whatever loaders I tell you to on the right.

[00:05:53] So that means if it's stylus HTML it won't run through this loader which is great. But like never mind, I'm not going to use, so it's like a check to see. So it's testing the file to see if the condition is true and if it is run this appropriate loader.

[00:06:08] Right, so does everybody follow me there? So you can put any regex you want to right here. This is just like the convention that the community is doing, stuff like this. So if you need a like, multiple files, you just do, the regex of like js and you know you also do JSX if you reason, react or whatever, right.

[00:06:24] So, we're just going to use JS and then loader, the way loaders work. This is a string of what loader you want to run, so more about the loaders. Let's just go look and just make more sense if I show you the node modules. By the way, if you're using like npm version three or up your node modules folder is flat, it's not recursive anymore.

[00:06:47] So, if you're node modules folder doesn't look as long as mine, don't worry, it's fine. I'm just using the latest version of npm and they don't nest node modules anymore, everything is flat. So the way that loader work is, the convention is, if you wanna make a loader for webpack you give it a name dash loader.

[00:07:05] So Babel loader, raw loader, CSS loader so that way webpack knows how to look for them when you place them inside the strings like this. So when I say Babel, I'm actually saying I want to have the Babel-loader, either way is fine. It will set any syntax but because of that convention is there, we can exclude the -loader.

[00:07:25] So if you go look at nobody's folder and which might is really really big and so many babel things and babel, babel-loader right. So I found it so that's how it knew what lower load up because it's in the know about tools folder. Same thing with the rest of the so there's a raw loader, there's a CSS loader there's a style loader.

[00:07:48] There's a stylus loader, right? Is everybody following me there?
>> Audience 2: I've got a question.
>> Scott Moss: Yes?
>> Audience 2: So when I go to start up gulp, I get an error message that it cannot find a module run sequence?
>> Scott Moss: You need to npm install run-sequence,.
>> Audience 2: Okay.
>> Scott Moss: There should be in a package.json and make sure you save it to --safe.

[00:08:10] So npm and saw run sequence --save. So it stays in your pack such as json, by following so far the loaders how itself works cuz if you notice I have like this query string here at the end of Babel, it's like stage=1. This is how you paths in options to these loaders, because Babel is a JavaScript plugin, and this is the webpack version of it.

[00:08:33] So just like if you used Babel in JavaScript, you can paths in options. You should be able to paths in options on the webpack version as well. So the way they do that is, you usually put like a query string at the end of the loader and you paths in the options that way.

[00:08:47] So babel has an option called state which allows us to turn features on and off depending on when they were released. So if you go look at that, so it looks like that looks like, we got a babel and let's see. Yes.
>> Audience 3: You have time for a couple questions here Scott?

[00:09:09]
>> Scott Moss: Yeah, I do.
>> Audience 3: We have a small backlog so, one Justin C is asking if you could show that to do task in the Gulp file again maybe just to leave up on your screen in the meantime.
>> Scott Moss: Yes, I can it is this one.
>> Audience 3: Awesome, thank you.

[00:09:27] There is a question on what browser sync is doing in this context?
>> Scott Moss: A good question. Yeah so if you have used browsing before it's pretty amazing. What browser same does one it acts, it really is like a little small express server a static server that serves application or whoever port.

[00:09:46] It wants to whatever tell it or does that, so just serves it. But at the same time what I would have also do I turn it off by default. But what it will do is it will sink all your scrolling and clicking across multiple browsers. So that's why when you run the gulp task or npm start it gives you all this output.

[00:10:08] I'll show you this Brotherson gray or this B.S. that's browser saying it's like cool. Here's where your app is being served. Here's an external URL that anybody on the same WIFI connection is you can go to and you all and if you start scrolling or scroll on their page too.

[00:10:26] If you start clicking to click on their page and so forth and then here is a URL to your UI, which is like this dashboard that browser sync makes for your app. It's like a dashboard and you can turn the clicking in sinking on or off and then mess with the options.

[00:10:43] So it's really legit, it's better than library, it's like library the real I don't like steroids and I like It will like do everything. It's really great for testing so like you can load the thing up on your mobile phone, load up on your desktop and start clicking and see what's happening, what's going on, give to somebody else.

[00:11:00] So it's pretty crazy, so that's browser sync, but I turned that off because it gets really funky sometimes, also if you turn off. Open, it open the browser for you do so if you just run this like this at a like over the browser do all types of stuff.

[00:11:16] But it can also do more of a set of proxies and all types of things but it's just a way for us to have a better built system.
>> Audience 4: Can you hear me, it would be ng-blog.
>> Scott Moss: There's an error in your blog?
>> Audience 4: Yeah.
>> Scott Moss: Do you specifically know what the error says?

[00:11:40]
>> Audience 4: There at the ng-blog at 1.0.1 starts with gulp, start script gulp, like we probably could, ng-blog package.
>> Scott Moss: So that's just a node throwing a error and the reason it says ng-blog is because you're looking at package.json, that's the name of this package but the error could be anything.

[00:11:58] I'll come and check you out in a minute and see what's going on.