This is an example of setting up an Angular 2.0 project and creating a small ToDo list. It's similar to the Introduction to Angular JS (1.0) walkthrough but using Angular 2.0.

This walkthough mainly talks about the mechanics of setting up an Angular 2.0 project, and setting up new components and then describes how to load data from a FoxPro backend.

You can find the source code for this example on BitBucket:

• ToDo Sample Source Code

WebStorm IDE

For this sample I'm using WebStorm from JetBrains, which is very capable with Intellisense, refactoring and code hints both for Typescript and HTML/CSS and it knows about Angular 2 expressions in code. Highly recommended when doing Angular 2.0 and Typescript development. Commercial tool with yearly licensing for a reasonable price.

• Step 1: Installation and Configuration
• Step 2 - Review what's installed
• Step 3 - Hello World with Angular 2.0
• Step 4 - Create and hook up an empty ToDo List Component
• Step 5 - Create the ToDo List Display
• Step 6 - Create ToDo Entries
• Step 7 - Todos from FoxPro
• Step 8 - Loading Todos on the Client
• Step 9 - Refactoring into a Service
• Step 10 - Build Configuration