- Familiarity with basic HTML, CSS, and JavaScript
Audience
- Developers
Angular 6 includes a number of powerful new features, including Angular Elements and new CLI commands. These features greatly expand the ability to integrate Angular with non-Angular applications based on JQuery, Vue.js, React, etc.
In this instructor-led, live training (onsite or remote), participants will learn how to create, test and deploy an Angular application using the latest features in Angular 6.
By the end of this training, participants will be able to:
- Develop Angular 6 applications using Angular CLI.
- Create web components that can be used in any HTML page.
- Consume REST web services and WebSocket data from within an Angular 6 application.
- Implement animations using Angular 6's latest animation features.
- Test, debug and deploy an Angular 6 application.
- Organize Angular 6 projects using best practices.
Format of the Course
- Interactive lecture and discussion
- Lots of exercises and practice
- Hands-on implementation in a live-lab environment
Note
- To request a customized training for this course, please contact us to arrange.
- To learn more about Angular, please visit: https://angular.io/
Introduction
- What's new in Angular 6?
Overview of Typescript and ES6 JavaScript
- TypeScript Syntax
- Using the TypeScript transpiler
- Setting up Angular 6 and Typescript
Overview of Angular 6's Parts
- Creating Components
- Databinding and String Interpolation
- Property Binding
- Event Binding
- Two-Way-Databinding
- Data Modelling
- Directives
- Bootstrapping
- Inputs & Outputs
- Angular CLI
Creating Your First Angular Application
- Planning the Application
- Setting Up an Angular Project and App Using the CLI
- Creating a Basic Project Setup Using Bootstrap 4 and Sass
Using Angular 6 Components
- Data Flow
- Working with AppModule
- Working with Custom Components
- Using Templates and Styles
- Using View Encapsulation
- Projecting Content
- Understanding Component Lifecycle and Lifecycle Hooks
- Using ViewChildren and ContentChildren
Databinding in Angular 6
- Overview of Property & Event Binding
- Binding and Assigning Aliases to Custom Properties
- Binding and Assigning Aliases to Custom Events
Working with Directives
- Built-in Directives
- Custom Directives
Angular 6 Services
- Creating a Logging Service
- Creating a Data Service
Using Dependency Injection and Providers
- Injectors, Provider, and Tokens
- Configuring Dependency Injection
- Configuring Your Provider
- Injecting Services into Components, Directives, and Services
Switching Pages with Routing
- Setting Up Routes
- Configuring and Loading Routes
- Understanding the Different Navigation Methods
- Using Parameters in Routes
- Creating Nested Routes
- Using Redirect and Wildcard Routes
- Understanding Route Guards
- Understanding Routing Strategies
Using RxJS to Create and Work with Observables in Angular
- Overview of Observables
- Overview of RxJS
- Building & Using Observables in Angular
Handling Forms
- Using the Template Driven Forms
- Using the Reactive Forms
Using Pipes
- Built-in Pipes
- Async Pipe
- Custom Pipes
Making Calls to External HTTP APIs
Using Angular Modules
Testing the Angular 6 Application
- Using Jasmine for unit testing
Debugging the Application
- Understanding Error Messages in Angular
- Using Sourcemaps to Debug Code in the Browser
- Using Augury
Optimizing the Angular 6 Application
Angular 6 Security
- Authentication
- What should and shouldn't be written in Angular
Deploying an Angular 6 Application to Production
- Deploying to IIS, Apache, Nginx, etc.
Troubleshooting
Closing Remarks