Introduction to Angular Programming Training

Name: Introduction to Angular Programming Training
Rating: 4.5 (29 reviews)

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

Create single-page web applications using the MVC pattern of Angular
Understand how write and organize Angular code
Program Angular View Components and Services
Use Angular output, two-way, event and property bindings
Exchange data with network servers using the Angular HTTP Client
Work with Angular Pipes to format data
Create and work with Angular Forms
Work with Angular Component Router

Outline

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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

Onsite: Course Setup
Live Online: Course Setup | WebEx Setup

Follow-on Courses

Advanced Angular Programming

Introduction to Angular Programming Training

Training for your Team

Training for Yourself

Upcoming Classes

What people say about our training