1. Home
  2. Web Development
  3. Angular
  4. Introduction to Angular Programming Training

Introduction to Angular Programming Training

  4.5 out of 5 - Read Testimonials

Our Introduction to Angular 6 offering introduces 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. 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 Development Dependencies
    15. TypeScript Typings
    16. Testing Tools
    17. Development Web Server
    18. Configuring the Web Server
    19. The Build System
    20. Configuring the Build
    21. 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, let and const - Defined
    15. var, let and const - Usage
    16. Arrow Functions
    17. Arrow Function Compact Syntax
    18. Arrow Function and Caller Context
    19. Template Strings
    20. Template Strings – Variables and Expressions
    21. Template Strings – Multiline
    22. Generics - Class
    23. Generics - Methods
    24. Generics - Restricting Types
    25. Generics - Restricting Types: Example
    26. TypeScript Transpilation
    27. 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: OnInit
    21. 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 Form Validation State
    14. Displaying Field Validation State
    15. Displaying Validation State Using Classes
    16. Disabling Submit when Form is Invalid
    17. Submitting the Form
    18. Binding to Object Variables
    19. Binding to Object Variables - Code
    20. Additional Input Types
    21. Checkboxes
    22. Select (Drop Down) Fields
    23. Rendering Options for Select (Drop Down)
    24. Date fields
    25. Radio Buttons
    26. 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
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

Training for your Team

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

Training for Yourself

$1,575.00 or 3 vouchers

Upcoming Classes

    • See More Classes

Please select a class.
  • Live Online Training
  • For Individuals
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

What people say about our training

The instructor patiently and thoroughly walked us through the new paradigms required to develop in Angular. With her real world experience, she was able to support the training with examples that helped our development team learn and understand the language.
Cliff Beckwith
Carolina Container
Learned more from this class than any other resource.
Jahan Hussaini
Safe-Guard Products International LLC
Well taught, excellent pace, thorough coverage of the material.
James Detwiler
Pleasant Holidays, LLC
Great material, great instructor, and I look forward to taking additional courses with Webucator.
Julia Binkowski
Insurance Auto Auctions
More Testimonials

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

60,501

Students who have taken Instructor-led Training

11,679

Organizations who trust Webucator for their Instructor-led training needs

100%

Satisfaction guarantee and retake option

9.05

Students rated our Introduction to Angular Programming Training trainers 9.05 out of 10 based on 21 reviews

Contact Us or call 1-877-932-8228