by
Lessons:25Length:2.9 hours
Angular test1
  • Overview
  • Transcript

6.2 Adding Contacts

Hi, I'm Daniel for Tuts+. In the previous videos, we built a test-driven angular app. In the following series of videos, we're going to go ahead and add functionality and styles to our app, so it looks and feels complete. We have quite a bit to do, so let's get started. First, we're going to add an AddContact controller to our app. This will give us the functionality we need to add new contacts to our contact list. So let's add a new controller and call it AddContact. And we'll inject two arguments, the $scope and the contactService. In order to be able to add contacts to our contactService, we need to have that functionality. So let's scroll up to our contactService. And we'll add a function that says addContact. And, naturally, addContact takes an argument, which is a (contact). And we'll say this.contacts.push(contact). Notice, I've referred to it as contactService inside the method. This is because of variable JavaScript scoping. Now, let's add some functionality to add a contact. Back down in our AddContact controller, we'll add a new method to $scope and call it addContact. And in this function, we're just going to call contactService.addContact(). And we'll pass $scope.contact which we'll define momentarily. In the open assignment, we add some some validation to the addContact function. This gives us a great chance to try out our new test skills. For the moment, though, we're mostly concerned with our app looking and feeling right. So we'll leave adding test and validation to this for another time. Now we need a template for adding contacts. We're going to write it into our index directly for the time being. So, let's go to index. And here, under our ContactController, we'll add a new controller. And we'll say AddContact. I'll just verify that that is correct. Yes, that's correct. We know from our controller definition that we're going to want to have a $scope.contact hooked up to the inputs in some way. So, let's just have a very simple form. In the interest of time, I'm going to copy and paste the form. We're gonna go over it in a moment after I paste it. The reason why we copy and pasted it is because it really takes a long time to go through this HTML. It's just HTML. There's nothing fancy here. The reason why I chose a form in labels is because it's well, good form to use upon. So in each one of these labels there's an input, and we're defining the contact name. And I've also gone ahead and added three more contact properties. So for your contact list, you can hold some more useful information. So we're going to be adding an age, an occupation, and an email to the contacts. So that's looking good. You can take the time now to pause and copy the form, or you can just copy it from the finished course files. It's up to you. Before we take a look, let's go back to our main.js. And here during this.addContact we're just going to fix an error. We have to say this equals a function. That looks good. And another error here in the controller, where we've also mislabeled function. Remove the brackets and instead just have an equal. All right, let us have a look at our app. So we now have these Add New Contact fields. If I try to Add a New Contact, we'll just call him Ben Stark, and I try to submit, it says please fill out this field. That's because if we navigate to index.html, we can see the Email field is required. Required fields are good because they take care of a lot of validation logic for us. Back to the app. If I type in a valid Email, It adds the New Contact. You can see our avatar is working, giving Ben Stark the avatar of B. If I refresh the page, the Contact does not persist. You'll notice it's just being held in our Contact service. This is a fine example. To persist the Contact, you need to use something like express, or know js on the backend. And that's beyond the scope of this angular TDD tutorial. So for the open assignment, you're encouraged to persist the Contacts to a backend database. But for now, it's fine if they disappear after we refresh them. We're mostly learning about TDD. In the next video, we'll tighten up adding Contacts.

Back to the top