Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:25Length:2.9 hours
Angular test1
  • Overview
  • Transcript

6.3 Updating the Contact Display

Welcome back ladies and gentlemen. We've gone ahead and added the functionality to add a new contact. In this video, we're going to update our contact list so that instead of saying just the name, it also shows the age, the e-mail, the occupation, et cetera. So let's navigate to our index.html. First, let's change Hello World to the app's proper title. I like to call the app Contactical, as in a tactical way to keep your contact safe. You may call the app whatever you wish. And optionally in an h2, you can give your app sort of a tag line. Like the Iron Clad Address Book or The Invincible Address Book. Now we're going to modify our contact list display. Take note of the HTML inside the ng-repeat="contact in contacts". This is what we will change. In the interest of time, I will copy and paste the proper HTML to display the contacts. What we've done is rather simple. We've just included some HTML markup to display the name, the occupation, the e-mail, and so forth. There is no interactive [INAUDIBLE] here, it's simply HTML. If you'd like, copy it now or copy it from the completed course files. You'll want to also include the classes, as we'll be using this to add some styles to this, momentarily. Let's save this and have a look at our app. Nice, that's looking better. But it doesn't display Robert or Eddard's occupation or email. That's because we didn't define any. We need to define some proper demi contacts for our app to look right. Let's navigate to our server.js file. And you can see here, we have our very simple demi contacts. I'm going to replace this with the more filled out demi contacts object from the end of the app. So I've copied these in and they all have a name, age, occupation and email. You can put whatever you want here. It's really just a perfectly normal list of JSON objects. And we'll just fix up the double markup here. Before this will take effect, we must restart our app. So go to Gulp and just restart the app serving. We could, of course, use nodemon or a more sophisticated tool for dealing with this, but this is probably the only time we're gonna need to modify the server in this video. So let's restart Gulp. Let's try adding a new contact to the list to see how this works. And the new contact has been added to our list. Very cool. We now have a mostly fully functional contact list app. In the next video, we're going to add styles to our app, making it very good.

Back to the top