Angular and TypeScript Single Page Application (SPA) Development


Course Description

Angular is the new version of Google’s popular Single Page Application (SPA) framework that can be used to build robust, client-centric applications. With enhanced speed, the ability to leverage the latest language features and a more modular architecture, Angular offers a cutting-edge approach to building today’s applications.

“Learn by doing!” – that’s the goal of the Angular Application Development course. The course starts with an introduction to Single Page Applications (SPA) and the benefits that SPAs can provide to both developers and end users. It then jumps into an overview of key Angular features and ES2015/TypeScript. Students will learn what benefits ES2015 and TypeScript offer and get hands-on experience using them throughout the class. From there students learn about different aspects of the Angular framework such as components, modules, templates, data binding syntax, directives, data services, calling RESTful services, observables, decorators, routing and more. Best practices and techniques for structuring code are discussed as well as techniques for using the documentation and Angular Github source code repository to find answers to questions.

This course is taught by Google Developer Expert (GDE) Dan Wahlin.

Note: This course does not cover the AngularJS 1.x version of the framework.


Course Length:

4 Days


Prerequisites:

Attendees must have prior experience working with JavaScript, HTML and CSS to take this class. A minimum of 6-months of hands-on JavaScript experience is recommended to get the most out of the course.

For development teams that are new to ES2015 or TypeScript we offer a 1-day workshop that can be run the same week as the Angular course. We highly recommend adding this day if your team doesn’t have any experience with ES2015 or TypeScript.


Audience:

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.

Course Outline:

  1. Introduction to Angular
    • The Big Picture
    • Key Framework Features
    • Framework Architecture
    • Angular Hello World
    • Angular CLI
  2. TypeScript JumpStart
    • Introduction to TypeScript
    • Types, Keywords and Hierarchy
    • Classes, Properties and Functions
    • Interface Constraints
    • Namespaces and Modules
    • Compiling TypeScript
  3. The Angular JumpStart Application
    • Application Overview
    • Angular JumpStart in Action
    • Application Structure
  4. Components and Modules
    • Components Overview
    • Component Lifecycle
    • ES2016 Modules
    • Exploring systemjs.config.js
    • Angular Modules
  5. Template Expressions and Pipes
    • Templates Syntax Overview
    • Interpolation and Expressions
    • Working with Pipes
  6. Component Properties and Data Binding
    • Property and Event Binding
    • Input and Output Properties
    • Angular Directives
    • Two-way Binding
    • Change Detection
  7. Services, Providers and Http
    • Services Overview
    • Injectors and Providers
    • @Injectable Decorator
    • Promises and Observables
    • Calling RESTful Services with Http
  8. Routing
    • Routing Overview
    • Routing Steps
    • The Router Service
    • Route Parameters
    • Creating Child Routes
  9. Route Guards and Lazy Loading
    • Introduction to Route Guards
    • Creating and Using Route Guards
    • Lazy Loading
  10. Forms
    • Forms Overview
    • Template-Driven Forms
    • Reactive Forms
    • Managing Form Control Styles
  11. Bonus - Custom Directives and Components 
    • Directives Overview (Attribute vs. Structural)
    • Building a Custom Sorting Directive
    • Building a Custom FilterTextbox Component
    • Building a Custom Mapping Component
  12. Bonus - Webpack Fundamentals
    • Webpack Overview
    • Webpack Building Blocks
    • Ahead of Time Compilation in Angular
  13. Bonus - Unit Testing
    • Angular Unit Testing Features
    • Unit Testing Players
    • Test Suites, Specs and Expectations Overview
    • Creating an Angular Service Test Suite and Spec
    • Creating an Angular Component Test Suite and Spec
    • Mocking Objects

Private Onsite/Online Pricing for Development Teams


4-day class is $18,500 for up to 24 students (plus travel costs for onsite classes).

The course pricing includes student access to an electronic version of the course manual, lab manual, sample code and lab code. Courses can also be customized if you'd like to run a shorter or longer version of the course.

Contact Us if you'd like to schedule a class for your development team or if you have any questions.

Public Classes


Although we don't offer public training classes for individuals, we partner with Interface Technical Training and they offer instructor-led classes in Phoenix, AZ or online through their RemoteLive technology.

Training Courseware


Contact Us about licensing our courseware (slides, course manual, lab manual and code) for your own training courses.


           

Join Our Development Newsletter!