Overview
This 5-day course is a complete guide to building scalable web applications using Google’s popular Angular framework, leveraging the power of TypeScript to build type-safe applications.
An overview of the framework is given and then each of the 8 building blocks (Modules, Components, Directives, Metadata, Templates, Services, Data Binding and Dependency Injection) are covered in deep dives including testing. RxJS observables are covered as both discrete JavaScript and how they are integrated into Angular. Template-Driven and Reactive forms implementation applications is compared and examined. Creating a single page application through the use of routing is also on the outline of the course which can be seen below.
Delivery is through instructor-led explanations and short follow-up exercises that allow learners to experiment with code. A practical agile-style project is included for learners to complete, either as a collaborative group or individually.
Prerequisites
It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience equivalent to the skills covered in Programming with JavaScript (QAJAVSC) along with good HTML and CSS skills (as covered in QAHTMLCSS).
This course uses TypeScript for all code demonstrations and exercises and so it is essential that attendees have experience equivalent to the skills covered in Programming with TypeScript (QAPTS).
Course Outline
Angular Introduction
- To become aware of what Angular is
- To understand the difference between Angular and AngularJS
- To be aware of the versioning and release schedules for Angular
- To be able to set up the developer environment using Angular CLI
- To become familiar with some fundamental Angular CLI commands
- To be aware of developer tools available for Angular
Angular Architecture
To be aware of the eight building blocks of Angular:
- Modules
- Components
- Templates
- Metadata
- Data binding
- Directives
- Services
- Dependency injection
Testing with Jasmine
- To understand how a Jasmine Unit Test is written
- To be able to use spies in tests
- To be able to use functions to set up and tear down tests
- To understand how asynchronous testing can be done
- To be able to debug Jasmine tests
- To be able to generate code coverage reports from Jasmine tests
Components
- To be able to create a component
- To be able to create and edit component templates and style
- To be able to bind data from:
- Component to Template
- Template to Component
- 2-way Databinding
- To understand and be able to use Life-cycle hooks
- To know how to test Components:
- As a class
- With the DOM
Directives
- To be able to use built-in directives
- To be able to use and test Input and Output properties
- To be able to create and test Custom Directives
Observables
- To understand what an Observable is
- To understand what RxJS is
- To be able to use RxJS operators to work with Observables
- To understand how Observables can be used in Angular
Template-Driven Forms
- To understand the similarities and differences between Template-Driven and Reactive Forms
- To be able to build template-driven forms by:
- Binding data to the template and component
- Tracking the changes to and validity of data
- Using data supplied by forms to provide feedback to users
- Controlling the submission of data
Reactive Forms
- To be able to build and use reactive forms by being able to:
- Generate and import a new form controls
- Register controls in a template
- Display form control values
- Group related form controls
- Associate the FormGroup model with a view
- Nest a form group
- Group nested forms in a template
- Use FormBuilder to create forms
- Controlling form submission
Form Validation and Testing
- To understand how to validate template-driven forms
- To understand how to validate and test reactive forms
- How to use Validator functions
- How to use built-in Validators
- To be able to create and test Custom Validators
- To understand how cross-field validation works
- To understand how Async Validation works
Services
- To understand when and how to create a Service and provide them in the appropriate place
- To be able to create tests for Services
- To be able to use Services through dependency injection
- To be able to make Services interact with REST APIs using Observables
Routing
- To be able to create a new application with routing enabled
- To understand how Router Modules are configured and tested
- Defining arrays of Route objects for specific paths to display specific components
- Supplying data to a component on a route
- Redirecting routes
- Dealing with 404s
- To understand RouteState, ActivatedRoutes and RouterEvents
- To be able to add links to templates for navigation
- To be able to add child routes to an application
- To be able to use Route Guards to control navigation
Pipes
- To understand what Pipes are and why they are used in Angular
- To become aware of Angular’s in-built Pipes
- To be able to create Custom pipes
- To understand the difference between Pure and Impure pipes
- To understand how the AsyncPipe works
- To be able to test Pipes
Frequently asked questions
See all of our FAQsHow can I create an account on myQA.com?
There are a number of ways to create an account. If you are a self-funder, simply select the "Create account" option on the login page.
If you have been booked onto a course by your company, you will receive a confirmation email. From this email, select "Sign into myQA" and you will be taken to the "Create account" page. Complete all of the details and select "Create account".
If you have the booking number you can also go here and select the "I have a booking number" option. Enter the booking reference and your surname. If the details match, you will be taken to the "Create account" page from where you can enter your details and confirm your account.
Find more answers to frequently asked questions in our FAQs: Bookings & Cancellations page.
How do QA’s virtual classroom courses work?
Our virtual classroom courses allow you to access award-winning classroom training, without leaving your home or office. Our learning professionals are specially trained on how to interact with remote attendees and our remote labs ensure all participants can take part in hands-on exercises wherever they are.
We use the WebEx video conferencing platform by Cisco. Before you book, check that you meet the WebEx system requirements and run a test meeting (more details in the link below) to ensure the software is compatible with your firewall settings. If it doesn’t work, try adjusting your settings or contact your IT department about permitting the website.
Learn more about our Virtual Classrooms.
How do QA’s online courses work?
QA online courses, also commonly known as distance learning courses or elearning courses, take the form of interactive software designed for individual learning, but you will also have access to full support from our subject-matter experts for the duration of your course. When you book a QA online learning course you will receive immediate access to it through our e-learning platform and you can start to learn straight away, from any compatible device. Access to the online learning platform is valid for one year from the booking date.
All courses are built around case studies and presented in an engaging format, which includes storytelling elements, video, audio and humour. Every case study is supported by sample documents and a collection of Knowledge Nuggets that provide more in-depth detail on the wider processes.
Learn more about QA’s online courses.
When will I receive my joining instructions?
Joining instructions for QA courses are sent two weeks prior to the course start date, or immediately if the booking is confirmed within this timeframe. For course bookings made via QA but delivered by a third-party supplier, joining instructions are sent to attendees prior to the training course, but timescales vary depending on each supplier’s terms. Read more FAQs.
When will I receive my certificate?
Certificates of Achievement are issued at the end the course, either as a hard copy or via email. Read more here.