Video Course

Routing Angular v2+ Applications: Lesson 10 of 23

Refactoring for User Service

Up Next

Route Navigation from a Component

Autoplaying in 7 seconds!

Cancel

Create a Free Account to Watch

Sign Up Now

Login to your account

The User class and users array are now in two different places. This isn't very scalable since we have to update users in two locations if we want to change them.

We're going to move them into their own files so that they can be reused across our app.

app/shared/models/user.ts

export class User {
  id: number;
  name: string;
  username: string;
  avatar: string;
}

app/shared/services/user.service.ts

import { Injectable } from '@angular/core';
import { User } from '../models/user';

const usersPromise: Promise<User[]> = Promise.resolve([
  {
    id: 1,
    name: 'Chris',
    username: 'sevilayha',
    avatar: 'https://pbs.twimg.com/profile_images/422816823302561793/Hg3LD8K7_400x400.jpeg'
  },
  {
    id: 2,
    name: 'Nick',
    username: 'whatnicktweets',
    avatar: 'https://pbs.twimg.com/profile_images/502500686588690432/wXBzuCBj_400x400.jpeg'
  },
  {
    id: 3,
    name: 'Holly',
    username: 'hollylawly',
    avatar: 'https://pbs.twimg.com/profile_images/721918869821005824/2qT_RY5M_400x400.jpg'
  }
]);

@Injectable()
export class UserService {

  // get all users
  getUsers() {
    return usersPromise;
  }

  // find a specific user
  getUser(username) {
    return usersPromise.then(users => users.find(user => user.username === username));

    // let user = usersPromise.then(users => {
    //   return users.find(user => {
    //     return user.username === username;
    //   });
    // });

    // return user;
  }

}

Chris Sevilleja

157 posts

Co-founder of Scotch.io. Slapping the keyboard until something good happens.