Todo List App – Lesson 3 – Category class and service

Author: Dawid Adach

-

1. Creating the Category Class

  1. Generate Category class using CLI, run:
    ng generate class categories/category --spec
    
    which will create;
    src/app/categories/category.spec.ts
    src/app/categories/category.ts
    
  2. Open up src/app/categories/category.ts:
    export class Category {
    }
    
    and add the logic:
    export class Category {
        id: number;
        name = '';
    
        constructor(values: Object = {}) {
            Object.assign(this, values);
          }
    }
    
    Each Category instance will have two properties:
    • id: unique id number of the category
    • name: category item name
  3. Since we used the --spec option CLI generates src/app/categories/category.spec.ts for us with a basic unit test. As previously - we will just generate them for a future use.

2. Creating the CategoryDataService Service

The CategoryDataService will be responsible for managing our categories. It will allow us to create and delete categories.

  1. Generate CategoryDataService:
    ng generate service categories/CategoryData
    
    which output is:
      create src/app/categories/category-data.service.spec.ts (387 bytes)
      create src/app/categories/category-data.service.ts (114 bytes)
    
  2. Open src/app/categories/category-data.service.ts:
    import { Injectable } from '@angular/core';
    
    @Injectable()
    export class CategoryDataService {
    
      constructor() { }
    
    }
    
    and add following logic:
    import { Injectable } from '@angular/core';
    import {Category} from './category';
    
    @Injectable()
    export class CategoryDataService {
    
      // Placeholder for last id so we can simulate
      // automatic incrementing of id's
      lastId = 0;
    
        // Placeholder for category's
        categories: Category[] = [];
    
      constructor() { }
    
      // Simulate POST /categories
      addCategory(category: Category): CategoryDataService {
        if (!category.id) {
          category.id = ++this.lastId;
        }
        this.categories.push(category);
        return this;
      }
    
      // Simulate DELETE /categories/:id
      deleteCategoryById(id: number): CategoryDataService {
        this.categories = this.categories
          .filter(category => category.id !== id);
        return this;
      }
    
      // Simulate PUT /categories/:id
      updateCategoryById(id: number, values: Object = {}): Category {
        let category = this.getCategoryById(id);
        if (!category) {
          return null;
        }
        Object.assign(category, values);
        return category;
      }
    
      // Simulate GET /categories
      getAllCategories(): Category[] {
        return this.categories;
      }
    
      // Simulate GET /categories/:id
      getCategoryById(id: number): Category {
        return this.categories
          .filter(category => category.id === id)
          .pop();
      }
    
    
    }
    
    

Now when our Category part is ready we can move to the most interesting part. We will create a frontend layer which will use Todo and Category services which we have just created.


Next lesson

Spread the word:
Do you need help?: Use our support forum

About author

Dawid Adach
For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the biggest companies within a domain. Since 2 years as a co-founder of mdbootstrap.com & brandflow.net is using and teaching others technologies like Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...
Sign up to follow your progress and get additional benefits