AngularAngular ToDo AppToDo Apptodo mobile app
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
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.
node -v
npm -v
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
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.
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/
http://localhost:4200/
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.
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.
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>
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.
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.
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.
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 { }
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 { }
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 { }
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
Very good post to learn how to develop todo application using Angular
Your email address will not be published. Required fields are marked *
Name *
Email *
Website
Save my name, email, and website in this browser for the next time I comment.
Comment