Angular and TypeScript Development

The Angular and Typescript Development class teaches how to develop world-class, single page applications (SPA) on the web. Angular is one of the few comprehensive JavaScript frameworks in the industry today meaning developers can develop every component of every application using Angular.

The class begins with an explanation of what Angular is and why it has become so popular with so many developers. We then explore the language of Angular: Typescript. Google recommends developers use Typescript to create their applications, but Google developers use Typescript to create Angular itself. Google must believe in the value of using Typescript. We’ll teach all the valuable enhancements Typescript offers over pure JavaScript.

Next we’ll explore Angular’s architecture and how web applications are created with Angular. The component architecture allows components to be easily shared across applications with little or no changes. We’ll use the Angular/CLI (command line interface) to generate the core objects of Angular and combine them into an application. Next, we move to Services that can be shared among components and can be used to interact with server-based JSON service controllers. We’ll enhance the application making it SPA (single page application) while we detail the routing that navigates between the applications feature components. We’ll conclude by explaining Pipes that can filter and sort collections of data, Guards that allow access to links only when a user meets the appropriate criteria, and how to leverage the Life Cycle Hooks to enhance the interactivity of our application.

Throughout the class, we’ll be building up an Angular application that will interact with data provided by a JSON server asynchronously to provide:

• Listings of the data
• Details of any individual data row
• Creating new instances of data
• Editing data

Module 1 - Overview of Angular

1. Prerequisites
2. Angular vs AngularJS
3. Angular Framework
4. Structure of an Angular application

Module 2 - Typescript

1. Overview of Typescript
2. Installing Typescript
3. Configuring Typescript
4. Features

1. Types
2. Let
3. const
4. interface
5. class
6. function parameters
7. this
8. generics
9. modules
10. importing/exporting

Module 3 - Angular

1. Overview
2. Single-page application

Module 4 - Angular/CLI

1. Installing Angular/CLI
2. creating a new project
3. generate an Angular object

Module 5 - Structure of Angular files

1. importing
2. decorators
3. classes

Module 6 - Modules

1. Overview
2. @NgModule

Module 7 - Components

1. Overview
2. @Component
3. selectors
4. template/templateUrl
5. styles/styleUrls
6. class
7. data binding
8. *ngIf
9. *ngFor
10. ngSwitch
11. ngClass
12. Expression context
13. events
14. component communications
15. Bootstrap
16. Life Cycle Hooks

Module 8 - Services

1. Overview
2. Creating a service
3. Using a service
4. HttpClient
5. Observables
6. Subscribing to observable
7. Asynchronous communication

Module 9 - Routing

1. Overview
2. <router-outlet>
3. routerLink
4. routerLinkActive
5. route
6. route path at startup and catch-all
7. child routes

Module 10 - Pipes

1. Overview
2. Example: sortPipe

Module 11 - Guards

1. Overview
2. How to use a guard

Module 12 - Life Cycle Hooks

1. Overview
2. ngOnChanges()
3. ngOnInit()
4. ngDoCheck()
5. ngAfterContentInit()
6. ngAfterContentChecked()
7. ngAfterViewInit()
8. ngAfterViewChecked()
9. ngOnDestroy()

Module 13 - Miscellaneous

1. Symbolic links to files
2. Feature modules

• HTML
• CSS
• JavaScript
• JSON
• AJAX

This course is designed for JavaScript developers looking to build Single Page Applications using the latest version of the Angular framework and the TypeScript language.