Skip to content

Step 5 #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jawache wants to merge 1 commit into
base: step-4
Choose a base branch
from
Open

Step 5 #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: '<person-list></person-list>'`

### 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`

38 changes: 31 additions & 7 deletions src/app/services/contact.resource.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
}
});
});
.service("Contact", Contact);
234 changes: 110 additions & 124 deletions src/app/services/contact.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
});
});
};

});
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);