How to Build an Angular ToDo App in 6 Easy Steps using CLI

Do you want to learn how to create an Angular ToDo App? Here are 6 easy steps that will help you to create an app with little coding efforts. [Click to Tweet]

The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

The goal in this post is to build and run a simple Angular ToDo application in TypeScript, using the Angular CLI. You can download the source code for the Angular MVC Todo app from GitHub repository angular todo app source code. 

Steps to create Angular ToDo Application:

Step 1: Set up the Development Environment.

Step 2: Create a new App with Routing.

Step 3: Serve the application.

Step 4: Create a feature module with routing.

Step 5: Add a component to the feature module.

Step 6: Set up the UI.

Final Step: Route configuration and lazy loading

The application architecture that looks like this

Step 1. Set up the Development Environment.

You need to set up your development environment before you can do anything.

Install Node.js® and npm if they are not already on your machine.

Verify that you are running at latest node and npm by running node -v and npm -v in a terminal/console window.

To install Angular CLI, run:

$ npm install -g angular-cli

This will install the ng command globally on your system.

To verify whether your installation completed successfully, you can run:

$  ng version

Step 2. Create a new App with Routing.

Now that you have Angular CLI installed, you can use it to generate your Todo application:

$ ng new todo-app --routing

This creates an app called todo-app and the –routing flag generates a file called app-routing.module.ts, which is one of the files you need for setting up lazy loading for your feature module.

Step 3. Serve the application.

You can now navigate to the new directory:

$ cd todo-app

Then start the Angular CLI development server:

$ ng serve

This will start a local development server that you can navigate to in your browser at http://localhost:4200/

Step 4. Create a feature module with routing.

Using the Angular CLI, generate a new feature module named todo-list.

$ ng generate module components/todo-list --routing

This creates a todo-list folder with two files inside; TodoListModule and TodoListRoutingModule.

Step 5. Add a component to the feature module.

Using the Angular CLI, generate a new component named todo-list.

$ ng generate component components/todo-list

This creates a folder inside of todo-list called todo-list with the four files that make up the component.

Step 6. Set up the UI.

Replace the default placeholder markup in app.component.html with a so you can easily navigate to your modules in the browser:

<app-top-header></app-top-header>
<router-outlet></router-outlet>

Configure the routes.

The structure is as follows:

In the AppRoutingModule, you configure the routes to the feature modules, in this case TodoListModule. This way, the router knows to go to the feature module.

The feature module then connects the AppRouting to the TodoListRoutingModule. Those routing modules tell the router where to go to load relevant components.

Why need lazy loading?

Normally, Angular will load all the components when starting up the application,as you can see in the app.module.ts all components are imported and put them all in the declarations array, this is will tell Angular that ‘Please load all of this components in the declarations array when starting up the application’.

This is will make our application slow when user first visit our site, because we need to download all components at first time but what user can see is only home page (home component). This is why we need lazy loading to improve the performance of loading time of the application.

How Lazy Loading work?

Lazy Loading is load only what we need to use when first starting up the application. If user navigate to a new page, then the component for that page will load immediately. However, this not mean that it load the component all the time we change page. In fact, it load only for the first visit page, it will not load when we revisit that page again.

Let’s start Lazy Loading

• Routes at the app level

  Point the lazy route to the lazy module from the app router. We can do this with the loadChildren property with the path to the module file, then reference the module itself with a hash #. This tells angular to only load TodoListModule when the todo-list url is activated.

  src/app/app-routing.ts

  
  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  const routes: Routes = [
    {
      path: '',
      redirectTo: 'todo-list',
      pathMatch: 'full'
    },  
    {
      path: 'todo-list',
      loadChildren: './components/todo-list/todo-list.module#TodoListModule'
    },    
    {
      path: 'todo-detail',
      loadChildren: './components/todo-detail/todo-detail.module#TodoDetailModule'
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
    providers: []
  })
  export class AppRouting {
  }
  

• Inside the feature module

  src/app/components/todo-list/todo-list.module.ts

  
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { TodoListRoutingModule } from './todo-list-routing.module';
  import { TodoListComponent } from './todo-list.component';
  import { TodoService } from '../../services/todo.service';
  
  @NgModule({
    imports: [CommonModule, TodoListRoutingModule],
    declarations: [TodoListComponent],
    providers: [TodoService]
  })
  export class TodoListModule {
  }
  

• Configure the feature module’s routes

  src/app/components/todo-list/todo-list-routing.module.ts

  
  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { TodoListComponent } from './todo-list.component';
  
  const routes: Routes = [
    {
      path: '',
      component: 'TodoListComponent'
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]  
  })
  export class TodoListRoutingModule {
  }
  

• Inside the component

  src/app/components/todo-list/todo-list.component.ts

  
  import {Component, OnInit} from '@angular/core';
  import {Router} from '@angular/router';
  import {Todo} from '../../model/todo';
  import {TodoService} from '../../services/todo.service';
  
  @Component({
    selector: 'app-todo-list',
    templateUrl: './todo-list.component.html',
    styleUrls: ['./todo-list.component.scss']
  })
  
  export class TodoListComponent implements OnInit {
    public todos: Todo[] = [];
  
    constructor(private router: Router , private todoService: TodoService ) { }
  
    ngOnInit() {
      this.loadAllTodoList();
    }
  
    loadAllTodoList() {
      this.todos = this.todoService.getAllTodos();
    }
  
    onClickEditTodoDetail(id) {
      this.router.navigate(['/todo-detail'], {queryParams:{id:id}});
    }
  
    onClickAddTodo() {
      this.router.navigate(['/todo-detail']);
    }
    
    onClickTodoDelete(id) {
      this.todoService.deleteTodoDetail(id);
      this.loadAllTodoList();
    }
  }
  

Hope you have enjoyed this post. Now we are sure that you can easily create an Angular ToDo App with the help of this blog. Jooble is the best platform to find Angular Developer Jobs