Check out a free preview of the full Component-Based Architecture in AngularJS 1.x and ES6 course:
The "Exercise 2 Solution, continued" 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 continues his exercise 2 solution demonstration by discussing the code in home.js.

Get Unlimited Access Now

Transcript from the "Exercise 2 Solution, continued" Lesson

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

[00:00:04]
>> Scott Moss: We move on to home which is what we imported here components/home/home.js. At the top of my file I have, I'm importing this style so first thing I do.
>> Speaker 2: [INAUDIBLE]!
>> Scott Moss: Yeah, because app.js is importing home.js and home.js is importing home.style, that's when that gets loaded up, all right?

[00:00:31] And then again this is the boilerplate that I was talking about of having to create an angular module every component. I have to import angular again and I was importing loadash and that stuff. I don't think I even using this I don't even know why, I also made one tiny mistake here and I want to see somebody going to catch it but i think nobody did, but there are some dependencies in app.js like uiRouter, ngAnimate that are registered here.

[00:00:59] And if you use angular then you know that it like, because I registered home as a sibling of these it also has access to this stuff too. But only when app is loaded up, when I go test home by itself without the app module, it'll break cuz it's like I don't know what's the provider is.

[00:01:17] I don't know what urlRouterProvider is, you never told me without was only app knows about that. So if I want to test this isolated by itself it would work. So how do I get around that I just do the same thing. I just go back to app.js. I'm not using ngAnimate now file but I am using uiRouter, I copy that, I place it here and I'll just put here, all right?

[00:01:40] And now it won't break when I run the test because, now I know what stateProvider is, all right?
>> Speaker 3: Wait, what? So you are importing uiRouter in app.js?
>> Scott Moss: Yes.
>> Speaker 3: And you're saying, if you are going to test home.js.
>> Scott Moss: Right.
>> Speaker 3: It would break because you didn't have uiRouter imported into that module, is there a way to conditionally do that or is this gonna create any duplicate work or performance because over time it and enterprise that could become, you have a lot of additional import statements.

[00:02:20]
>> Scott Moss: Yeah, so I say you have a lot of duplicate code so you can still use a Web Pack. You can't conditionally use the import keyword, right? You can't say if this import this, that's against the ES6 rules but there are some hacky ways around depending on what you are using.

[00:02:40] Yeah, go ahead.
>> Speaker 4: I'm sorry, knowing performance impact that would be at compiling, right? So there's no end user.
>> Scott Moss: No, no it's not going to do it twice. Webpack handles circular dependencies. It's not going to see angular in ten files and load it ten times, it's the same angular.

[00:02:55] That is irrelevant, to read that it's minimal, right? So no that's not to cause a problem and then internally when you pass in a module into the angular array it also handles them separately to so it's not gonna do it twice. So you're still fine, I thought you were talking as far as like having to write the same code over again as far as when they got application.

[00:03:17]
>> Speaker 4: Yeah it sucks.
>> Scott Moss: Yeah, that sucks but as far as it like being compiled more than once, no it will not be compiled more than once. It handles itself, yes?
>> Speaker 4: So if you had a file like comment and and you import a comment, would it import all the sub and you have 100 imports in there, would that work?

[00:03:35]
>> Scott Moss: Are we talking about is 2015 imports or are we talking about common like angular modules?
>> Speaker 4: I'm saying, up here at the top but you say import comment instead of having to write 100 import statements.
>> Scott Moss: Yeah, you can do that if common had some stuff in it, yeah, yeah, yeah, yeah you can do that, for sure.

[00:03:53]
>> Speaker 5: I think the disadvantages to doing it that way would be that you're kind of importing the kitchen sink for every one for your components.
>> Scott Moss: Yeah.
>> Speaker 5: When if this component really only needs uiRouter and not like Animate or any of the other ng plug-ins you might be using.

[00:04:09] Then for testing purposes, you're testing an isolation. You would have everything there when really your model is only depending on one or two or-
>> Scott Moss: Exactly, yeah. Cuz you start importing like you said the kitchen sink then you don't really have components anymore because now I have and if I take that component like I'm gonna use it over here now it's not gonna work because it needs the kitchine sink,right?

[00:04:30] This thing doesn't, so it's still a fire.
>> Speaker 5: Yeah, that make sense.
>> Scott Moss: So the hacky ways around conditionally importing is one, because it's just common.js. And we can't say something, if true Import, we can't do that, it will compile babbled like uh-uh, nope not gonna happen but we can just do require.

[00:04:49] Look at that it works the same way because import compiles down to require, require you can do conditionally. So you can get away with that in Web Pack and in JSPM you can do system.import which is what they're imports compiled onto and you give it a path and it's a promise and you get the file asynchronously.

[00:05:11] So there's a ways to get around conditionally importing things. You just cannot use the import keyword in a conditional statement. So it makes sense, yes?
>> Speaker 5: Daniel Evans asking for clarification on how home.name got into app.js from this file?
>> Scott Moss: Good question, so we're about to get there.

