How To Take This Class
Course Overview
In this hands-on Angular Training course, students will obtain the foundation to get up and running with the latest version of Angular. Students will begin by learning about TypeScript - the language used in Angular. Students will then move on to create their first app, use the built-in components of Angular and then begin creating their own components. Next, the course moves onto intermediate concepts like using forms, APIs, routing to different pages and using Dependency Injection to organize code. In addition, students will learn how to test and deploy their Angular applications. This course is up-to-date through Angular 8.
Course Prerequisites
Students should have a familiarity with basic application development concepts.
Course Audience
This course is designed for students who either have no previous experience with Angular or students who have some experience using a previous version of Angular and want to get up to speed on the latest version of Angular.
What You'll Learn
After successful completion of this course, students will be able to:
- Use the TypeScript language
- Use Built-in Directives
- Create Forms in Angular
- Understand and use HTTP and APIs
- Understand and use Routing
- Understand and use Dependency Injection
- Create Advanced Components
- Test an Angular application
- Deploy an Angular application
- Use the TypeScript language
- Use Built-in Directives
- Create Forms in Angular
- Understand and use HTTP and APIs
- Understand and use Routing
- Understand and use Dependency Injection
- Create Advanced Components
- Test an Angular application
- Deploy an Angular application
Course Duration
3 Days
Course Outline
- Introduction to TypeScript
- Installing TypeScript and RxJS
- TypeScript Overview
- Creating a New Angular Project
- Installing the Angular CLI
- Creating a New Angular Project
- Opening the New Angular Project
- Reviewing the Default Angular Project Structure
- Running Your Project
- Running Your Angular Project
- Making Changes to Your Angular Project
- Using a CSS Framework
- Installing a CSS Framework
- Stopping and Restaring the Build and Web Server
- Verify Styles are Working in Your Angular Application
- Your First Component
- Creating a Feature Module
- Creating a Component
- Creating Data Structures
- Create a Model or Entity Object
- Add Data
- Displaying Data
- Passing Data into a Component
- Creating a Presentation Component
- Passing Data into the Presentation Component
- Looping Over Data
- Using ngFor to Loop Over Data
- Using Interpolation
- Using Property Binding to Display Data
- Formatting Data for Display
- Using Built-in Pipes to Format Data
- Using the Built-in Currency Pipe
- More Reusable Components
- Creating a Presentation Component for Each Project
- Passing a Project into the Presentation Component
- Responding to an Event
- Using Event Binding
- Responding to User Events
- Create a Form to Edit Your Data
- Creating a Form to Edit Data
- Creating a Form Component
- Rendering a Form Component
- Styling a Form Component
- Communicating from Child to Parent Component
- Creating Custom Events in the Child Component
- Listening for Custom Events in the Parent Component
- Hiding and Showing Components
- Using ngIf
- Hide or Show a Component
- Preventing a Page Refresh
- Subscribe to an Event Handler
- Implement and Event Handler Method
- More Component Communication
- Create a Custom Event in a Child Form Component
- Listen for the Custom Event in a Parent Form Component
- Form Binding
- Creating Reactive Binding
- Testing Form Binding
- Saving Form Values
- Using Events to Save Form Values
- Testing Your Form
- Validating Form Values
- Add Validation Functions to Controls
- Display Validation Messages
- Test Form Validation
- Refactoring Code
- Refactoring the Form Validation Code
- Services & Dependency Injection
- Create a Service
- Inject a Service into a Component
- Setup Backend REST API
- Install the Backend REST API Server
- Create Custom npm Script to Run the json Server
- Start the REST API Server
- HTTP GET
- Load Data from the REST API
- Inject the HTTPService and Make a Get Request
- HTTP Error Handling
- Handle a HTTP Error
- Translate HTTP Errors to User-friendly Errors
- Display Error Messages
- HTTP PUT
- Communicate with the REST API to Update Data
- Showing a Loading Indicator
- Show a Loading Indicator During HTTP Requests
- Router Navigation
- Create a Home Module and Route to it
- Add a Navigation Menu
- Route Parameters
- Use Parameters to Navigate Routes
- Custom Pipes
- Create a Custom Pipe
- Format Data using a Custom Pipe
- Build & Deploy
- Build an Angular Application
- Deploy an Angular Application to a Web Server
- Introduction to TypeScript
- Installing TypeScript and RxJS
- TypeScript Overview
- Creating a New Angular Project
- Installing the Angular CLI
- Creating a New Angular Project
- Opening the New Angular Project
- Reviewing the Default Angular Project Structure
- Running Your Project
- Running Your Angular Project
- Making Changes to Your Angular Project
- Using a CSS Framework
- Installing a CSS Framework
- Stopping and Restaring the Build and Web Server
- Verify Styles are Working in Your Angular Application
- Your First Component
- Creating a Feature Module
- Creating a Component
- Creating Data Structures
- Create a Model or Entity Object
- Add Data
- Displaying Data
- Passing Data into a Component
- Creating a Presentation Component
- Passing Data into the Presentation Component
- Looping Over Data
- Using ngFor to Loop Over Data
- Using Interpolation
- Using Property Binding to Display Data
- Formatting Data for Display
- Using Built-in Pipes to Format Data
- Using the Built-in Currency Pipe
- More Reusable Components
- Creating a Presentation Component for Each Project
- Passing a Project into the Presentation Component
- Responding to an Event
- Using Event Binding
- Responding to User Events
- Create a Form to Edit Your Data
- Creating a Form to Edit Data
- Creating a Form Component
- Rendering a Form Component
- Styling a Form Component
- Communicating from Child to Parent Component
- Creating Custom Events in the Child Component
- Listening for Custom Events in the Parent Component
- Hiding and Showing Components
- Using ngIf
- Hide or Show a Component
- Preventing a Page Refresh
- Subscribe to an Event Handler
- Implement and Event Handler Method
- More Component Communication
- Create a Custom Event in a Child Form Component
- Listen for the Custom Event in a Parent Form Component
- Form Binding
- Creating Reactive Binding
- Testing Form Binding
- Saving Form Values
- Using Events to Save Form Values
- Testing Your Form
- Validating Form Values
- Add Validation Functions to Controls
- Display Validation Messages
- Test Form Validation
- Refactoring Code
- Refactoring the Form Validation Code
- Services & Dependency Injection
- Create a Service
- Inject a Service into a Component
- Setup Backend REST API
- Install the Backend REST API Server
- Create Custom npm Script to Run the json Server
- Start the REST API Server
- HTTP GET
- Load Data from the REST API
- Inject the HTTPService and Make a Get Request
- HTTP Error Handling
- Handle a HTTP Error
- Translate HTTP Errors to User-friendly Errors
- Display Error Messages
- HTTP PUT
- Communicate with the REST API to Update Data
- Showing a Loading Indicator
- Show a Loading Indicator During HTTP Requests
- Router Navigation
- Create a Home Module and Route to it
- Add a Navigation Menu
- Route Parameters
- Use Parameters to Navigate Routes
- Custom Pipes
- Create a Custom Pipe
- Format Data using a Custom Pipe
- Build & Deploy
- Build an Angular Application
- Deploy an Angular Application to a Web Server
