Angular JS - Services

We built multiple components, let's focus a bit on services. All contacts data are inline. Not a great way for an application. What we will do is allow for service component to be added. For the moment we will have mock service. I promise we will integrate with a real-service in coming exercises, when we deal with HTTP samples.

We will also see how we can do “injection” pattern in this exercise

Lets start by creating a simple interface for our Contact object. In the past we had "Contact" as a class. Now we will make this an interface and have it as a contract between component and service.

Create a file contact.ts in "Contacts" directory

contact.ts

/**
 * Created by krishnansriram on 5/14/16.
 */
export interface Contact {
    firstName: string,
    lastName: string,
    designation: string,
    emailId: string,
    phoneNumber: string
}  

We don't have real services yet, lets start by creating a mock service for data
Create a file mock-contact.ts and add the following

mock-contact.ts

/**
 * Created by krishnansriram on 5/14/16.
 */
import {Contact} from "./contact";
export const MOCK_CONTACTS: Contact[]  = [
    {firstName:"Krishnan", lastName:"Sriram", designation:"Mobile Architect", phoneNumber:"508 330 2744", emailId:"krishnan.srm@gmail.com"},
    {firstName:"Rohit",lastName:"Sharma", designation:"Mobility Director", phoneNumber:"508 330 2745", emailId:"rohit.sharma@gmail.com"},
    {firstName:"Amit", lastName:"Khanna", designation:"Cloud Director", phoneNumber:"508 330 2746", emailId:"amit.khanna@gmail.com"},
    {firstName:"Bhagwan", lastName:"Kommadi", designation:"Enterprise Architect", phoneNumber:"508 330 2747", emailId:"bhagwank@gmail.com"}
];

Create a file contact.service.ts. This is the service file that will be referenced in our components for data. Notice we have imported mock data from mock-contacts temporarily

contact.service.ts

/**
 * Created by krishnansriram on 5/14/16.
 */
import {Injectable} from "angular2/core";
import {MOCK_CONTACTS} from "./mock-contact";

@Injectable()
export class ContactService {
    getContacts() {
        console.log("getContacts - ContactsService");
        return Promise.resolve(MOCK_CONTACTS);
    }
}

Our next step is to consume this service. The way we are going to do that is by adding contact-service as a "dataprovider". In addition we add a helper method in component to invoke getContacts. We will also see a new concept - "Life cycle in Angular JS". Take a moment to read through it.
We start by implementing "OnInit" interface. This means we need to override ngOnInit. Spare extra attention on the case for both method and interface we added. one small change, you may spend hours debugging. Trust me, I had to do that and would not want anyone to go through the same. For the service to be injected we need to add a constructor that takes "ContactService" as a parameter. Angular will take care of creating instance of this service object for our component at appropriate time. And that's it. Here you go with the code

contact-list.component.ts

/**
 * Created by krishnansriram on 5/13/16.
 */
import {Component, OnInit} from 'angular2/core';
import {ContactDetailsComponent} from "./contact-details.component";
import {ContactService} from "./contact.service";
import {Contact} from "./contact";

@Component({
    selector: 'contact-list',
    template: `
        <ul *ngFor="#contact of contacts">
            <li (click)="onSelect(contact)" [class.clicked] = "selectedContact === contact">
                {{contact.firstName}} {{contact.lastName}}
            </li>
        </ul>
        <contact-details [contact]="selectedContact"></contact-details>
    `,
    directives:[ContactDetailsComponent],
    providers: [ContactService],
})
export class ContactListComponent implements OnInit{
    public contacts:Contact[];
    constructor(private _contactService:ContactService) {
        
    }
    public selectedContact = {};

    onSelect(contact) {
        console.log("Header tapped");
        this.selectedContact = contact;
    }
    
    getContacts() {
        console.log("Load contacts - Contacts-list component ");
        this._contactService.getContacts().then((contacts:Contact[]) => this.contacts = contacts);
    }
    
    ngOnInit(): any {
        console.log("OnInit method is invoked");
        this.getContacts();
    }
}