Introduction to Angular Programming

2-Day Course Taught Live as In-Person or Online

Course Description

Training 4 Developers’ Introduction to Angular Programming training course teaches students how to build rich client-side web applications using HTML, CSS, JavaScript, and Angular. Students develop real-world Angular applications with JavaScript/TypeScript and learn how to use modern JavaScript/TypeScript programming techniques with an emphasis on core JavaScript/TypeScript concepts, the latest JavaScript/TypeScript syntax features, and popular user interface (UI) development with Angular. This class is for developers with modern JavaScript/TypeScript experience but wish to learn to Angular. React and Vue.js developers looking to add a new UI library to their skillset will greatly benefit from this class. Also, this class is for developers who want to learn how to create UIs using a popular and modern JavaScript framework.

Students will build a project using Angular to apply their JavaScript/TypeScript skills and to learn about modern UI development. Developers can do wonders with Angular, an ecosystem that is a full-featured framework. This course teaches all that you need to know about Angular to create modern interactive web applications. Students will learn the basics, such as building components and displaying dynamic data, and organizing applications with modules, transform output with pipes, manage application code with services, leverage the URL through routing and communicating with REST APIs.T

Course ObjectivesObjectives

  • Develop real-world JavaScript applications with Angular
  • Use the basic features of Angular such as components, modules, services, and pipes.
  • Learn best practices for building components trees and managing data and events within the tree
  • Leverage the URL and history with the Routing module
  • Leverage the URL and history with the Routing module
  • Make AJAX calls using the HttpClient
  • Write Unit Tests for an Angular application

Course PrerequisitesPrerequisites

Students should have a good working knowledge of HTML, CSS, ES2015 JavaScript and web development. Also, students should have general programming experience.

Course RequirementsRequirements

We teach all classes online. Students will need to be able to join an online session using a popular online meeting service such as Zoom, Microsoft Teams, GotoTraining, etc… If the client has no preference, Zoom will be used.

We recommend that each student have two displays. One display to view the instructor presentation and one display to use for note-taking and programming along with the instructor. The second display can be a tablet connect to the session if the meeting software provides an app for the student’s tablet.

All course materials are distributed via GitHub and Google Drive. Access to those services is needed for the class, please ensure your firewall and network policies will allow students to access those resources. If students cannot access GitHub or Google Drive, alternatives will be discussed.

Course OutlineOutline

The course is taught with the TypeScript language (TypeScript is JavaScript with strong-typing). Knowledge of JavaScript is strongly recommended for this course, but knowledge of TypeScript is NOT needed.

  1. Introduction to Angular
    1. What is Angular?
    2. What is TypeScript?
    3. What problem does Angular solve?
    4. Development Ecosystem
    5. Angular versus other frameworks
  2. Getting Started
    1. Angular CLI project generator
    2. Web Browser Developer Tools
    3. Running and Debugging an Angular Application
    4. Role of Node.js
    5. Angular Modules
    6. ES2015 Modules
    7. TypeScript Decorators
  3. Components
    1. What are Components?
    2. Angular Expressons
    3. Common Directives
      1. ngFor
      2. ngIf
      3. ngContainer
      4. ngTemplate
    4. ngFor Directive
      1. Special Variables
      2. Iterables
      3. TrackBy
    5. Styling
      1. Scoped Styles
      2. View Encapsulation
      3. ngClass
      4. ngStyle
    6. Inputs
      1. Passing Data from the Parent to the Child
      2. Literal Values
      3. Expressions
      4. Attribute Square Braces
    7. Outputs
      1. Passing Data from the Child to the Parent
      2. Event Emitter
      3. Observable and Observer
      4. Subject
      5. Attribute Banana Braces
    8. Component Model
      1. Immutable vs. Mutuable Programming
      2. Interfaces and Models
      3. Getters/Setters & Clean Templates
    9. Lifecycle Hooks
      1. Init
      2. Destroy
      3. OnChange
      4. DoCheck
    10. Template Query
      1. View Children
      2. Content Children
      3. ViewInit, ViewChecked
      4. ContentInit, ContentChecked
    11. Content Projection
      1. What is a content projection?
      2. NgContent
      3. Single Slot
      4. Multi-Slot & Selectors
  4. Pipes
    1. What is a pipe?
    2. Pure & Impure Pipes
    3. Built-in Pipes
    4. Formatting Date/Time
    5. Formatting Currency
    6. Slice for Pagination
    7. Pipe Parameters
    8. Async Pipe
    9. TypeScript Intefaces
    10. Custom Pipes
  5. Forms
    1. What are forms?
    2. Using the Forms Module
    3. Template Form vs. Reactive Form
    4. Template Form: NgModel
    5. Template Form: Validators
    6. Form Control CSS Classes
    7. Extracting Data from the Form
    8. Extracting Data from the Form
    9. Reactive Form: Control, Group, Array
    10. Reactive Form: Validators
  6. Services
    1. What is a service?
    2. Defining a Service Class
    3. Using a Root Injector
    4. Injection Types
      1. Class
      2. Value
      3. Factory
      4. Factory with Dependencies
      5. Multi-Service
    5. Hierarchical Injection
    6. Injection Tokens
  7. Integrating with REST API
    1. What is a REST API?
    2. What are AJAX calls?
    3. Using the HttpModule
    4. Using the HttpClient
    5. Passing Parameters with the HttpClient
    6. Sending a Request Body
    7. Processing a Response Body
    8. Adding additional HTTP Headers
    9. Promises vs. RxJS
  8. Routing
    1. What is routing?
    2. What is URL?
    3. Parts of a URL
    4. Setting up a Route Table
    5. Building a Route Module
    6. Paths and Path Parameters
    7. Router and Activated Route Service
    8. Navigate with Links
    9. Sibling Routes
    10. Child/Nested Routes
  9. Unit Testing with Jest (Jest can be swapped with Jasmine)
    1. What is Unit Testing?
    2. JavaScript Unit Testing
    3. Unit Testing with Jest
    4. Jest as opposed to Jasmine/Karma
    5. Testing Components
    6. Testing Pipes
    7. Testing Services
Scroll to Top