Check out a free preview of the full Component-Based Architecture in AngularJS 1.x and ES6 course:
The "Exercise 2" 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:

In this exercise, you will import a some dependencies into your project including Angular and lodash. You will also add code to export the home module.

Get Unlimited Access Now

Transcript from the "Exercise 2" Lesson

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

[00:00:03]
>> Scott Moss: What's next is, if we go to the repo and you do a git checkout, let me do a stash, checkout step-2, and if you do this and you run npm start. You'll see that there's a lot of stuff that's printed out on TODO. It says, TODO, do this, TODO, do this, and it tells you what file that TODO is in, so it's telling you exactly what you need to do.

[00:00:35] So let's just walk through what we need to do here. What we're gonna do is, we're gonna learn how to import dependencies. We talked about how to do that with npm and Node modules, so we need to import Angular and stuff, we need to register those modules. And there's also some other stuff that we need to import.

[00:00:49] All the files have the comments in them that tell you exactly what needs to be done. So you can check it out. So let's just go look at some of that stuff now. Yes, reload. So you might have noticed that in the app folder, there's a lot more files in there now.

[00:01:03] There's a app.styl file. There's a components folder with a home folder. What's going on in here? So if we go look in app.js, we see some Angular boilerplate. It's got a TODO in here, it's like, you need to do this stuff. So, import angular, and other dependencies like app.styl, normalize.css components/home, ui-router.

[00:01:25] And then we need to register that stuff on here. This one's gonna be pretty tricky. I'm curious to see what people do here. And then home.js, this is also saying, we need to import required modules.
>> Speaker 2: What is the branch that you went to?
>> Scott Moss: step-2.
>> Scott Moss: And we also need to export the stuff.

[00:01:50] And then don't forget index.html. It's still Angular, and we still need our Angular stuff. So don't forget about ng-app and all that other stuff. So remember that, we still need that stuff too.
>> Scott Moss: So again, if you look, if you run npm start on step-2, the branch step-2, you'll see a list of todos that you need to do, and what file, on what line they are.

[00:02:23]
>> Scott Moss: Yes, you can just look at step-2-fix and see the solution, but that would be cheating, and you just won't be doing yourself service if you did that, so don't do it. So I highly recommend just struggling for a little bit and asking me so I can help you out.

[00:02:37] Because I promise you, that's how you gonna learn. So what that's gonna look like, if you completed it, would be this.
>> Scott Moss: It would be, you should see this if you completed it. You'll see, Welcome to the blog, and then a list of items on the page.
>> Speaker 2: I'm totally sorry, but I had to fix something.

[00:03:20] Where did you say to find our list of todo's, basically?
>> Scott Moss: Right, so are you on the branch step-2?
>> Speaker 2: Yeah.
>> Scott Moss: And then from the command line, if you run npm start, it'll print them out right there in the terminal for you.
>> Speaker 2: Thank you.
>> Scott Moss: No problem.

[00:03:37] So yeah, this is what you'll see if you're done. You'll just see a page that says, Welcome to the blog!, and a list of items.
>> Speaker 3: How long would be the exercise?
>> Scott Moss: Exercise is 30 minutes, I'm sorry, I keep forgetting that, yes.
>> Speaker 4: You're exporting the style sheets as a module?

[00:04:04]
>> Scott Moss: Yeah, so remember, webpack treats everything as a module. So here's a clue. Here's a clue. So this question was, we're exporting style sheets as a module. If you go look at webpack.config.js, there is a loader for Stylus files and CSS files. All right, so what's happening here is, it says, hey, if you check, if anything comes in as a style file, this is what I want you to do.

[00:04:30] First, I want you to run it through the Stylus loader, which compiles it to CSS. And then I want you to run it through the CSS loader, which resolves any URLs there might be in there like font URLs or whatever URLs you might have in there, image URLs.

[00:04:44] And then I want you to run it through the style loader, which sticks it on the head of the page. That's what that does. So just by importing a styles file, it will do all that stuff, and you don't have to write a link tag. It's pretty trippy.

[00:04:56] But yes. But importing it is gonna be really, really hard, cuz I didn't tell you how. I did that on purpose. [LAUGH]. Cuz if this thing is gonna be placed in the head, then why do you need a variable to import it, what are you doing with a variable?

[00:05:11] And what do you call it? It's not a module. But like, woah, yeah, it's really trippy. But if you look at the documentation, you'll find out in two seconds, so. Yeah, so it's a little new concept, and you start bringing in CSS files into your JavaScript and start bringing in HTML files in your JavaScript.

[00:05:28] You're like, wait, this is a little backwards.
>> Speaker 5: [INAUDIBLE] JavaScript modules, but [INAUDIBLE] I didn't even know you could [INAUDIBLE].
>> Scott Moss: Yeah, anything, like, even images. We'll start importing images too. And you'll see, wait, how does that even work? You'll see. I didn't realize until I started using it, I was like, wow, this is amazing, this is amazing.