Routing Angular Applications: Lesson 10 of 23

Refactoring for User Service

Up Next

Route Navigation from a Component

Autoplaying in 7 seconds!

Cancel

T

Table of Contents

    he 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

    173 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.