Developing a data-driven UI without a backend running is usually impossible unless you manually swap out the API. This causes developers to have two terminals running, one for the UI and one for the backend. Let’s get start with mocks services in Angular using file replacements to automatically swap out the mocks for the real services when in production mode.

1. To get started, make sure your service is using an interface describing all required methods in your service. This will ensure both the mock and real services are the same. For example:

export interface ITodoService {

    // returns observable that resolves to list of todos
    getTodos(): Observable<Todo[]>;

    // returns observable that resolves to ID of new todo
    addTodo(newTodo: Todo): Observable<number>;

    // returns observable that resolves to status message
    updateTodo(todoToUpdate: Todo): Observable<string>;

    // returns observable that resolves to status message
    deleteTodo(todoId: number): Observable<string>;
}

#full-stack #data #api #angular #angular-services