Ionic Contacts Screen
My Contacts screen will contain the list of all our contacts that we added through our application.
Compared to Native Android where we had to implement ListFragment instead of a Fragment when we created the My Contacts screen, and also create an Adapter implementation and some specific layout resources, in ionic2 there's really no difference if we are creating a screen with a list, or a normal screen. Because of this, I won't go through the process again, as I'll again create the 3 required files in app/pages/contactsPage directory and wire it up like with other pages I implemented before.
Instead of hard-coding the model again, and again, in every page that is displaying a Contact, we are now going to create a model with a standard set of properties to hold the Contact data. We'll start by creating an app/models directory where we'll store all our future model classes. To this new directory, we'll add the ContactModel class below.
export class ContactModel {
constructor(firstName, lastName, employment, education, knowledgeableIn, interests, currentGoals){
this.firstName = firstName;
this.lastName = lastName;
this.employment = employment || '';
this.education = education || '';
this.employment = employment || '';
this.knowledgeableIn = knowledgeableIn || '';
this.interests = interests || '';
this.currentGoals = currentGoals || '';
this.profileImage = '';
}
getFullName(){
return this.firstName + ' ' + this.lastName;
}
}Now that we have a model class for contact data, we can define any type of helper functions we might need to help us when working with this data - in this case I created the getFullName() function. Also, if I need to pass the contact information to some other page, I can pass a single object instance that will contain all the required information, instead of handling each bit of information one by one.
A service in Angular 2 is a class marked with @Injectable decorator. This class instance can then be automatically injected to any component in our app. There are two ways that this class can be used:
- as a single instance that is shared among multiple components, or
- a new instance can be created for each component that the service is injected to
To share a single service instance throughout multiple components, you need to import the service to the root component app.js file, and bootstrap it:
import {ContactsService} from './services/contacts.service';
//code omitted for brevity
ionicBootstrap(MyApp, [ContactsService], {
}); Now, if you want to use this same instance, you just need import it in your component and inject it in constructor. Here's an example of how I did it in my contactsPage.js (some code is omitted for brevity):
import {ContactsService} from '../../services/contacts.service';
@Component({
templateUrl: 'build/pages/contactsPage/contactsPage.html'
})
export class ContactsPage {
static get parameters() {
return [[ContactsService]];
}
constructor(contactsService) {
this.contactsService = contactsService;
}
}To create a new service instance when injecting it in a component, you need to declare the service as a provider in your @Component decorator:
import {ContactsService} from '../../services/contacts.service';
@Component({
templateUrl: 'build/pages/contactsPage/contactsPage.html',
providers: [ContactsService]
})
export class ContactsPage {
static get parameters() {
return [[ContactsService]];
}
constructor(contactsService) {
this.contactsService = contactsService;
}
}Notice the providers: [ContactsService] part. You also don't need to add it globally to ionicBootstrap in your root component when you are using this approach.
We are going to create a service (provider) prototype that we'll use throughout the app to obtain and maintain contact information.
We'll start by creating the app/services/contacts.service.js file. We are following the Angular 2 convention by naming the service file with a .service.js extension.
The Angular 2 service naming convention says that we should spell the name of a service in lowercase followed by .service. If the service name were multi-word, we'd spell the base filename in lower dash-case. The MyPersonalContactsService would be defined in the my-personal-contacts.service.js file.
So, here's the code to our ContactsService:
import {Injectable} from '@angular/core';
import {ContactModel} from '../models/contactModel';
@Injectable()
export class ContactsService {
constructor(){
this.contacts = [];
let cnt = new ContactModel('Gregory', 'House', 'Head of Diagnostic @ PPT Hospital', 'Attended Hopkins University 1979-1984');
cnt.profileImage = 'build/img/hugh.png'
let cnt2 = new ContactModel('Hugh', 'Laurie', 'Actor, Writer, Director, Author, etc.', 'Attended Selwyn College, Cambridge 1978 - 1984');
cnt2.profileImage = 'build/img/hugh.png'
this.contacts.push(cnt);
this.contacts.push(cnt2);
}
getContacts(){
return this.contacts;
}
}I am then using this service like I already explained in the above Sharing a Single Service Instance section of this page.
Finally, we are displaying the contacts data returned from this service in a list defined in app/pages/contactsPage/contactsPage.html:
<!-- code omitted for brevity -->
<ion-content padding class="contactsPage">
<ion-list>
<ion-item *ngFor="let cnt of contacts" (click)="contactSelected(cnt)">
<profile-header [fullName]="cnt.getFullName()" [profileImage]="cnt.profileImage"></profile-header>
<p style="margin-top:10px">{{cnt.employment}}</p>
<p>{{cnt.education}}</p>
</ion-item>
</ion-list>
</ion-content>The (click)="contactSelected(cnt)" is calling the below function that is defined in ContactsPage class:
contactSelected(cnt){
this.nav.push(ContactPage, {contact: cnt});
}As you can see, this function is pushing the ContactPage on the top of the view stack, and is also sending the selected contact object that is then displayed in the ContactPage screen. Here's the code to view and controller for the Contact Page.
Implementing Contacts Page, or a page with a ListView, in Ionic2 took approximately the same amount of effort when compared to Native Android implementation.
