Location
-
Format
What’s this? Ways to train
Classroom
Live, instructor-led training in a standard, professional classroom environmentVirtual
Live, instructor-led training conducted over the internet, with hands-on labsOnline
An online, HTML5, self-paced learning experience available for all coursesOn-site
Private training for your entire team, delivered at your location, a training center, or onlineVideo classroom
Learn more about our training formats
High-definition video of our most popular courses, streamed to your laptop or personal device
-
3 Days
-
All of our private classes are customized to your organization's needs.
-
Click on the button below to send us your details and you will be contacted shortly.
Already purchased this offering? Log in
Request more information
Inquiry for: Myself My Company
By providing your contact details, you agree to our Privacy Policy
Thank You
Our learning consultant will get back to you in 1 business day
Angular 10
WHAT YOU WILL LEARN
The Angular 10 training course covers all major components, syntax, and tooling of the Angular web application framework. Angular 10 fulfil the expectations of modern developers who demand fast performance and responsiveness from their web applications. Participants will set up their working environment to have all the tools needed to start building Angular 10 components with minimum effort. The program starts with an introduction of JavaScript, NPM, and TypeScript. Participant will understand TypeScript, a powerful typed superset of JavaScript that compiles to JavaScript. The course dives into component-driven development with Angular components. The participants will also learn to create and use Angular 10 Directives and Pipes. Data binding (both 1 and 2 way) is discussed in the context of the new directive API. Finally, the core parts of Angular such as services, HTTP, routing, form validation are covered to develop applications based on the Model-View-Controller (MVC) architecture.
PREREQUISITES
Before attending this course, students should have general programming experience and knowledge of Angular is compulsory.
METHODOLOGY
This program will be conducted with interactive lectures, PowerPoint presentation, discussion, and practical exercise.
COURSE OBJECTIVES
• Utilize the Angular core constructs to build Single Page Applications.
• In depth knowledge of Rxjs library.
• Angular modules – Feature module, Lazy loading module.
• Build Reactive forms.
• Utilize Material Design.
• Setup routing and URLs.
• Execute CRUD commands on REST APIs over Http.
• Security focus using JWT Authentication.
Modules
• What is an Observable?
• Creating Observables
• What is an Observer?
• Observer Example
• Operators: map, switchMap, debounceTime, distinctUntilChanged
• Practical Application of using RxJS
• Subject
• Event Emitter or Observable
• Request Options
• Returning an Http Response Object
• Setting Request Headers
• Creating a Simple Observable
• The Observable.create() Method
• Observable Operators
• Piping Operators
• The flatMap() Operator
• The tap () Operator
• The zip () Operator
• Caching HTTP Response
• Making Sequential HTTP Calls
• Making Parallel Calls
• Customizing Error Object with catchError ()
• Error in Pipeline and Recovery
• REST Web Services and Angular
• Understanding REST
• REST Example – Create / Retrieve / Update / Delete / Client Generated ID / JSON
• Common Angular Tasks for REST Communication
• RESTFul Methods: DELETE / GET / PUT / POST
• Security of REST APIs
• Routing Overvie
• Routing Enabled Project
• Routing Enabled Feature Module
• Using the Feature Module
• Lazy Loading the Feature Module
• Creating Links for the Feature Module Components
• More About Lazy Loading
• routerLinkActive binding
• Default Route
• Wildcard Route Path
• redirectTo
• Child Routes
• Defining Child Routes
• <router-outlet> for Child Routes
• Links for Child Routes
• Navigation Guards
• Creating Guard Implementations
• Using Guards in a Route
• Route Animations
• What is Animation?
• Animation Configuration
• Animation Techniques
• Animation Concepts
• CSS Property Animation
• Animation Property Settings
• CSS Transforms
• Starting and Stopping Animation
• Animation Events
• Browser Support
• Angular Animations
• Animation Imports
• Named Animation States
• Transitions
• The animate () function
• Triggers
• Assigning Animations to Elements using Trigger
• Invoking Transitions
• Assigning Animation to Routes
• External Animation Definitions
• Authentication / Authorization Basics in SPAs
• Token based Auth: Understanding JWT, OAuth 2.0 & OpenID Connect
• Using Social / Cloud based Logins
• Securing Angular Routes
• Securing the Web API
• Injecting providers
• A new dependency injection system
• @Inject ()
• @Injectable ()
• Tokens
• Registering a provider
• Overriding providers
• Understanding Injectors
• Module imports
• Dependency Injection
• Overview of NgRx
• Creating an NgRx Application
• Overview of NgRx/Store
• Model, Action, Reducer, and Application State
• Redux pattern
• Reading, Writing and Removing data in NgRx Store
• Overview of NgRx / Effects
• Generating an Effect file
• Creating an Effect
• Actions Observable
• Dispatching Router-store Actions
• Overview of NgRx / Entity
• Entity State definition
• Entity Adapter
• Entity Selectors
• Custom IDs and State properties
• Overview of NgRx / Schematics
• Scaffolding NgRxapplication with Schematics
• Overview
• Web Sockets Use Cases
• Web Socket URLs
• Web Sockets Servers
• Web Socket Client
• The socket.io-client library
• Using socket.io-client in JavaScript
• Setting up socket.io-client in Angular Projects
• Using socket.io-client in an Angular service
• Angular websocket.service Notes:
• The Angular Web Socket Client Sample App
• Angular websocket.component.ts
• The Full websocket.component.ts code
• Implementation Modifications
• Unit Testing
• Testing Tools
• Testing Setup
• Typical Testing Steps
• Test Results
• Jasmine Test Suites
• Jasmine Specs (Unit Tests)
• Expectations (Assertions)
• Matchers
• Examples of Using Matchers
• Using the not Property
• Setup and Teardown in Unit Test Suites
• Example of beforeEach and afterEach Functions
• Angular Test Module
• Example Angular Test Module
• Testing a Service
• Injecting a Service Instance
• Test a Synchronous Method
• Test an Asynchronous Method
• Using Mock HTTP Client
• Supplying Canned Response
• Testing a Component
• Component Test Module
• Creating a Component Instance
• The ComponentFixture Class
• Basic Component Tests
• The DebugElement Class
• Simulating User Interaction
• Debugging Overview
• Basic Debugging Practices
• Development (Debug) Mode
• Selecting Elements to Inspect
• Inspecting Angular Components with ng.probe
• Saving ng.probe Component References
• Modifying Values using Component References
• Using Breakpoints in Angular Code
• Breakpoint in TypeScript Code
• What is Augury?
• Installing Augury
• Opening Augury
• Augury - Component Tree
• Augury - Router Tree.
• Augury - NgModules Tab
• Common Exceptions
• Summary

Thayanithy Jegan
Has a strong career, spanning over 19 years of Technical & Management experience. Technically sophisticated professional with a pioneering career reflecting strong leadership qualifications coupled with analysing user requirements, conceptualizing capabilities, software development and successful implementation of developed solutions. Clear communication and intuitive thinking have equipped me with skills required to achieve best results. Read More
Course Reviews
0
0 Ratings