Component-Based Architecture in AngularJS 1.x and ES6 Recap

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

[00:00:03]
>> Scott Moss: A little bit of recap, cuz after this you're gonna get set loose and you're literally gonna be making a component from scratch with no hand-holding. Literally just you on your own making the thing. And then we're gonna get into some automation stuff. So a few things to remember when taking the component approach with 1.x.

[00:00:19] This is some things that I thought was just important. We've talked about a ton, but these are just some of the important things. Pick a file naming convention before you start and stick to it. So I've said that a couple times, but definitely do that. You don't have to use my convention, it's just what works for me.

[00:00:35] Some people think it is just too verbose. Some people like to use shortcuts, instead of writing template or whatever, they'll put TPL or CTRL for controller. I just like to just write the whole thing out, whatever. Look at JSPM, it's awesome. Hard to config, but it's definitely the thing that people are going to be using.

[00:00:53] In fact maybe you'll help push it and actually add some plugins to it. It definitely needs some more. But that's probably what I'm gonna start using from here on out, even though I really like WebPack, but JSPM is like, this is very powerful. The new router will only work with components, so get used to them.

[00:01:11] The new router, it's called the new router, angular router. It's literally gonna look for a folder called components with similar stuff to what we've been making. And each thing inside the components folder needs to have a JS file and a template, which is pretty much what we've been doing.

[00:01:27] We have more, we have style and directive and all that stuff, but that's what it's gonna be looking for. So get used to that, that's supposed to be coming in 1.5, so you're gonna be ready for that. Decide if you're going to use named exports or not and stick with it.

[00:01:43] So we've been using named exports with the brackets around them. If you don't wanna use that, you just wanna use default, then do that. For the longest, I just used default for everything. And literally two weeks ago, I decided to just name everything. So sometimes it switches. But whatever you do, just only use that one time.

[00:02:00] Because the way we write our code, it's rare that we'll be going up multiple levels of a file to import something, because everything's a component. So it's rare that you have that, so just make sure that when you pick and choose, either do the name ones or do the defaults.

[00:02:19] And you should be fine, but just keep it the same across the entire app. If you forget to isolate your scopes on your components, you may have unexpected side effects. If you don't believe me, just go take off isoscope on all the components and refresh the page to see what happens.

[00:02:35] Something's not gonna work, I guarantee you. One component is gonna have another component's controller, which might have another component's controller. And you won't know what's going on until you go in here. Do angular, and actually, anybody know how to look at the scope of a-
>> Off Camera 1: Yes. angular.element.

[00:03:02]
>> Scott Moss: Right, yeah. So if you click on an image, or I'm sorry. In any element on the page, right, first of all, you know if you click on the element of page, and you go into console and do $0, it'll show the element?
>> [INAUDIBLE]
>> Scott Moss: So if I go to this box right here, I clicked on it.

[00:03:21] I go to console. And I did $0. I get the element, right? So-
>> Off Camera 2: Well that's pretty cool.
>> Scott Moss: Yeah, you could also copy it too. So if you type in copy, all right? And you do $0. I don't know what this is gonna do actually cuz I don't know how this is gonna work, but that will copy it to your paste buffer.

[00:03:41] So, then I can paste it. But, anyway, what I was gonna, get out of here, okay, okay, okay, okay. There we go, there we go, okay. What I was gonna say is angular.element. And then the element that you want in this case, the one I just clicked on, zero.scope as a function, it'll give me the element scope.

[00:04:07] And I can go inspect the scope. So you can go right here and look at it. So my point was if you remove the isoscope from everything, the only way you're gonna figure out what's going on is you can look at all the scopes and be like, okay, what scope are you really?

[00:04:21] What is really happening? What's going on?
>> Scott Moss: So that's a quick way to look at the scope. Quick debugging tip. So that's angular.element. Pass in some element here. I mean, it can be any element. It doesn't have to be the one we pasted in, it could be a selector or whatever element you want.

[00:04:42] But we're just gonna use the one we clicked on, and you'll get the scope.
>> Scott Moss: So that's one thing. Yeah, so please use isoscopes on your components, not on your directives. If you're just making a directive that's not a component, then it's up to you how you want to complete that directive.

[00:05:01] But for components, just use isoscopes.
>> Scott Moss: So there is no standard way to adopt a component architecture in 1.x yet, and there may never be, because everybody's so focused on angular 2 right now. But the approach we learned is a collection of my best practices, trial and error, and community collections on what works best.

[00:05:32] So, feel free to adjust and change for what works for you. I just can't spell. Look at that. [LAUGH] Just be sure you're still having fun. So, there's a lot of ways you can do it. If you find some better ways to do this, let me know. Those would be great, because I'm always curious to know what's better out there.

[00:05:50] I just don't code with my head down and not look up and see what's happening. So if you find something that works better, or anything that just might look better, totally let me know. I'm really interested in that stuff. But yeah, there is no standard way, really. I mean, the new router's coming out and you have to use components.

[00:06:05] But there really isn't like, this is the way you have to do it, not like it is with Angular 2, right? This is the way, there's no if, ands, or buts about it. There's no .service or .factory or .constant, no, this is the way. This is how it's gonna work.

[00:06:21] So, we don't have that in 1.x.