diff --git a/README.md b/README.md index 9d11afa..7a334a4 100644 --- a/README.md +++ b/README.md @@ -68,3 +68,13 @@ The application is a simple contacts application where you can search, create or - Convert both of these to components as well - Changed `app.routes.ts` to use components as HTML tags i.e. `template: ''` + +### Step 5 - ES6'ify + +- We've already actually started using ES6 in the componentify section. +- We changed `contact.resource`, don't have `ngResource` in Angular but we do have an equivalent to `$http`, so we move to using `$http` instead. +- We update `contact.service` to use an ES6 class. + - Use `for..of` instead of `angular.forEach` + - Use `Promise` instead of `$q` + - Use `service` instead of `factory` + \ No newline at end of file diff --git a/src/app/services/contact.resource.ts b/src/app/services/contact.resource.ts index 3814a9e..5415106 100644 --- a/src/app/services/contact.resource.ts +++ b/src/app/services/contact.resource.ts @@ -1,11 +1,35 @@ import * as angular from 'angular'; +export class Contact { + private apiRoot: string = 'http://localhost:3000/contacts'; + private $http; + + constructor($http) { + this.$http = $http; + } + + query(params: {string: string}) { + return this.$http.get(this.apiRoot, {params}); + } + + get(id, params?: {string: string}) { + return this.$http.get(this.apiRoot + '/' + id, {params}); + } + + save(data: any) { + return this.$http.post(this.apiRoot, data); + } + + update(data) { + return this.$http.put(this.apiRoot + '/' + data.id, data); + } + + remove(data) { + return this.$http.delete(this.apiRoot + '/' + data.id); + } + +} + angular .module('codecraft') - .factory("Contact", function ($resource) { - return $resource("http://localhost:3000/contacts/:id", {id: '@id'}, { - update: { - method: 'PUT' - } - }); - }); \ No newline at end of file + .service("Contact", Contact); \ No newline at end of file diff --git a/src/app/services/contact.service.ts b/src/app/services/contact.service.ts index e57be01..c47aa28 100644 --- a/src/app/services/contact.service.ts +++ b/src/app/services/contact.service.ts @@ -1,131 +1,117 @@ import * as angular from 'angular'; -angular - .module('codecraft') - .factory('ContactService', function (Contact, $rootScope, $q, toaster) { - var self = { - 'getPerson' : function (email) { - console.log(email); - for (var i = 0; i < self.persons.length; i++) { - var obj = self.persons[i]; - if (obj.email == email) { - return obj; - } - - } - }, - 'page' : 1, - 'hasMore' : true, - 'isDeleting' : false, - 'isLoading' : false, - 'isSaving' : false, - 'persons' : [], - 'search' : null, - 'sorting' : 'name', - 'ordering' : 'ASC', - 'doSearch' : function () { - self.hasMore = true; - self.page = 1; - self.persons = []; - self.loadContacts(); - }, - 'doOrder' : function () { - self.hasMore = true; - self.page = 1; - self.persons = []; - self.loadContacts(); - }, - 'loadContacts' : function () { - if (self.hasMore && !self.isLoading) { - self.isLoading = true; - - var params = { - '_page' : self.page, - '_sort' : self.sorting, - "_order": self.ordering, - 'q' : self.search - }; - - Contact.query(params, function (data) { - console.debug(data); - angular.forEach(data, function (person) { - self.persons.push(new Contact(person)); - }); - - if (data.length === 0) { - self.hasMore = false; - } - self.isLoading = false; - }); - } - - }, - 'loadMore' : function () { - if (self.hasMore && !self.isLoading) { - self.page += 1; - self.loadContacts(); - } - }, - 'updateContact': function (person) { - var d = $q.defer(); - self.isSaving = true; - person.$update().then(function () { - self.isSaving = false; - toaster.pop('success', 'Updated ' + person.name); - d.resolve() - }); - return d.promise; - }, - 'removeContact': function (person) { - var d = $q.defer(); - self.isDeleting = true; - var name = person.name; - person.$remove().then(function () { - self.isDeleting = false; - var index = self.persons.indexOf(person); - self.persons.splice(index, 1); - toaster.pop('success', 'Deleted ' + name); - d.resolve() - }); - return d.promise; - }, - 'createContact': function (person) { - var d = $q.defer(); - self.isSaving = true; - Contact.save(person).$promise.then(function () { - self.isSaving = false; - self.hasMore = true; - self.page = 1; - self.persons = []; - self.loadContacts(); - toaster.pop('success', 'Created ' + person.name); - d.resolve() - }); - return d.promise; - } - //'watchFilters' : function () { - // $rootScope.$watch(function () { - // return self.search; - // }, function (newVal) { - // if (angular.isDefined(newVal)) { - // self.doSearch(); - // } - // }); - // - // //$rootScope.$watch(function () { - // // return self.ordering + self.sorting; - // //}, function (newVal) { - // // if (angular.isDefined(newVal)) { - // // self.doOrder(); - // // } - // //}); - //} +export class ContactService { + private Contact; + private toaster; + private page = 1; + private hasMore = true; + private isLoading = false; + private isSaving = false; + private isDeleting = false; + private selectedPerson = null; + private persons = []; + private search = null; + private sorting = 'name'; + private ordering = 'ASC'; + + + constructor(Contact, toaster) { + this.Contact = Contact; + this.toaster = toaster; + + this.loadContacts(); + } + + getPerson(email) { + for (let person of this.persons) { + if (person.email === email) { + return person; + } + } + } + + doSearch() { + this.hasMore = true; + this.page = 1; + this.persons = []; + this.loadContacts(); + } + + loadContacts() { + if (this.hasMore && !this.isLoading) { + this.isLoading = true; + let params = { + '_page': this.page, + '_sort': this.sorting, + "_order": this.ordering, + 'q': this.search }; - self.loadContacts(); - //self.watchFilters(); + this.Contact.query(params).then(res => { + console.log(res); + for (let person of res.data) { + this.persons.push(person); + } + if (!res.data) { + this.hasMore = false; + } + this.isLoading = false; + }); + } + + }; + + loadMore() { + if (this.hasMore && !this.isLoading) { + this.page += 1; + this.loadContacts(); + } + }; + + updateContact(person) { + return new Promise((resolve, reject) => { + this.isSaving = true; + this.Contact.update(person).then(() => { + this.isSaving = false; + this.toaster.pop('success', 'Updated ' + person.name); + resolve() + }); + }); + }; - return self; + removeContact(person) { + return new Promise((resolve, reject) => { + this.isDeleting = true; + this.Contact.remove(person).then(() => { + this.isDeleting = false; + let index = this.persons.indexOf(person); + this.persons.splice(index, 1); + this.selectedPerson = null; + this.toaster.pop('success', 'Deleted ' + person.name); + resolve() + }); + }); + }; - }); \ No newline at end of file + createContact(person) { + return new Promise((resolve, reject) => { + this.isSaving = true; + this.Contact.save(person).then(() => { + this.isSaving = false; + this.selectedPerson = null; + this.hasMore = true; + this.page = 1; + this.persons = []; + this.loadContacts(); + this.toaster.pop('success', 'Created ' + person.name); + resolve() + }); + }); + }; +} + + +angular + .module('codecraft') + .service('ContactService', ContactService); \ No newline at end of file