Single Page Applications (SPAs) load a single HTML page that is dynamically updated based on user interaction. SPAs can communicate with the server-side to load data into the application without a full-page refresh.
Two-way data binding means that when the data store updates, the UI is immediately updated (and vice versa).
Modules divide code into reusable parts with related components, directives, pipes, and services grouped together and can be combined with each other to create an application.
Angular uses a dependency injection design pattern for services, increasing code efficiency and modularity.
Thanks to Angular's Model-View-* architecture, enforcing the Single Responsibility Principle (SRP) and Don't Repeat Yourself (DRY) techniques, coding is reduced into the smallest pieces possible.
The declarative user interface means the presentational logic in HTML is separated from the imperative logic and Angular’s data binding.
Angular is also easily integrated into other frameworks, such as Ionic.
NOTE: This course is on Angular 9, but is available for prior or more recent versions. Please inquire for details.
*Ways To Learn!*
Attend a Class! For your convenience, this course is available on our online-live Public Schedule. Please see the current scheduled dates listed below. Please ask if you don't see a date you'd prefer. Be also be sure to check out our current Special Offers for extra savings for individuals, small groups or corporate rates for your organization.
Team Training! We're also happy to deliver this as a private event for your team or organization, tailored to suit your needs. See our Training Solutions page for details.
Every-Course Extras = High-Value & Long-Term Learning Support! All courses also include our unique EveryCourse Extras package (Post-Course Resource Site access with Review Labs & Live Instructor Follow-on Support, access to QuickSkills recorded High-Value lessons, Free *Live* Course Refresh Re-Takes, early access to Special Offers, Free Courses & more). Please inquire for details.
At the end of this five-day course, students will have an application up and running that incorporates components, directives, custom pipes, reactive forms, routes, services, unit testing, and the REST API. They will add authentication, implement the Material library, and learn how to maintain state with NgRX. They will then take a deeper dive including making their own custom directives, lazy loading modules, and E2E testing. They will learn how to enhance their application with animations and create their own Angular library.
Working within in an engaging, hands-on learning environment, guided by our expert team, attendees will learn explore:
What Angular is and why should you use it
How Angular reduces the amount of code that you must write to add rich functionality to both existing and new web pages
What TypeScript is, why it is useful, and how to use it with Angular
How to facilitate development and deployment using Angular CLI
How to work with the various aspects of the Angular architecture to implement clean, responsive web interfaces
How Routers can support navigation within a Single Page Application
What the best practices are for using Angular so that it works unobtrusively and performs well
How to use Angular with HTTP to support JSON, REST, and other services
Working with the Ahead of Time compiler including its impact of developers and the development process
How to defend against DOM-based XSS
How to manage routing decisions based on pre-defined criteria such as a successful authentication
How to meet huge data requirements by processing asynchronous data streams with RxJS
Simplify server-side rendering
How to facilitate unit testing
Enhance an Angular user interface with animations and other advanced features
Optimize Angular applications with various tools and techniques
Maintain state within an Angular application
What Angular 9 (or later versions) brings to the table and its relationship to prior versions
Need different skills or topics? If your team requires different topics or tools, additional skills or custom approach, this course may be easily adjusted to accommodate. We offer additional Angular and web development and design courses which may be blended with this course for a track that best suits your development objectives.
Please see the Related Courses tab for specific Pre-Requisite courses, Related Courses that offer similar skills or topics, and next-step Follow-On Courses and Learning Path recommendations.
Please note that this list of topics is based on our standard course offering, evolved from typical industry uses and trends. We’ll work with you to tune this course and level of coverage to target the skills you need most.
Session: Angular Overview
Lesson: Overview of Angular Architecture
Components and Dependency Injection
Services and Events
Common Component Lifecycles and Hooks
Session: Getting Started with Angular
Lesson: Getting Started with TypeScript
Angular, ES6 and TypeScript
Typing and Classes
Abstract Classes and Interfaces
Lesson: Bootstrapping with Angular CLI
Angular CLI Overview
New Projects with CLI
Testing and Generating with CLI
Lesson: Angular Project Structure
Contents of app folder
Session: Working with Angular
Lesson: Components and Events
Data Binding and Components
Exercise: Nested Components
Lesson: Third Party Libraries
Angular and the Need for Libraries
Options for adding Libraries
Working with npm install
Working with angular.json
Lesson: Dynamic Views
Exercise: Working with Directives
Overview of Pipes
Formatting and Conversions
Pure vs. Impure Pipes
Session: Angular Forms
Lesson: Forms and the Forms API
Forms and NgModel
NG Form Groups
NG Form Validation
Model-Driven Reactive Forms
Reactive Form Validation
Session: Single Page Applications and Routes
Lesson: Single Page Applications
Overview of the SPA Concept
Routing for Page Display
Working with ActivatedRouter
Lesson: Services and Dependency Injection
Angular’s DI Framework
Components and Injectables
Service Interfaces and DI
Overview of Modules
Feature Module Routing
Session: Using RESTful Services
Lesson: Overview of REST
REpresentational State Transfer
REST and HTTP
REST Design Principles
Lesson: Angular and REST
REST in Angular
Promises, Observables, Subject
HttpClient and Observables
async Pipes and HttpClient Interceptors
Session: Angular Best Practices
Lesson: Angular Style Guide
Recent Angular Improvements
Single Responsibility Principle
Lesson: What is New in Angular 9
Angular 9 and the Ivy Compiler and Runtime
Improvements to Testing Performance
New Debugging Features
Improved Update Processes
Updating from Angular 8
Session: Reactive Programming in Angular
Lesson: Working with RxJS
Working with RxJS in Angular
Filtering, Combining, and Mathematical Operators
Session: Security and Authentication
Defending Against XSS
Trusting Values with the DOMSanitizer
Lesson: JSON Web Tokens
Backend Authentication and SPA
Using JSON Web Tokens (JWT)
Firebase and JWT
Lesson: Route Guards
Overview of Route Guards
Route Guard CanActivate
Using in a Service
Session: Enhancing the Angular App
Lesson: Angular Animations
Triggers, States and Styles
Keyframes and Animations
Lesson: Angular Material
Material Icons and Components
Lesson: Angular Elements
Angular Elements Overview
Building a Custom Element Using Angular Elements
Converting into Custom Elements
Session: Deep Dive into Angular
Lesson: Testing and Angular
Options for Testing in Angular
Lesson: Deep Dive into Components and Directives
Implementing View Encapsulation
Custom Attribute Directives
Listening to Host Events
Binding to Host Properties
Lesson: Deep Dive into Services and Dependency Injection
Host and Visibility
Session: Optimizing for the Enterprise
Lesson: Improving Performance with Ivy
Overview of Ivy
Incremental DOM and Ivy Pipes
Pre-compiling code with Ivy
Overview of Angular Universal
Improving User Experience with Universal
Pre-rendering the App on the Server
Lesson: Lazy Loading
Module Lazy Loading
Route Configuration for Lazy Loading
When to Preload
Lesson: Optimizing with Universal
Overview of Angular Universal
Improving the User Experience
Pre-rendering on the Server
Lesson: Creating Your Own Angular Library
Creating an Angular Library
Working with Angular CLI to Build the Library
Using the Library
Session: Maintain State with NgRX
Lesson: NgRX Store
Overview of NgRX Store
Actions and Reducers
Exercise: Maintain State with NgRX
BonusTopics (Time Permitting)
ES6 Classes and Modules
ES6 Arrow Functions and Array Methods
ES6 Template Literals
ES6 Spread Operator, Rest Parameter and Destructuring
Exercise: Deep Dive into Object-Oriented ES6+
Lesson: Sass and SCSS for Angular and Material
Student Materials: Each participant will receive a Student Guide with course notes, code samples, software tutorials, step-by-step written lab instructions, diagrams and related reference materials and resource links. Students will also receive the project files (or code, if applicable) and solutions required for the hands-on work. Any courseware of lab materials provided in a cloud (if applicable) will also be made available to you separately.
Hands-On Setup Made Simple! Our dedicated tech team will work with you to ensure our ‘easy-access’ cloud-based course environment, or local installation, is accessible, fully-tested and verified as ready to go well in advance of the course start date, ensuring a smooth start to class and effective learning experience for all participants. We can also help you install this course locally if preferred. Please inquire for details and options.
Every-Course Extras = High-Value & Long-Term Learning Support! All Public Schedule courses include our unique EveryCourse Extras package (Post-Course Resource Site access with Review Labs & Live Instructor Follow-on Support, access to QuickSkills recorded High-Value lessons, Free *Live* Course Refresh Re-Takes, early access to Special Offers, Free Courses & more). Please inquire for details.
te hands-on work in class, and to revisit to review or refresh skills at any time. Students will also receive the project files (or code, if applicable) and solutions required for the hands-on work.
Students should have incoming skills equivalent to the course(s) below, or should have attended this / these as a prequisite:
Explore Angular Essentials, Build Custom Components, Use Application Routes, Form Validation, Unit-Testing & More
Duration: 3 Days
We offer a variety of courses that serve as an excellent follow on to this course, with a few possible options listed below. Our team can work with you to help you select the best next steps based on your role or learning goals.
Exclusive materials, ongoing support and a free live course refresh with every class.
Attend a Course
Please see the current upcoming available open enrollment course dates posted below. Please feel free to Register Online below, or call 844-475-4559 toll free to connect with our Registrar for assistance. If you need additional date options, please contact us for scheduling.
New Site, BIG Savings! We're celebrating the launch of our lonnngggg awaited new site with with *50% off all 2021 Public Classes* booked by March 31! Check out our Current Offers for Individuals, Teams and Organizations to Learn for Less!
Extend your training investment! Recorded sessions, free re-sits and after course support included with Every Course
Gain the skills you need with less time in the classroom with our short course, live-online hands-on events
Training on us! Keep your skills current with free live events, courses & webinars
Expert level after-training support to help organizations put new training skills into practice on the job
The voices of our customers speak volumes
Excellent detail about the Spring framework which directly relates to my role as a senior engineer. I found the content and style to be very enjoyable, and would encourage me to ask questions where previously I might not have paid much attention, eg. pom version numbers / spring starters being imported. The focus on the different styles of unit testing was also excellent and I would plan to incorporate in day to day work.
First time in my life I have attended remote class and I find it great. Personally I don't feel there is any area which require improvement!
Great job overall. Great communicator and explained complex concepts in a simple, easier to
Instructor was beyond phenomenal. He had an in depth knowledge of the course material and always ensured that everyone understood what was being discussed. I really enjoyed the mix of theory and practical examples of each part of the course.
The instructor was clearly knowledgeable about Java and programming in general. He was very attentive to every student's individual needs and constantly encouraged questions, concerns, student issues to be raised and addressed each one thoroughly.
Best programming class I've ever been in, head and shoulders above any thing I took in college as part of a computer science degree. The instructor was thorough and very detailed, he was very good abut explaining all possible scenarios a situation would apply to. The way the albs were structured and the class was conducted was very good for interaction and hand on learning.
Both the instructor and the course material were very thorough - the course material has many helpful references - the labs were well laid out, making it easy to learn from and get done on time
Excellent training. Even though it was online, I did not have any issues understanding or getting the answers for the questions I had. The lab exercises are interesting to apply what was learnt. Overall very good training. Thank you!
A very good balance of teaching time to lab time. I've done other courses that I found to be much lighter on content and heavy on labs to waste time. This was a refreshing change of pace.