Presently, I am working on a small API in which I retrieve user data while learning angular2.
I have created a user class named [user.ts]:
export class User {
first_name: string;
last_name: string;
email: string;
}
Following that is the service file [user.service.ts]:
import {Http} from '@angular/http';
import {User} from '../models/user';
import 'rxjs/add/operator/toPromise';
export class UserService {
private usersUrl = 'http://localhost:8000/api/user';
constructor(private http: Http) {
}
getUsers(): Promise<User[]> {
return this.http.get(this.usersUrl)
.toPromise()
.then(response => response.json().data)
.catch(this.handleError);
}
private handleError(error: any) {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}
}
In the home component, I aim to showcase the list of users for testing purposes (the user list will be transformed into a component later).
import {OnInit, Component} from '@angular/core';
import {UserService} from '../services/user.service'
import {User} from "../models/user";
@Component({
selector: '<home>',
templateUrl: 'app/templates/user.component.html',
})
export class HomeComponent implements OnInit {
users: User[];
constructor(private userService: UserService) {
}
getUsers() {
this.userService.getUsers().then(users => this.users = users);
}
ngOnInit() {
this.getUsers();
}
}
The service is provided in my app.component.ts:
providers: [
UserService
]
Lastly, I attempt to display the data:
<div *ngIf="users" class="ui celled animated list">
<div *ngFor="let user of users" class="item">
<div class="content">
<div class="header">{{ user.first_name }} {{ user.last_name }}</div>
{{ user.email }}
</div>
</div>
</div>
Do you think there is anything else I need to consider?
This is the JSON data being retrieved:
[
{
"id":1,
"first_name":"Jameson",
"last_name":"Ziemann",
"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2048414e4b0e52554e5445604558414d504c450e4e4554">[email protected]</a>",
"created_at":"2016-07-07 06:24:25",
"updated_at":"2016-07-07 06:24:25"
}
]