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 | any {
        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 | any{
        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.


Rate this lesson

Previous lesson Next lesson

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

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...