[00:05:27]
>> Speaker 5: Awesome, sorry.
>> Scott Moss: Sweet, so here we import the style everybody clear on why you have the uiRouter here, clear on that? Okay, and then what I did was don't worry about this const we're going to talk about that later at the launch but just think of this is variable this is just a variable.

[00:05:46] So what I'm saying here is I'm saying export a variable called home, right? So by doing that, remember we talked about modules that's the same thing. First, we're exporting something and because it's an assignment expression, we're gonna export the actual name of the variable name which is home.

[00:06:03] So that's how this module right here called home got into this file. Because we have a home which is referencing this home right here whose value is an angular module, right? And all angular modules have a .name property on them. That's how they got to app.js so export const home = angular module put the home in there.

[00:06:32] We have our config. We got our template URL, controller all this cool stuff, right? So this is how we normally rewrite angular, right? We'd have a config, we have our state provider or route provider or whatever you're using your doing something like this maybe do a template URL probably or if you're caching it.

[00:06:51] So this is one feature that you probably haven't seen this is a template stream in the ES 2015. So I used the back ticks I can now have multi line strings in JavaScript now does using the back ticks. So I don't have to use this anymore and do you know it starts escaping characters or stuff like that I can use back ticks and a multi-line and I can do interrupt.

[00:07:13] So like if I had, actually I just show you on babble. So check this out. So if I had a variable called name, and it was moose, that was a first in thing came in my head, I don't know why, and I could say something like this, console.log, back tic, back tic.

[00:07:33] Hi my name is and then I can say a $ {}, see the user bracket's everything name. And that will log, hi my name is moose, all right. So, by putting stuff between the dollar sign brackets, I can do interpretation.
>> Scott Moss: So back ticks or multi line and they allow interpellations.

[00:07:58] So any valid JavaScript error. I can say, 1 + 1 anything or 1 +1, right?
>> Speaker 6: Those probably all were compiled in JavaScript anyhow.
>> Speaker 6: Those probably a would compile on Java Script anyhow, 1 + =!
>> Scott Moss: Yeah [LAUGH] So, that's string interpolation. So, it's really nice to be able to write those templates now.

[00:08:23] So now it's, yeah, a small template. I can just write it in line now, not a big deal. So that's why I wrote in line, cuz I can do that now. Whereas before you have an array and you call like .split, right? And this is like, this is stupid.

[00:08:34]
>> Speaker 6: [LAUGH]
>> Scott Moss: So now you know how to do that. And then of course you put your controller there, right? Or you do select controller as, or whatever you do. This is how you normally write it and then you have your controller, right? This seems like something what we normally do with angular.

[00:08:47] The same pattern, the config, the controller and the view, right? So this is the last time you're gonna see this, we're not gonna do this anymore. This is gone, scarred. I just wrote this so you guys are good you have a some familiarity what's going on. Cool, in the home.style there some style.

[00:09:03] If anybody think of style stuff we can talk about it later but there's a lot of stuff going on on. So a little more about I guess in what context this import allows me to import other stylus files into this file, and in fact, what I'm doing here is I'm importing a folder called styles, which is over here, that has other files in it and so I'm importing variables and stuff like that.

[00:09:25] So, it's pretty crazy. Cool and let me see, is that it for this? Yeah, and that's how you get.
>> Scott Moss: This or I guess it doesn't work anymore cuz they close it down.
>> Speaker 7: Yeah, I get that all the time too though. [LAUGH]
>> Scott Moss: Cool so any questions on this solution so far and what we did, how we got here anything.

[00:09:53]
>> Speaker 8: So what was the components file and why don't we import that and then import that in the app.js
>> Scott Moss: Good question, so we're gonna talk about what components are and what are the components of a component and why we have a components folder and a components file.

[00:10:08] But it's there for reason we won't be using it but I put it here just in case you want to use it but we won't be using it but you will talk about that at the launch.
>> Speaker 4: Are just to get a kind of idea of that angular usage here, are we looking towards to at all?

[00:10:24]
>> Scott Moss: Yes, the way we're writing it right now is exactly how two is gonna be used
>> Speaker 4: Okay.
>> Scott Moss: Not the same syntax.
>> Speaker 4: Right.
>> Scott Moss: We are not using decorators. We can I have them enabled, but we're not gonna be using them. But the methodology behind it as far as thinking in components, as far as thinking of things that are completely isolated and encapsulated from the rest of your application it can be reused like little blocks.

[00:10:48] I think that's the hardest part of it and in fact we're dealing with Angular 2 or web components, or even React and that might be it. So the fact that you start thinking like that, will be a lot easier and then when you move over to Angular 2, you realize that about 40% of the code that we wrote is gonna be gone.

[00:11:03] So then you like-
>> Speaker 4: Well, the reason I asked as I noticed in the home controller you're hitting scope correctly and I'm wondering are we-
>> Scott Moss: We're not gonna do that more. I did as an example to show you what you probably used to doing. I don't use $scope, I just use Controller As, right?

[00:11:16] So yeah, we won't be doing that. Good observation.