Introduction to Angular Programming Training

Introduction to Angular Programming Training

  4.5 out of 5 - Read Testimonials
Course Length:
Delivery Methods:
Register Now
Course Topics
  • Set up a complete Angular development environment
  • Develop single-page applications
  • Code with TypeScript
  • Work with Angular CLI to create applications and generate components
  • Create Components, Directives, Services, Pipes, and Custom Validators
  • Develop component templates that include Angular directives and bindings.
  • Retrieve and post data to network applications and RESTful services
  • Format data for display using Angular Pipes
  • Develop template-based and reactive forms to collect data
  • Navigate between multiple view screens using the Angular component router
Available Delivery Methods
Public Class
Public expert-led online training from the convenience of your home, office or anywhere with an internet connection. Guaranteed to run .
Private Class
Private classes are delivered for groups at your offices or a location of your choice.
Course Overview

This Introduction to Angular training class covers all the essential topics and is designed to get students up and running with Angular development in the shortest amount of time. Developers, application designers, and anyone tasked with supporting Angular applications will gain valuable knowledge required for success in their job roles.

Course Outline
  1. Introducing Angular 8
    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 8
    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. var
    15. ,
    16. let
    17. and
    18. const -
    19. Defined
    20. var
    21. ,
    22. let
    23. and
    24. const -
    25. U
    26. sage
    27. Arrow Functions
    28. Arrow Function Compact Syntax
    29. Arrow Function and Caller Context
    30. Template Strings
    31. Template Strings – Variables and Expressions
    32. Template Strings – Multiline
    33. Generics - Class
    34. Generics - Methods
    35. Generics - Restricting Types
    36. Generics - Restricting Types: Example
    37. TypeScript Transpilation
    38. Summary
  4. Components in Angular 8
    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 CSS 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 8 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
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:

  • Web development experience using HTML, CSS, and JavaScript. Prior Angular experience, with AngularJS or the current version of Angular, is not required.

Experience in the following would be useful for this Angular class:

  • Knowledge of the browser DOM.
Follow-on Courses
Register for a Live Class
$1,725.00

    • See More Class Dates

Please select a class.
Request a Private Class
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors
Request Pricing