Todo List App – Lesson 1 – Basic setup

by Dawid Adach,

Goal

Within this tutorial we will learn how to build a ToDo application which allows us to add/remove and complete tasks and organize time in handful lists. You can check a live demo of the app here.

Todoapp

Framework

In a previous lesson I've shown you how to create new empty project using Angular CLI. This time we will use our boilerplate - which is an empty project in terms of content, however it has already embed MDB package into it. Thanks we will save time on configuration.

Note:

If you want to learn how to add MDB into new or existing Angular project instead of downloading boilerplate you can follow our 5 min quick start.

1. Download a boilerplate

  1. Click here to download package.
  2. Unzip the package
  3. Optionally you can move to location where you will be able to easily navigate (tip: avoid spaces in your path)
    I will be using /Users/Dawid/aworkspace/todo

Project structure


.
├── README.txt
├── changelog
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── font
├── gulpfile.js
├── img
├── karma.conf.js
├── license.pdf
├── package-lock.json
├── package.json
├── protractor.conf.js
├── scss
│   └── [...]
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── typescripts
│   │       └── free [...]
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.scss
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
├── tslint.json
└── yarn.lock

2. Open command line and install dependencies

  1. Open your terminal (if you want to learn how to open, check a previous tutorial)
  2. Navigate to your project directory: cd /Users/Dawid/aworkspace/todo
  3. Run command npm install

Once installation is complete you are are ready to open our repository and run our project.

3. Open project in a code editor and run project.

  1. Open your text editor (I am recommending Visual Studio Code)
  2. Click File->Open and choose your project directory (mine: /Users/Dawid/aworkspace/todo)
  3. Open terminal and type ng serve -o

Your browser should automatically open new site which address is: localhost:4200


Next lesson

Do you want to share?

Facebook Twitter Google +

About author


Dawid Adach

For more than 5 years Dawid was working as an IT Consultant specializing in SOA/EAI/ESB for banking domain. He was gaining experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the biggest companies within a domain. Since 2 years as a co-founder of mdbootstrap.com & brandflow.net is using and teaching others technologies like Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...

Leave a reply

Installation:

Todo List App:

Angular Crash Course Part 1:

Typescript tutorial:

Angular Crash course Part 2:

  • 30+ lessons (coming soon)

Building Single Page Application:

  • 50+ lessons (coming soon)

Angular Crash course Part 3:

  • 40+ lessons (coming soon)

Subscribe to the newsletter and never miss new lesson again.

Do you want to be notified when the new angular lesson is published? Leave us your email.


I agree to receive the newsletter and commercial information regardin MDB Angular and Angular related tutorials from the administrator: StartupFlow s.c. Kijowska 7, Warsaw. Data is processed following the Privacy Policy.