adding service

ContactsManager/src/components/app/app.component.ts

@@ -2,12 +2,13 @@ import { Component } from 'angular2/core';
 import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
 import { CreateContactComponent } from "../create-contact/create-contact.component";
 import { DisplayContactsComponent } from "../display-contacts/display-contacts";
+import { ContactsService } from "../../services/contacts/contacts.service";
 
 @Component({
  selector: 'contacts-app',
  templateUrl: './src/components/app/app.component.html',
  directives: [ROUTER_DIRECTIVES],
- providers: [ROUTER_PROVIDERS]
+ providers: [ROUTER_PROVIDERS, ContactsService]
 })
 @RouteConfig([
  {
@@ -26,4 +27,4 @@ export class AppComponent {
  public menuItems = [
  {name: 'Contacts', link: ['Contacts']}
  ];
-}
+}

ContactsManager/src/components/create-contact/create-contact.component.ts

@@ -1,5 +1,6 @@
-import {Component} from "angular2/core";
-import {ControlGroup, FormBuilder} from "angular2/common";
+import { Component } from "angular2/core";
+import { ControlGroup, FormBuilder, Validators } from "angular2/common";
+import { ContactsService } from "../../services/contacts/contacts.service";
 
 @Component({
  selector: 'create-contact',
@@ -9,16 +10,20 @@ export class CreateContactComponent {
 
  private contactForm: ControlGroup;
 
- constructor(fb: FormBuilder) {
+ constructor(fb: FormBuilder, private _contactsService: ContactsService) {
 
  this.contactForm = fb.group({
- name:[""],
- address:[""],
+ name:["", Validators.required],
+ address:["", Validators.required],
  city:[""],
  state:[""],
  zip:[""],
  email:[""],
  twitter:[""]
  });
  }
-}
+
+ save(formValue) {
+ this._contactsService.addContact(formValue);
+ }
+}

ContactsManager/src/components/create-contact/create-contact.html

@@ -1,6 +1,6 @@
 <article class="template animated slideInRight">
  <h4>Create Contact</h4>
- <form [ngFormModel]="contactForm" (submit)="doLogin($event)">
+ <form [ngFormModel]="contactForm" (submit)="save(contactForm.value)">
 
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <label class="mdl-textfield__label" for="email">Name</label>
@@ -42,4 +42,4 @@ <h4>Create Contact</h4>
  </button>
 
  </form>
-</article>
+</article>

ContactsManager/src/components/display-contacts/display-contacts.css

@@ -0,0 +1,10 @@
+.mdl-card {
+ width: 320px;
+ height: 320px;
+}
+
+.mdl-card > .mdl-card__title {
+ background: #FF5252;
+ color: #fff;
+ /*background: url('./images/image_card.jpg') bottom right 15% no-repeat #46B6AC;*/
+}

ContactsManager/src/components/display-contacts/display-contacts.ts

@@ -1,24 +1,23 @@
-import {Component} from "angular2/core";
-import {Contact} from "../../models/contact";
-import {ContactsList} from "../../mock-contacts";
+import { Component, OnInit } from "angular2/core";
+import { Contact } from "../../models/contact";
+import { ContactsService } from "../../services/contacts/contacts.service";
 
 @Component({
  selector: 'display-contacts',
- templateUrl:'/src/components/display-contacts/display-contacts.html',
- styles: [`
- .mdl-card {
- width: 320px;
- height: 320px;
- }
+ templateUrl:'src/components/display-contacts/display-contacts.html',
+ styleUrls: ['src/components/display-contacts/display-contacts.css']
+})
+export class DisplayContactsComponent implements OnInit {
 
+ contactsList: Contact[];
 
-  .mdl-card > .mdl-card__title {
- background: #FF5252;
-  color: #fff;
-  /*background: url('./images/image_card.jpg') bottom right 15% no-repeat #46B6AC;*/
-  }
- `]
-})
-export class DisplayContactsComponent {
- contactsList: Contact[] = ContactsList;
-}
+ constructor(private _contactsService: ContactsService) {}
+
+ getContacts() {
+ this._contactsService.getContacts().then(contacts => this.contactsList = contacts);
+ }
+
+ ngOnInit() {
+ this.getContacts();
+ }
+}

ContactsManager/src/services/contacts/contacts.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from 'angular2/core';
+import { ContactsList } from "../../mock-contacts";
+import { Contact } from "../../models/contact";
+
+@Injectable()
+export class ContactsService {
+
+ getContacts() {
+ return Promise.resolve(ContactsList);
+ }
+
+ getContactsSlowly() {
+ return new Promise<Contact[]>(resolve => setTimeout(() => resolve(ContactsList), 2000));
+ }
+
+ addContact(_contact:Contact) {
+ if(_contact) {
+ ContactsList.push(_contact);
+ }
+ }
+
+}