Contact Detail Page

In this module we will add a new page where we can view a contact’s details.

  1. Add the following highlighted line to your www/templates/account.html file. This makes each contact entry a link.
  2. Add a new template file called www/templates/contact.html with the following content. This template will render the details we have for our contact (Name, name of the account, job title, mobile phone number and email). Note that we are use ng-if to only display the mobile phone number and email if they exist.
  3. Add the following state definition to your www/js/app.js to add the routing in for this new URI. This can be added after the entry for the tab.accounts-detail state we added earlier. Hopefully this will look very familiar now.
  4. Create a new controller called ContactCtrl and save it in the www/js/controllers/contact.controllers.js file. This controller shall be reponsible for handling the contact.html template we created a moment ago. As with our other controllers it’s job is to request data from our services and apply the values to our scope. In this case it’s job is to request a single account object, based upon the contactId state parameter.
  5. You now need to update your ContactsService to expose a new get method. This is again uses the smartSql MobileCaddy call. Note however that we are also injecting the AccountsService and, following the succesful response of a contact back from the ContactsService, are then requesting information from our AccountsService. We use this call to enrich our contact object with the account.Name that is returned. This means our controller does not need to know that it has to call against 2 tables to get this data.

If you reload your app you should now be able to click on each contact and see a details page for them.