
Introduction to Angular Programming Training
Course Length:
Delivery Methods:
Next Live Class:Apr 19-21, 2021 10AM-5PM ET
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 .
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.
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
- Introducing Angular
- What is Angular?
- Central Features of the Angular Framework
- Appropriate Use Cases
- Building Blocks of an Angular Application
- Basic Architecture of an Angular Application
- Installing and Using Angular
- Anatomy of an Angular Application
- Running the Application
- Building and Deploying the Application
- Summary
- Introduction to TypeScript
- Programming Languages for Use with Angular
- TypeScript Syntax
- Programming Editors
- The Type System – Defining Variables
- The Type System – Defining Arrays
- Type in Functions
- Type Inference
- Defining Classes
- Class Methods
- Class Constructors
- Class Constructors – Alternate Form
- Interfaces
- Working with ES6 Modules
- Visibility Control
- var vs let
- Arrow Functions
- Arrow Function Compact Syntax
- Arrow Function and Caller Context
- Template Strings
- Generics in Class
- Generics in Function
- Generics - Restricting Types
- TypeScript Transpilation
- Summary
- Components
- What is a Component?
- An Example Component
- Creating a Component Using Angular CLI
- The Component Class
- The @Component Decorator
- Registering a Component to Its Module
- Component Template
- Example: HelloComponent Template
- Example: The HelloComponent Class
- Using a Component
- Run the Application
- Component Hierarchy
- The Application Root Component
- The Bootstrap File
- Component Lifecycle Hooks
- Example Lifecycle Hooks
- CSS Styles
- Summary
- Component Templates
- Templates
- Template Location
- The Mustache {{ }} Syntax
- Setting DOM Element Properties
- Setting Element Body Text
- Event Binding
- Expression Event Handler
- Prevent Default Handling
- Attribute Directives
- Apply Styles by Changing CSS Classes
- Example: ngClass
- Applying Styles Directly
- Structural Directives
- Conditionally Execute Template
- Example: ngIf
- Looping Using ngFor
- ngFor Local Variables
- Manipulating the Collection
- Example - Deleting an Item
- Item Tracking with ngFor
- Swapping Elements with ngSwitch
- Grouping Elements
- Template Reference Variable
- Summary
- Inter Component Communication
- Communication Basics
- The Data Flow Architecture
- Preparing the Child to Receive Data
- Send Data from Parent
- More About Setting Properties
- Firing Event from a Component
- @Output() Example - Child Component
- @Output() Example - Parent Component
- Full Two Way Binding
- Setting up Two Way Data Binding in Parent
- Summary
- Template Driven Forms
- Template Driven Forms
- Importing Forms Module
- Basic Approach
- Setting Up a Form
- Getting User Input
- Omitting ngForm Attribute
- Initialize the Form
- Two Way Data Binding
- Form Validation
- Angular Validators
- Displaying Validation State Using Classes
- Additional Input Types
- Checkboxes
- Select (Drop Down) Fields
- Rendering Options for Select (Drop Down)
- Date fields
- Radio Buttons
- Summary
- Reactive Forms
- Reactive Forms Overview
- The Building Blocks
- Import ReactiveFormsModule
- Construct a Form
- Design the Template
- Getting Input Values
- Initializing the Input Fields
- Setting Form Values
- Subscribing to Input Changes
- Validation
- Built-In Validators
- Showing Validation Error
- Custom Validator
- Using a Custom Validator
- Supplying Configuration to Custom Validator
- Sub FormGroups - Component Class
- Sub FormGroups - HTML Template
- Why Use Sub FormGroups
- Summary
- Services and Dependency Injection
- What is a Service?
- Creating a Basic Service
- The Service Class
- What is Dependency Injection?
- Injecting a Service Instance
- Injectors
- Injector Hierarchy
- The Root Injector
- Registering a Service with a Component's Injector
- Where to Register a Service?
- Dependency Injection in Other Artifacts
- Providing an Alternate Implementation
- Dependency Injection and @Host
- Dependency Injection and @Optional
- Summary
- HTTP Client
- The Angular HTTP Client
- Using The HTTP Client - Overview
- Importing HttpClientModule
- Service Using HttpClient
- Making a GET Request
- What does an Observable Object do?
- Using the Service in a Component
- The PeopleService Client Component
- Error Handling
- Customizing the Error Object
- Making a POST Request
- Making a PUT Request
- Making a DELETE Request
- Summary
- Pipes and Data Formatting
- What are Pipes?
- Built-In Pipes
- Using Pipes in HTML Template
- Chaining Pipes
- Internationalized Pipes (i18n)
- Loading Locale Data
- The date Pipe
- The number Pipe
- Currency Pipe
- Create a Custom Pipe
- Custom Pipe Example
- Using Custom Pipes
- Using a Pipe with ngFor
- A Filter Pipe
- Pipe Category: Pure and Impure
- Pure Pipe Example
- Impure Pipe Example
- Summary
- Introduction to Single Page Applications
- What is a Single Page Application (SPA)
- Traditional Web Application
- SPA Workflow
- Single Page Application Advantages
- HTML5 History API
- SPA Challenges
- Implementing SPA's Using Angular
- Summary
- The Angular Component Router
- The Component Router
- View Navigation
- The Angular Router API
- Creating a Router Enabled Application
- Hosting the Routed Components
- Navigation Using Links and Buttons
- Programmatic Navigation
- Passing Route Parameters
- Navigating with Route Parameters
- Obtaining the Route Parameter Values
- Retrieving the Route Parameter Synchronously
- Retrieving a Route Parameter Asynchronously
- Query Parameters
- Supplying Query Parameters
- Retrieving Query Parameters Asynchronously
- Problems with Manual URL entry and Bookmarking
- 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
Request a Private Class
- Private Class for your Team
- Online or On-location
- Customizable
- Expert Instructors