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.

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

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 least node 6.9.x and npm 3.x.x 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 post.

10 responses to “Build an Angular ToDo App with Angular CLI in 6 Easy Steps”

  1. spy says:

    I do accept as true with all the ideas you have offered on your post. They’re really convincing and can certainly work. Still, the posts are very short for starters. May just you please prolong them a bit from subsequent time? Thank you for the post.

  2. Сialis says:

    I must thank you for the efforts you’ve put in penning this website.
    I’m hoping to see the same high-grade content by you later on as well.
    In fact, your creative writing abilities has inspired me to get my own, personal website now
    😉

  3. Cialis says:

    Oh my goodness! Amazing article dude! Thank you
    so much, However I am encountering issues with your RSS.
    I don’t understand why I am unable to join it. Is there anyone else getting
    the same RSS problems? Anyone who knows the answer will you kindly respond?
    Thanks!!

  4. Atlant says:

    I’m not sure where you are getting your info, but great topic.
    I needs to spend some time learning much more or understanding
    more. Thanks for great info I was looking for this info for my mission.

  5. Jack says:

    I’ve been surfing on-line more than three hours nowadays, yet I by no means discovered any fascinating article
    like yours. It is beautiful value sufficient for me. In my
    view, if all website owners and bloggers made excellent content as you did,
    the internet will be a lot more useful than ever before.
    bookmarked!!, I really like your site! Saved as a favorite, I like your
    web site!

  6. huidspecialist says:

    Terrific blog!

Leave a Reply

Your email address will not be published. Required fields are marked *