Comprehensive Angular Programming Training

This Comprehensive Angular 6 training class covers all major topics required to fully use this next generation of the Angular framework. Angular 6 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 Angular
  2. Understand how to 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. Consume data from REST web services
  7. Consume WebSocket data
  8. Work with Angular Pipes to format data
  9. Create and work with Angular Forms
  10. Use Angular Component Router
  11. Use Advanced Router Usage
  12. Use Angular Animations
  13. Test and debug Angular applications
  14. Use Angular CLI
  15. Learn best practices for Angular application style and organization
Outline
  1. Introducing Angular
    1. What is Angular?
    2. Central Features of the Angular Framework
    3. Why Angular?
    4. Building Blocks of an Angular Application
    5. Basic Architecture of an Angular Application
    6. Installing and Using Angular
    7. A Basic Angular Application
    8. Anatomy of a Basic Application
    9. The Main Component File
    10. The Application Module File
    11. The index.html File
    12. The Bootstrap File
    13. Running the Application
    14. Building the Application
    15. Summary
  2. Development Setup of Angular
    1. Angular Development Lifecycle
    2. Angular is Modular
    3. What is Node.js?
    4. Installing Node.js and NPM
    5. Node Package Manager (NPM)
    6. Package Descriptor File - package.json
    7. Semantic Version Numbering
    8. Package Version Numbering Syntax
    9. Updating Packages
    10. Uninstalling Packages
    11. Installing Angular Packages
    12. Angular CLI
    13. Creating a New Project
    14. Angular
    15. Development
    16. Dependencies
    17. TypeScript Typings
    18. Testing Tools
    19. Development Web Server
    20. Configuring the Web Server
    21. The Build System
    22. Configuring the Build
    23. 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. Type in Functions
    7. Type Inference
    8. The Type System – Classes & Objects
    9. Class Constructors
    10. Class Constructors – Alternate Form
    11. Interfaces
    12. Working with ES6 Modules
    13. Visibility Control
    14. Arrow Functions
    15. Arrow Function Compact Syntax
    16. Arrow Function and Caller Context
    17. Template Strings
    18. Template Strings – Variables and Expressions
    19. Template Strings – Multiline
    20. Generics - Class
    21. Generics - Methods
    22. Generics - Restricting Types
    23. Generics - Restricting Types: Example
    24. TypeScript Transpilation
    25. Summary
  4. Components in Angular
    1. What is a Component?
    2. An Example Component
    3. The Component Class
    4. Adding a Component to Its Module
    5. Creating a Component Using Angular CLI
    6. Developing a Simple Login Component
    7. Component Template
    8. Login Component: Add HTML
    9. The HTML Component Template
    10. The templateUrl property
    11. Login Component: Add CSS Styling
    12. Login Component: Hook Up Input Fields and Button
    13. Login Component: Fields & Button in the Component Class
    14. Component Decorator Properties
    15. Component Hierarchy
    16. The Application Root Component
    17. Using a Regular Component
    18. The Build System
    19. Component Lifecycle Hooks
    20. Using a Lifecycle Hook:
    21. OnInit
    22. Summary
  5. Data and Event Binding
    1. Binding Syntax
    2. One-Way Output Binding
    3. Binding Displayed Output Values
    4. Setting Component Properties
    5. More About Setting Properties
    6. Setting DOM Element Properties
    7. Event Binding
    8. Binding Events Examples
    9. Firing Event from a Component
    10. @Output() Example - Child Component
    11. @Output() Example - Parent Component
    12. Two-Way Binding of Input Fields
    13. Input Binding Examples
    14. Two Way Binding in a Component
    15. Use Two Way Binding
    16. Breaking Down ngModel
    17. Summary
  6. Attribute Directives
    1. What are Attribute Directives
    2. Apply Styles by Changing Classes
    3. Changing Classes – Example
    4. Applying Styles Directly
    5. Applying Styles Directly - Example
    6. Controlling Element Visibility
    7. Setting Image Source Dynamically
    8. Setting Hyperlink Source Dynamically
    9. Writing a Custom Attribute Directive
    10. Using a Custom Attribute Directive
    11. Supplying Input to a Directive
    12. Handling Event from a Custom Directive
    13. Summary
  7. Structural Directives
    1. Structural Directives
    2. Adding and Removing Elements Dynamically
    3. If-Else Syntax of ngIf
    4. Looping Using ngFor
    5. ngFor - Basic Example
    6. Creating Tables with ngFor
    7. ngFor Local Variables
    8. Manipulating the Collection
    9. Example - Deleting an Item
    10. Swapping Elements with ngSwitch
    11. ngSwitch - Basic 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 NgForm Directive
    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. The NgModel Directive
    12. Controlling when validation is applied
    13. Displaying
    14. Form
    15. Validation State
    16. Displaying
    17. Field
    18. Validation State
    19. Displaying Validation State Using Classes
    20. Disabling Submit when Form is Invalid
    21. Submitting the Form
    22. Binding to Object Variables
    23. Binding to Object Variables - Code
    24. Additional Input Types
    25. Checkboxes
    26. Select (Drop Down) Fields
    27. Rendering Options for Select (Drop Down)
    28. Date fields
    29. Radio Buttons
    30. Summary
  9. Reactive Forms
    1. Reactive Forms Overview
    2. The Building Blocks
    3. Import ReactiveFormsModule
    4. Construct a Form
    5. Design the Template
    6. FormControl Constructor
    7. Getting Form Values
    8. Setting Form Values
    9. The Synchronous Nature
    10. Subscribing to Input Changes
    11. Validation
    12. Built-In Validators
    13. Showing Validation Error
    14. Custom Validator
    15. Using a Custom Validator
    16. Sub FormGroups - Component Class
    17. Sub FormGroups - HTML Template
    18. Why Use Sub FormGroups
    19. Summary
  10. Angular Modules
    1. Why Angular Modules?
    2. But, We Already Had ES6 Module
    3. Angular Built-in Modules
    4. The Root Module
    5. Feature Modules
    6. Create Feature Module Using CLI
    7. The Module Class
    8. @NgModule Properties
    9. Using One Module From Another
    10. Importing BrowserModule or CommonModule
    11. Lazy-Loaded Modules
    12. How to Organize Modules?
    13. Third Party Modules
    14. 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. Injectors
    6. Injector Hierarchy
    7. Register a Service with a Module Injector
    8. Registering a Service with the Root Injector
    9. Registering a Service with a Component's Injector
    10. Where to Register a Service?
    11. Dependency Injection in Other Artifacts
    12. Providing an Alternate Implementation
    13. Dependency Injection and @Host
    14. Dependency Injection and @Optional
    15. Summary
  12. HTTP Client
    1. The Angular HTTP Client
    2. Using The HTTP Client - Overview
    3. Importing HttpClientModule
    4. Simple Example
    5. Service Using HttpClient
    6. ES6 Import Statements
    7. Making a GET Request
    8. What does an Observable Object do?
    9. Using the Service in a Component
    10. The PeopleService Client Component
    11. Error Handling
    12. Making a POST Request
    13. Making a PUT Request
    14. Making a DELETE Request
    15. Summary
  13. Pipes and Data Formatting
    1. What are Pipes?
    2. Built-In Pipes
    3. Using Pipes in HTML Template
    4. Chaining Pipes
    5. Using Pipes in Code
    6. Internationalized Pipes (i18n)
    7. Loading Locale Data
    8. Decimal Pipe
    9. Currency Pipe
    10. Custom Pipes
    11. Custom Pipe Example
    12. Using Custom Pipes
    13. Using a Pipe with ngFor
    14. A Filter Pipe
    15. A Sort Pipe
    16. Pipe Category: Pure and Impure
    17. Pure Pipe Example
    18. Impure Pipe Example
    19. Summary
  14. Introduction to Single Page Applications
    1. What is a Single Page Application (SPA)
    2. Traditional Web Application
    3. SPA Workflow
    4. Single Page Application Advantages
    5. HTML5 History API
    6. SPA Challenges
    7. Implementing SPA's Using Angular
    8. Summary
  15. The Angular Component Router
    1. The Component Router
    2. View Navigation
    3. The Angular Router API
    4. Creating a Router Enabled Application
    5. Hosting the Routed Component
    6. Navigation Using Links and Buttons
    7. Programmatic Navigation
    8. Passing Route Parameters
    9. Navigating with Route Parameters
    10. Obtaining the Route Parameter Values
    11. Retrieving the Route Parameter Synchronously
    12. Retrieving a Route Parameter Asynchronously
    13. Query Parameters
    14. Supplying Query Parameters
    15. Retrieving Query Parameters Asynchronously
    16. Problems with Manual URL entry and Bookmarking
    17. Summary
  16. Advanced HTTP Client
    1. Request Options
    2. Returning an HttpResponse Object
    3. Setting Request Headers
    4. Creating New Observables
    5. Creating a Simple Observable
    6. The Observable.create() Method
    7. Observable Operators
    8. More About map
    9. Piping Operators
    10. The flatMap() Operator
    11. The tap() Operator
    12. The zip() Operator
    13. Caching HTTP Response
    14. Making Sequential HTTP Calls
    15. Making Parallel Calls
    16. Customizing Error Object with catchError()
    17. Error in Pipeline
    18. Error Recovery
    19. Summary
  17. Consuming WebSockets Data in Angular
    1. Web Sockets Overview
    2. Web Sockets Use Cases
    3. Web Socket URLs
    4. Web Sockets Servers
    5. Web Socket Client
    6. The socket.io-client library
    7. Using socket.io-client in JavaScript
    8. Setting up socket.io-client in Angular Projects
    9. Using socket.io-client in an Angular service
    10. Angular websocket.service Notes:
    11. The Angular Web Socket Client Sample App
    12. Angular websocket.component.ts
    13. The Full websocket.component.ts code
    14. Implementation Modifications
    15. Summary
  18. Advanced Routing
    1. Routing Overview
    2. Routing Enabled Project
    3. Routing Enabled Feature Module
    4. Using the Feature Module
    5. Lazy Loading the Feature Module
    6. Creating Links for the Feature Module Components
    7. More About Lazy Loading
    8. routerLinkActive binding
    9. Default Route
    10. Wildcard Route Path
    11. redirectTo
    12. Child Routes
    13. Defining Child Routes
    14. <router-outlet> for Child Routes
    15. Links for Child Routes
    16. Navigation Guards
    17. Creating Guard Implementations
    18. Using Guards in a Route
    19. Route Animations
    20. Summary
  19. Introduction to Testing Angular Applications
    1. Unit Testing Angular Artifacts
    2. Testing Tools
    3. Testing Setup
    4. Typical Testing Steps
    5. Test Results
    6. Jasmine Test Suites
    7. Jasmine Specs (Unit Tests)
    8. Expectations (Assertions)
    9. Matchers
    10. Examples of Using Matchers
    11. Using the not Property
    12. Setup and Teardown in Unit Test Suites
    13. Example of beforeEach and afterEach Functions
    14. Angular Test Module
    15. Example Angular Test Module
    16. Testing a Service
    17. Injecting a Service Instance
    18. Test a Synchronous Method
    19. Test an Asynchronous Method
    20. Using Mock HTTP Client
    21. Supplying Canned Response
    22. Testing a Component
    23. Component Test Module
    24. Creating a Component Instance
    25. The ComponentFixture Class
    26. Basic Component Tests
    27. The DebugElement Class
    28. Simulating User Interaction
    29. Summary
  20. Debugging
    1. Overview of Angular Debugging
    2. Viewing TypeScript Code in Debugger
    3. Using the debugger Keyword
    4. Inspecting Components
    5. Saving ng.probe Component References
    6. Modifying Values using Component References
    7. Debug Logging
    8. What is Augury?
    9. Installing Augury
    10. Opening Augury
    11. Augury - Component Tree
    12. Augury - Router Tree.
    13. Augury - NgModules Tab
    14. Common Exceptions
    15. Common Exceptions: 'No such file: package.json'
    16. Common Exceptions: 'Cant bind to ngModel'
    17. Common Exceptions: 'router-outlet not a known element'
    18. Common Exceptions: 'No provider for Router!'
    19. 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:

  • Some prior understanding of web development using HTML, CSS, and JavaScript.
  • Experience developing with AngularJS or Angular prior versions is not required.
Preparing for Class
Follow-on Courses

Training for your Team

Length: 5 Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors

Training for Yourself

$2,625.00 or 5 vouchers
  • Live Online Training
  • For Individuals
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

What people say about our training

This class rules!
Leo Generali
WeddingWire, Inc.
Webucator is a great company!
Charmaine Abram
Public School Employees of WA
Great Course for a "newbie" or someone needing a refresher.
Jake Hofer
DocuTAP
I would recommend this method of instruction to anyone .
Jeremy Schlosser
Alaska Division of Retirement & Benefits

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

61,276

Students who have taken Instructor-led Training

11,745

Organizations who trust Webucator for their Instructor-led training needs

100%

Satisfaction guarantee and retake option

9.29

Students rated our trainers 9.29 out of 10 based on 29,154 reviews

Contact Us or call 1-877-932-8228