Introduction to Angular 16 Essentials (TT4165)

Course Objectives

Learning Objectives

The course includes plenty of hands-on lab work designed to immerse you in the skills required to get you up and running with Angular right away.  Guided by our engaging, highly-experienced instructor, you’ll 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

If your team requires different topics, additional skills or a custom approach, our team will collaborate with you to adjust the course to focus on your specific learning objectives and goals.

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.

Course Prerequisites

Audience

The content is appropriate for experienced web developers new to Angular. In order to be successful in the course, you should have solid, current hands-on experience developing basic web applications, and be well versed in HTML5, CSS3 and JavaScript.  

NOTE: For additional topics, labs and skills coverage beyond the basics you might consider our TT4168 Mastering Angular 16 Boot Camp five-day superset of this course as an alternative.

Pre-Requisites

Take Before: Attendees should have experience with the topics in the following courses, or should have recently attended these as a pre-requisite:

• TT4003          Introduction to HTML5, CSS3 & JavaScript - 3 days

Related Courses

The following is a small subset of related courses. We offer many additional courses and topics on modern web, mobile and full stack development. Please see the online catalog for a complete list of courses and learning paths.

• TT4002          Introduction to HTML5 / CSS3 - 2 days
• TT4003          Introduction to HTML5, CSS3 & JavaScript - 3 days
• TT4110          Introduction to Moden JavaScript – 3 days
• TT4165          Introduction to Angular Essentials - 3-day subset of this course
• TT4168          Mastering Angular Boot Camp - 5 days
• TT4190          Getting Started with React Essentials – 3 days
• TT4195          Mastering React Boot Camp |With Redux, Flux, Unit Testing, JSX & More – 5 days

Course Agenda

Getting Started with Angular 

1. Overview of Angular Architecture

• Angular Versioning
• Data Binding
• Components and Dependency Injection
• Services and Events
• Common Component Lifecycles and Hooks

2. TypeScript

• Angular, ES6 and TypeScript
• Typing and Classes
• Abstract Classes and Interfaces
• Annotations
• Generics
• Optional Chaining
• Nullish coalescing
• Decorators
• Partial, Record, Union types

3. Bootstrapping with Angular CLI

• Angular CLI Overview
• New Projects with CLI
• Testing and Generating with CLI
• Angular Console – NX Console

4. Angular Basics

• Configuration Files
• Working with angular.json
• Top-Level Directories
• Contents of app folder
• Angular DevTools

Working with Angular

5. Components and Events

• Data Binding and Components
• Event Binding
• Custom Events
• Parent/Child Events
• EventEmitter/emit()

6. Third Party Libraries

• Angular and the Need for Libraries
• Options for adding Libraries
• Working with npm install

7. Dynamic Views - Directives

• View Encapsulation
• Structural/Attribute Directives
• Conditional Styling

8. Pipes

• Overview of Pipes
• Built-in Pipes
• Formatting and Conversions
• Parameterizing Pipes
• Pure vs. Impure Pipes
• Customizing Pipes

Angular Forms

9. Forms and the Forms API

• Forms and NgModel
• NG Form Groups
• NG Form Validation
• Model-Driven Reactive Forms
• FormBuilder API
• Reactive Form Validation

Single Page Applications and Routes

10. Single Page Applications - Routing

• Overview of the SPA Concept
• Routing for Page Display
• Working with ActivatedRoute
• Location Strategies
• Nested Routes

11. Services (Dependency Injection)

• Angular’s DI Framework
• Components and Injectables
• Tree-shakeable providers
• Service Interfaces and DI
• Constructor Injection

12. Modules

• Overview of Modules
• Feature Modules
• Feature Module Routing
• Shared Modules

Using RESTful Services

13. Angular and REST

• REST in Angular
• Promises, Observables, Subject
• HttpClient and Observables
• async Pipes and HttpClient Interceptors

Course Materials

Setup Made Simple! Learning Experience Platform (LXP) 

All applicable course software, digital courseware files or course notes, labs, data sets and solutions, live coaching support channels, and rich extended learning and post training resources are provided for you in our “easy access, single source, no install required” online Learning Experience Platform (LXP), remote lab and content environment. Access periods vary by course. We’ll collaborate with you to ensure your team is set up and ready to go well in advance of the class. Please inquire about set up details and options for your specific course of interest.