Building a Todo App with Angular CLI
This article on building a todo app with Angular CLI is the first in a four-part series on how to write a todo application in Angular 2:
- Part 0— The Ultimate Angular CLI Reference Guide
- Part 1— Getting our first version of the Todo application up and running
- Part 2— Creating separate components to display a list of todos and a single todo
- Part 3— Update the Todo service to communicate with a REST API
- Part 4— Use Angular router to resolve data
In each article, we’ll refine the underlying architecture of the application and we make sure we have a working version of the application that looks like this:
By the end of this series, our application architecture will look like this:
The items that are marked with a red border are discussed in this article, while items that are not marked with a red border will be discussed in follow-up articles within this series.
In this first part, you’ll learn how to:
- initialize your Todo application using Angular CLI
- create a
Todoclass to represent individual todos
- create a
TodoDataServiceservice to create, update and remove todos
- use the
AppComponentcomponent to display the user interface
- deploy your application to GitHub pages
So let’s get started!
Rather than a successor of AngularJS 1.x, Angular 2 can be considered an entirely new framework built on lessons from AngularJS 1.x. Hence the name change where Angular is used to denote Angular 2 and AngularJS refers to AngularJS 1.x. In this article, we’ll use Angular and Angular 2 interchangeably, but they both refer to Angular 2.
As of February 9, 2017, the
ng deploy command has been removed from the core of Angular CLI. Read more here.
Initialize Your Todo Application Using Angular CLI
One of the easiest ways to start a new Angular 2 application is to use Angular’s command-line interface (CLI).
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
This should display the version you’ve installed:
angular-cli: 1.0.0-beta.21 node: 6.1.0 os: darwin x64
Now that you have Angular CLI installed, you can use it to generate your Todo application:
$ ng new todo-app
This creates a new directory with all files you need to get started:
todo-app ├── README.md ├── angular-cli.json ├── e2e │ ├── app.e2e-spec.ts │ ├── app.po.ts │ └── tsconfig.json ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── index.ts │ ├── assets │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ ├── test.ts │ ├── tsconfig.json │ └── typings.d.ts └── tslint.json
If you’re not familiar with the Angular CLI yet, make sure you check out The Ultimate Angular CLI Reference.
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
The Angular CLI development server includes LiveReload support, so your browser automatically reloads the application when a source file changes.
How convenient is that!
Continue reading %Building a Todo App with Angular CLI%