Introduction to Angular Programming Training

Customized Onsite Training

3
Days
  • Customized Content
  • For Groups of 5+
  • Online or On-location
  • Expert Instructors

Live Online Training

$1,575.00
or 3 vouchers
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

Upcoming Classes

  • See More Classes

Please select a class.
Overview

This Introduction to Angular training class covers everything you need to know to get started with this next generation of the Angular framework. Angular makes the creation of single-page applications even easier that before. In this course developers will learn to use Angular Directives and to create Angular Components and Services to develop applications based on the Model-View-Controller (MVC) architecture. You will learn to use HTML Templates to define views and to connect views with code using output, two-way, event and property bindings. The course reviews the benefits and challenges of Single Page Applications and how to overcome those challenges using the Angular Router. The course also covers everything you need to know about Typescript, a programming language based on JavaScript that is used to create Angular applications.

Goals
  1. Create single page web applications using the MVC pattern of Angular
  2. Understand how write and organize Angular code
  3. Program Angular View Components and Services
  4. Use Angular output, two-way, event and property bindings
  5. Exchange data with network servers using the Angular HTTP Client
  6. Work with Angular Pipes to format data
  7. Create and work with Angular Forms
  8. Work with Angular Component Router
Outline
  1. Introducing Angular
    1. What is Angular?
    2. Central Features of the Angular Framework
    3. Why Angular?
    4. Scope and Goal of Angular
    5. Angular vs. AngularJS
    6. But Isn't It "Angular 2"?
    7. Installing and Using Angular
    8. Adding Angular and Dependencies to Your App
    9. Building Blocks of an Angular Application
    10. A Basic Angular Application
    11. Basic App - index.html
    12. Basic-App: Application Module File
    13. Basic-App: Main Bootstrap File
    14. Basic-App: The Component File
    15. Summary
  2. Development Setup of Angular
    1. Angular is Modular
    2. Managing Angular Files and Dependencies
    3. What is Node.js?
    4. Application of Node.js
    5. Installing Node.js and NPM
    6. "Hello World!" Node app
    7. Node Libraries
    8. Node Package Manager (NPM)
    9. Package.json
    10. Semantic Version Numbering
    11. Package Version Numbering Syntax
    12. Updating Packages
    13. Uninstalling Packages
    14. Installing Angular Packages
    15. Angular CLI
    16. Angular Development Overview
    17. Angular
    18. Development
    19. Dependencies
    20. TypeScript Definitions
    21. Testing Tools
    22. Development Servers
    23. Angular
    24. Application
    25. Dependencies
    26. Module Loaders
    27. SystemJS Module Loader
    28. WebPack Module Bundler
    29. Additional Application Dependencies
    30. Summary
  3. Introduction to TypeScript and ES6
    1. Programming Languages for Use with Angular
    2. TypeScript Syntax
    3. Programming Editors
    4. The Type System – Defining Variables
    5. The Type System – Defining Arrays
    6. The Type System – Classes & Objects
    7. Class Constructors
    8. Class Constructors – Alternate Form
    9. Interfaces
    10. Parameter and Return Value Types
    11. Working with Modules
    12. TypeScript Transpilation
    13. var
    14. ,
    15. let
    16. and
    17. const -
    18. Defined
    19. var
    20. ,
    21. let
    22. and
    23. const -
    24. U
    25. sage
    26. Arrow Functions
    27. Template Strings
    28. Template Strings – Variables and Expressions
    29. Template Strings – Multiline
    30. Generics - Class
    31. Generics - Methods
    32. Generics - Restricting Types
    33. Generics - Restricting Types: Example
    34. Summary
  4. Components in Angular
    1. What is a Component?
    2. An Example Component
    3. Component Starter
    4. Developing a Simple Login Component
    5. Login Component: Add HTML
    6. The HTML Component Template
    7. The templateUrl property
    8. Login Component: Add CSS Styling
    9. Login Component: Hook Up Input Fields and Button
    10. Login Component: Fields & Button in the Component Class
    11. Component Decorator Properties
    12. Component Lifecycle Hooks
    13. Using a Lifecycle Hook:
    14. OnInit
    15. Summary
  5. Data and Event Binding
    1. Binding Syntax
    2. One-Way Output Binding
    3. Binding Displayed Output Values
    4. Two-Way Binding of Input Fields
    5. Input Binding Examples
    6. Binding Events
    7. Binding Events Examples
    8. Setting Element Properties
    9. Setting Properties: Examples
    10. Passing Data into Components using @Input()
    11. Passing Data from Child to Parent using @Output()
    12. @Output() Example - Child Component
    13. @Output() Example - Parent Component
    14. Summary
  6. Attribute Directives and Property Bindings
    1. What are Directives
    2. Directive Types
    3. Apply Styles by Changing Classes
    4. Changing Classes – Example
    5. Applying Styles Directly
    6. Applying Styles Directly - Example
    7. Obsolete Directives and Property Binding
    8. Controlling Element Visibility
    9. Setting Image Source Dynamically
    10. Setting Hyperlink Source Dynamically
    11. Summary
  7. Structural Directives
    1. Structural Directives
    2. Adding and Removing Elements Dynamically
    3. Looping Using ngFor
    4. ngFor - Basic Syntax
    5. ngFor - Full Template Syntax
    6. Creating Tables with ngFor
    7. ngFor Local Variables
    8. ngFor Changes in the backing data source
    9. Swapping Elements with ngSwitch
    10. ngSwitch - Basic Syntax
    11. ngSwitch - Full Template Syntax
    12. Summary
  8. Template Driven Forms
    1. Template Driven Forms
    2. Importing Forms Module
    3. A Basic Angular Form
    4. Binding Input Fields
    5. Accessing the Form Object
    6. Binding the Form Submit Event
    7. The Submit Function
    8. Basic HTML5 Validation - "required" Attribute
    9. HTML5 vs. Angular Validation
    10. Angular Validators
    11. Angular Validation State
    12. Displaying
    13. Form
    14. Validation State
    15. Displaying
    16. Field
    17. Validation State
    18. Displaying Validation State Using Classes
    19. Disabling Submit when Form is Invalid
    20. Submitting the Form
    21. Binding to Object Variables
    22. Additional Input Types
    23. Checkboxes
    24. Select (Drop Down) Fields
    25. Rendering Options for Select (Drop Down)
    26. Date fields
    27. Radio Buttons
    28. Summary
  9. Model Driven Forms
    1. Model Driven Forms Overview
    2. Setup for Model Driven Forms
    3. Form Component Setup
    4. Setup Main FormGroup
    5. formControlName
    6. FormControl Object
    7. Getting Form Values
    8. FormBuilder Form Initialization
    9. Validation
    10. Built-In Validators
    11. Custom Validator
    12. Using a Custom Validator
    13. Useful FormGroup and FormControl Properties/Functions
    14. Sub FormGroups - Component Class
    15. Sub FormGroups - HTML Template
    16. Why Use Sub FormGroups
    17. Summary
  10. Angular Modules
    1. Why Angular Modules?
    2. Angular Built-in Modules
    3. The Root Module
    4. How to Create a Module
    5. Feature Modules
    6. @NgModule Properties
    7. Using One Module From Another
    8. Importing BrowserModule or CommonModule
    9. Lazy-Loaded Modules
    10. How to Organize Modules?
    11. Component moduleID Property
    12. Summary
  11. Services and Dependency Injection
    1. What is a Service?
    2. Creating a Basic Service
    3. What is Dependency Injection?
    4. What Dependency Injection Looks Like
    5. Injecting Services
    6. Dependency Injection Hierarchy Diagram
    7. Using a Service in a Component: Dedicated Instance
    8. Injection Hierarchy - Dedicated Instance
    9. Using a Service in a Component: Dedicated Instance - Example Code
    10. Using
    11. onInit
    12. to Initialize Component Data
    13. Using a Shared Service Instance
    14. Injection Hierarchy - Shared Instance
    15. Dependency Injection and @Host
    16. Dependency Injection and @Optional
    17. Summary
  12. HTTP Client
    1. The Angular HTTP Client
    2. Using The HTTP Client - Overview
    3. Importing HttpModule
    4. Importing Individual Providers into Services
    5. Service Using Http Client
    6. Service Imports
    7. The Observable object type
    8. What does an Observable Object do?
    9. Making a Basic HTTP GET Call
    10. Using the Service in a Component
    11. The PeopleService Client Component
    12. Client Component Code Review
    13. Importing Observable Methods
    14. Enhancing the Service with .map() and .catch()
    15. Using .map()
    16. Using .catch()
    17. Using toPromise()
    18. GET Request
    19. GET Request with Options
    20. POST Request
    21. POST Request Example
    22. Reading HTTP Response Headers
    23. Summary
  13. Pipes and Data Formatting
    1. What are Pipes?
    2. More on Pipes
    3. Formatting Changes in Angular
    4. Using a Built-in Pipe
    5. Built-In Pipes
    6. Using Pipes in HTML
    7. Chaining Pipes
    8. Using Pipes in JavaScript
    9. Some Pipe Examples
    10. Decimal Pipe
    11. CurrencyPipe
    12. Custom Pipes
    13. Custom Pipe Example
    14. Using Custom Pipes
    15. A Filter Pipe
    16. A Sort Pipe
    17. Pipe Category: Pure and Impure
    18. Pure Pipe Example
    19. Impure Pipe Example
    20. Summary
  14. Introduction to Single Page Applications
    1. What is a Single Page Application (SPA)
    2. SPA Workflow
    3. Traditional Web Application Capabilities
    4. Single Page Application Advantages
    5. SPA and Traditional Web Sites
    6. SPA Challanges
    7. Implementing SPA's Using Angular
    8. Simple SPA Using Visibility Control
    9. SPA Using Angular Components
    10. SPA with Angular Components - Switching
    11. SPA with Angular Components - The Displayed Component
    12. Implement SPA Using an Angular Component Router
    13. Summary
  15. The Angular Component Router
    1. Routing and Navigation
    2. The Component Router
    3. Traditional Browser Navigation
    4. Component Router Terminology
    5. Setting up the Component Router
    6. Local URL Links
    7. Browser pushState and
    8. Routes
    9. The app.routes.ts File
    10. The app.routes.ts File - Example
    11. Importing Routing in app.module.ts
    12. A Basic App With Routing
    13. App Routes
    14. AppComponent - Code
    15. AppComponent - Router Related Features
    16. AppComponent -
    17. AppComponent - routerLinks
    18. Programmatic Navigation
    19. Basic Navigation
    20. Passing Data During Navigation
    21. Creating Routes with Route Parameters
    22. Navigating with Route Parameters
    23. Using Route Parameter Values
    24. Retrieving the Route Parameter Synchronously
    25. Retrieving a Route Parameter Asynchronously
    26. Query Parameters
    27. Query Parameters - Example Component
    28. Query Parameters - queryParams
    29. Query Parameters - Navigation
    30. Retrieving Query Parameters Asynchronously
    31. Problems with Manual URL entry and Bookmarking
    32. Fixing Manual URL entry and Bookmarking
    33. Summary
Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this Angular class:

  • Prior understanding of web development using HTML, CSS, and JavaScript. Experience developing with AngularJS (the prior version) is not required.
Preparing for Class
Follow-on Courses

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

81,519

Students who have taken Live Online Training

15,629

Organizations who trust Webucator for their training needs

100%

Satisfaction guarantee and retake option

10.00

Students rated our Introduction to Angular Programming Training trainers 10.00 out of 10 based on 1 reviews

Great class! Learned a great deal of useful tips & techniques.

Janet Dobbs, Motorola
covington GA

I liked the style in which my Instructor taught. She really went down to my level with great patience!

Tom Focht, Expeditors International of Washington Inc.
Bensenville IL

As a first time SharePoint user, this course provided me with a vast amount of knowledge that I will be able to apply to my own SharePoint site.

Thomas Ingall, ServiceLink
Moon Township PA

I was the only student in the class, which was great. I was able to get one on one learning tailor fit to my needs.

Melissa Schulz, Sterling Ledet & Associates
Tualatin OR

Contact Us or call 1-877-932-8228