4.4 Saving Projects
Now that we have a form, let's add a method to our projects service so that we can save our projects to the server.
1.Introduction5 lessons, 29:28
2.The Projects List6 lessons, 39:35
3.The Users5 lessons, 31:28
4.The New Project Form4 lessons, 30:48
5.The Project Page4 lessons, 49:46
6.Conclusion2 lessons, 04:08
4.4 Saving Projects
Now that our new project form is complete, we're ready to fill out the handler function so that it actually submits our project details to the server for saving. Now before we can actually get started in the handler here, let's open up our projects service and add a createProject route. So we will have a route here called createProject and this is going to take our set of attributes as its argument and of course this will return an observable with I guess a type of project inside of it. And this will be really simple we will just return this.http.post and we will post to /api/projects and we will pass the attributes as the body of our post function. And then when that returns we will map that to this.extractData just like we have for our previous methods here. And of course I've already set up this project's route on the Server so that's all ready to receive these attributes and it will return our saved Project Object. Okay, so with that created we can now use that from within the handler here. Remember we have already included ProjectService here in our constructor, so we have the injected object. And we even have part of our handler implemented. If the form is valid, then we're gonna go ahead and perform our submission. If it's not valid, we will still just set this.submitted to true for the sake of our validators. Okay, so in here what we can do is instead of doing console.log let's say this.service.createProject and we can return this.form.value and those are the attributes of course that's what we've been console logging the whole time. And then we'll subscribe to this doesn't really matter what's returned, so we'll just ignore that. Instead we want to redirect back to the Projects page. So we can do this.router.navigateByUrl, and will pass the URL's /projects. And of course we don't have a router in here yet. We're going to need to inject that as well. So let's head back up to the top here and let's import the router, of course let's add it to our constructor here so we'll say private router is a router. And now we'll be able to navigate by URL back to our projects page. So that should be enough. Let's see this in action. Let's come back to the browser here and actually let's start on our project's page. Remember we have these three projects and let's create a new project and this project. Let's just call it my new project and we'll give it some description. And I'm only going to invite April to this project. So it's just gonna be the two of us. I will click Save, and we are redirected back to our Projects page here. And you can see now we have down here, My New Project, some description, 0 Conversations so far. But it has only the two users, ourselves and April. So that was quick and easy. We now have our new projects. But you know what we don't have yet? That is the ability to click on one of these projects and actually view an individual Project page. So we're gonna start that in the very next lesson.