Todo List App – Lesson 5 – Code review

Author: Dawid Adach

-

Code review

Within last few minutes, we have built our first Angular application. I hope that I have shown you that Angular isn't a rocket science and everyone can create quite a complex app within few minutes. However, we didn't learn much yet so it's high time to do a few step backs and analyze code which we used.

1. Todo Data Service

Let's have a look at the following file:

src/app/todos/todo-data.service.ts

Initially, we are using 2 variables:

lastId = 0; //this variable keep id of the last todo
  todos: Todo[] = []; // this is an Array of Todos items

Further in the code we expose few basic functions:


    // First function allow us add new Todo to the Array of Todos and increments lastId
  addTodo(todo: Todo): TodoDataService {
    ...
  }

  // This function allows us to remove Todo from the Array
  deleteTodoById(id: number): TodoDataService {
    ...
  }

  // This function updates existing Todo
  updateTodoById(id: number, values: Object = {}): Todo {
    ...
  }

  // Returns all Todos
  getAllTodos(): Todo[] {
    ...
  }

  // Returns single Todo with given id
  getTodoById(id: number): Todo {
    ...
  }

  // Returns all Todos for given category id
  getTodoByCategory(id: number): Todo[] {
    ...
  }

  // Updates Todo status (complete/incomplete)
  toggleTodoComplete(todo: Todo) {
    ...
  }

Within next lessons, we will have a closer look at each of the function. For now, we don't want to touch too many technical details instead, we will focus on the logic of the application.

2. Category Data service

Let's have a look at Category Data service file

src/app/categories/category-data.service.ts

Similar to Todo service, Category service also uses 2 variables :

lastId = 0; //this variable keep id of the last Category
  categories: Category[] = []; // this is an Array of Categories

Further in the code we expose few basic functions:


    // This functions adds a new Category to the Array of Categories and increments lastId
  addCategory(category: Category): CategoryDataService {
    ...
  }

  // This function allows us to remove Category from the Array
  deleteCategoryById(id: number): CategoryDataService {
    ...
  }

  // This function updates existing Category
  updateCategoryById(id: number, values: Object = {}): Category {
    ...
  }

  // Returns all Categories
  getAllCategories(): Category[] {
    ...
  }

  // Returns single Category with given id
  getCategoryById(id: number): Category {
    ...
  }

3. Application Programming Interface

Now important thing to remember: Todo and Category service imitate an API which stands for Application Programming Interface. We will learn in detail about API in more advanced lessons, for now, I want you to think about API as set of operations which allows us to generate a business logic.

You can find API everywhere, let me give you some samples:

  • Banks use API to transfer money between accounts/provide account balance
  • Telco companies use API to send/receive messages
  • Facebook uses API to display you news in your feed
  • Youtube uses API to show you the list of movies
  • Google use API to show you list of results

To give you a better understanding of our Todo App, let's compare it to a Bank. Our API allows us to create Categories and add or remove Todos from Category. If we were a bank, we would have an API to create accounts (i.e. open new saving account or current account) and move money between accounts. Can you similarity to our Todo app? Think of accounts as they were Categories, and money were our Todos. Of course, unlike Todos, we cannot "create" money (:() but we can move them from one Category to another.

Now what is important is that similarly to banks, we also have a single API but we can have multiple channels. You can access your bank using your website, mobile application, phone or you can go to a local branch. Regardless of which channel you will use, they will all call the same API. In our case we have created only 1 channel which is our website now but in future lessons, we will learn how to use more of them.

4. Channels

As you remember we have created a frontend layer using HTML and Typescript when we edited following files:

src/app/app.component.html
src/app/app.component.spec.ts
src/app/app.component.ts

In next lesson we will analyze step by step HTML used to create a visual part of our app and Typescript code which is calling our API. If you want to be notified about new lessons you can subscribe to our Angular Tutorial newsletter (you can find form in the sidebar on the right side).

Meanwhile you can continue with next tutorial.


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