This course has been updated! We now recommend you take the Angular 9 Fundamentals course.
Transcript from the "Exercise 7 Solution" Lesson
[00:00:00]
>> [MUSIC].
[00:00:03]
>> Scott Moss: This one was kind of tough, especially if you, I just found out, if you go down the testing route, it's going to be really tough. [LAUGH]. Really tough. So if anybody started writing test, you will immediately run into some problems. Which will be resolved, and you'll immediately run into other problems.
[00:00:19]
>> Speaker 2: [LAUGH].
>> Scott Moss: And more problems and more problems. So let's just get to it.
>> Scott Moss: Let me see.
>> Scott Moss: Dash. All right, so let's look at the fix. So again, this is what it should look like, you're done.
>> Scott Moss: I just started.
>> Scott Moss: And the code looks like this.
[00:00:57]
>> Scott Moss: So let's start an app.js. I think we know we need to do here. Boom. Register the admin. Alright, I think everybody knows that by now. Then on to app.js. I think this stuff was already here first, so all you have to do is register the directive. Alright so nothing new, we've done that before.
[00:01:16] See these patterns here and there. Getting used to it. Everybody's feeling it. Alright, and then because that's importing directive, let's move over to the directive, and then we get our styles, we get our controller, we get our template, and then we make the dregs. I think this is the file that you have to fill out completely, right.
[00:01:36] So things to remember here again, place your controller, your template in there. Use controller ask. If you add a controller you don't use controller ask, then you can't reference the controller. I mean yeah, you can't reference the controller. You can reference the scope of the controller, but not the controller itself.
[00:01:54] Scope, isolate it. This is up to you. I do it and then restrict E. By default it's gonna be A for attribute, but you could also use C for comment. Or I'm sorry, C for class, so you can have a directive as a class. That's really confusing. You really mess somebody up if you did that, so just don't do that.
[00:02:16] And you can also have a comment for M or a combination of whatever. Whatever you want. Originally it was E.
>> Scott Moss: Everybody good on this file? This is like the meat and potatoes of what you were doing. And then in the controller we have some stuff here that I'm like making a fake post for it.
[00:02:39] And then, there's like this new thing in here that you might or might not have noticed. But right here on line 14, I'm doing an assignment inside the arguments. Does anybody know what that is?
>> Speaker 3: It's the default.
>> Scott Moss: It's the default. That's exactly what it is. I'm saying, post is gonna be post or it's gonna be this.post, which is going to be this up here.
[00:03:01] So, that's actually, I think it's pretty cool that you can do the default. Which you could have done a Carter script. Carter script allows you to do that stuff now. Or does it? Does Carter script do that? I can't remember. I haven't used it in so long. But I think it was really cool, that I was able to use a keyword this and then reference this.
[00:03:16] I thought that was pretty cool. It's not what I expected. I thought this is really like a window or something or whatever. I thought it was going to be whatever this scope was on this iffy that's around here. But no, it was this. Which is really, really great.
[00:03:35] So you guys had to use the create post, right. That’s what you have to do. So this .post.create passing in the post, which is either going to be an object or this. And then I just go ahead and empty out the actual post object. It's set to equal to another object, if you have all those values, and then I just say this I state I go back to blog.
[00:04:00] So you click on it. This goes back. Right. So if I'm like, it'll go back here.
>> Scott Moss: And make sure you do your injections and export your controller and you're good. So style is pretty simple and for the spec. I guess I just forgot to write specs, but I'll talk about it.
[00:04:27] So specs are pretty much the same except for one thing. And that one thing is gonna be, if you go to sources. Let's look at a blog.spec. So blog.spec, we wrote this file, the spec file before we changed over to using real data, we wrote it when we had static data.
[00:04:49] So the controller had nothing to inject. But I anticipated this, so I set up make control of this function to take in things to inject, because I knew that we were going to inject stuff later. So now if we were to run this test, it would fail. Because the blog controller is actually expecting post, so it would fail as soon as it gets like here.
[00:05:13] It'll run this .get post, this .get post, would run this post.get. So to say this .undefined,get, and it'll like, there's no method get of undefined. That's the error you would get immediately. You can just bring in post.JS into the test. That will resolve an error, and then you'll hit another error, because post.js needs $HTTP, API, and if you used my version, Q.
[00:05:40] So, then you have to mock those things out, too. So, what you could do instead is one, you could just before each register the shared module here, or you can just go ahead and add the shared module here. So it's up to you but you, but either way you have to add that shared module, or you just have to keep chasing the dependencies if you're going to use the raw JavaScript versions of not angler.
[00:06:13] This is why I was like, yeah you can just import your factories and services into files and use them. But as you can see, you start running into problems, because those regular factories. So the first post is a regular JavaScript but because it's relying on dependency injection. If you don't tell angler about it, as you can see we run into those problems of chasing down these dependencies, like okay you need this.
[00:06:36] Well you need this. And now you're like chasing this tree of dependencies, whereas if were just add it to the module, you can just import the entire module. If you don't know what I mean, run the tests and start going through all the errors. You'll see the error after error after error.
[00:06:50] We just did it, trust me.