Introduction to Angular Using Hackathon Style Project

Day 1

Morning

• Chapter 01 Angular and Development Setup (40 min)
• Lab 01 Development Setup (35 Min)
• Chapter 02 TypeScript, Components and Form Basics (60 min)
• Lab 02 - Introduction to Components (25 min)
• Lab 03 - Create the Subscription Form Component (20 min)
• Lab 04 - Template Driven Form (25 min)

Afternoon

• Project Work (80 min)
• Progress Review (20 min)
• Project Work – continued (80 min)
• Progress Review (20 min)

Project Overview

Today you will be creating a new Angular project that displays to-do items, implementing components to represent the main areas of the page and getting familiar with the development environment and tools.

Project Goals

• Create a new Angular development setup and project
• Work with Angular CLI to create components
• Implement components for; Header , Body and Footer sections
• Create a ToDo item detail form component
• Implement form submit to save data locally
• Get familiar with coding in TypeScript
• Gain experience using Visual Studio Code editor

Day 2

Morning

• Chapter 3 Binding, Component Communication and Directives (55 min)
• Lab 5   Understanding Data Binding (25min)
• Lab 6   One Way Data Binding in a Custom Component (15min)
• Lab 7   Using Structural Directives (20min)
• Chapter 04 Services and HTTP (40 min)
• Lab 8 Service and Dependency Injection (20min)
• Lab 9 HTTP Client Development (15 Min)

Afternoon

• Project Work (80 min)
• Progress Review (20 min)
• Project Work – continued (80 min)
• Progress Review (20 min)

Project Overview

On day two, you will be adding a To-do list component, adding navigation links to switch between the list and detail component views and accessing the To-do data from a file using HTTP.

Project Goals

• Move to-do list property to app.component
• Pass list property to detail form in template
• Add a list component that uses ngFor
• Use ngSwitch to switch between list and details
• Add navigation links between list and details
• Move to-do list data into a file
• Access the file on startup using HttpClient
• Place startup code in an ngOnInit method

Day 3

Morning

• Chapter 5 Chapter 5 Pipes and Routing (55 min)
• Lab 10 Using Pipes (20 Min)
• Lab 11 Basic Single Page Application Using Router (25min)
• Chapter 6 Advanced Routing and HTTP (55 min)
• Lab 12 Angular Communication with REST Services (45)

Afternoon

• Project Work (80 min)
• Progress Review (20 min)
• Project Work – continued (80 min)
• Progress Review (20 min)

Project Overview

Your project goals for today include coding features that support adding of new To-do items, switching to a RESTful web service as your data source,  adding type-through search capabilities and using routing to navigate between components.

Project Goals

• Add input box and button that creates new todo items
• Use a rest service to retrieve data
• Create custom array pipes
• Place search box and controls on list screen
• Hookup search box and controls to custom pipes
• Add routing to the app
• Replace ngSwitch with routed components
• Replace navigation links with ones that use routing

Day 4

Morning

• Chapter 7 Advanced Routing Techniques (55 min)
• Lab 13 Advanced Routing  (60 Min)
• Chapter 8 Observables and Web Sockets (55 min)
• Lab 14 Lazy Loading Modules (20 min)
• Lab 15 Consuming Data from Web Sockets (25 min)

Afternoon

• Project Work (80 min)
• Progress Review (20 min)
• Project Work – continued (80 min)
• Progress Review (20 min)

Project Overview

On day four you will add create, delete and update capabilities to the application, use route parameters when navigating from the list to the detail screen and implement push updates using web sockets.

Project Goals

• Add navigation link styling
• Implement "Add record to REST service"
• Implement "Delete record from REST service"
• Implement "Update record on REST service"
• Use route parameter to navigate to specific detail record
• Add navigation links to each list item
• Implement push updates using web sockets

Day 5

Morning

• Chapter 9 Styling, Custom Directives, Validation and Modules (70 min)
• Lab 16 Using Basic Angular Directives (20 min)
• Lab 17 Validation of a template driven form (25 min)
• Chapter 10 Unit Testing and Angular Bootstrap (70 min)
• Lab 18 Introduction to Testing Angular Components (35)
• Lab 19 Using Angular Bootstrap (15)

Afternoon

• Project Work (80 min)
• Progress Review (20 min)
• Project Work – continued (80 min)
• Progress Review (20 min)

Project Overview

The final day of the project, you will refactor the application to include a home page, modularize the To-do components and services, add To-do detail form validation, lazy load the To-do module and style the application using bootstrap.

Project Goals

• Refactor the app to add a home page
• Refactor todo list functionality into its own module
• Make a link on home page that brings up the todo list
• Implement lazy loading for the todo module
• Add validation to the todo detail form
• Style the application