Facebook

Introduction to Angular 18 Essentials (TT4165)

* Looking for a flexible schedule (after hours or weekends)? Please call 858-208-4141 or email us:  sales@ccslearningacademy.com.

Student financing options are available.

Transitioning military and Veterans, please contact us to sign up for a free consultation on training and hiring options.

Looking for group training? Contact Us

gowranga
Last Update September 4, 2024
0 already enrolled

About This Course

Geared for experienced web developers, Introduction to Angular 18 Essentials is a three-day hands-on program that explores the latest features and benefits Angular has to offer. It provides you with the practical “real-world” foundational and advanced Angular skills required to solve the usual challenges you might face when developing modern web applications with JavaScript. You’ll leave the course equipped with basic skills required to construct robust, scalable, and feature-rich web applications using the latest stable editions of Angular.

Kicking off with an in-depth introduction to Angular CLI and TypeScript, the course propels you into the world of component-driven development, touching on vital topics like data-binding, and directives. As you advance through the curriculum, you’ll explore SPA routing, and forms.

By the end of this course, you’ll have built a comprehensive application that brings together all these elements: website structuring through components, dynamic interactivity via directives, and custom pipes for content refinement. You’ll know how to employ reactive forms for active user engagement and SPA routing for fluid navigation.

You’ll leave the course equipped to construct basic scalable, feature-rich web applications using Angular 18.

NOTE: For additional topics, labs and skills coverage beyond the basics you might consider our TT4168 Mastering Angular 18 Boot Camp five-day superset of this course as an alternative. These courses are also available for prior editions of Angular. Please inquire for details and options.

Course Agenda

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. Topics, agenda and labs are subject to change, and may adjust during live delivery based on audience skill level, interests and participation.

  1. Overview of Angular Architecture
    • Angular Versioning
    • Data Binding
    • Component Architecture
      • Show concepts: how to render the content in the browser
    • 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
    • Interface patterns
    • Annotations
    • Generics
    • Optional Chaining
    • Nullish coalescing
    • Decorators
    • Functional vs Procedural JavaScript
    • Functional Approach
    • Lab: Angular and TypeScript – Enhanced lab
  3. Bootstrapping with Angular CLI
    • Angular CLI Overview
    • New Projects with CLI
    • Testing and Generating with CLI
  4. Angular Basics
    • Configuration Files
    • Working with angular.json
    • Top-Level Directories
    • Contents of app folder
    • Angular DevTools
    • ng build
    • Lab: Creating Projects with Angular CLI
  5. Components and Events
    • Data Binding and Components
    • Event Binding
    • Custom Events
    • Parent/Child Events
    • EventEmitter/emit()
    • New Input/Output function
    • Lab: Nested Components
  6. Standalone Components
    • Project Setup and Configuration
    • Folder Structure
    • Components
    • Services
    • Routing
    • Versus non-standalone components
    • Versus modules
  7. Third Party Libraries
    • Angular and the Need for Libraries
    • Options for adding Libraries
    • Working with npm install
    • Lab: Third-Party Libraries
  8. Dynamic Views – Directives
    • View Encapsulation
    • Structural/Attribute Directives
    • Conditional Styling
    • @if/@else
    • @for
    • @defer
    • Lab: Working with Directives
  9. Pipes
    • Overview of Pipes
    • Built-in Pipes
    • Formatting and Conversions
    • Parameterizing Pipes
    • Pure vs. Impure Pipes
    • Customizing Pipes
    • Lab: Built-in and Custom Pipes
  10. Signals and State
    • What are Signals?
    • How to read the value of a signal?
    • How to modify the value of a signal?
    • The update signal API
    • Read-only signals
    • The computed() Signal API
    • How do we subscribe to a signal?
    • Using effects
  11. Forms and the Forms API – focus on Reactive Forms
    • Template Forms – Overview
    • User Input/Interactions
    • Model-Driven Reactive Forms
    • FormBuilder API
    • Reactive Form Validation
    • Form’s new control state change events
    • Lab: Reactive Forms
  12. SPA – Routing
    • Overview of the SPA Concept
    • Routing for Page Display
    • Working with ActivatedRoute
    • Location Strategies
    • Nested Routes
    • Route redirects as functions
    • Lab: Routing
  13. Services (Dependency Injection)
    • Angular’s DI Framework
    • Components and Injectables
    • Tree-shakeable providers
    • Services Architecture
    • Service Interfaces and DI
    • Constructor Injection
    • Inject function
    • Scenarios for use
    • Lab: Services
  14. Modules
    • Overview of Modules
    • Feature Modules
    • Feature Module Routing
    • Shared Modules
    • Lab: Modules

Learning Objectives

Understand Angular Basics and Architecture: Grasp the fundamentals of Angular's architecture, including component creation and dependency injection, to build foundational web applications.
Get Started with TypeScript and Angular CLI: Learn the essentials of TypeScript and use Angular CLI to set up and manage Angular projects efficiently.
Create Interactive Interfaces with Data Binding and Directives: Develop interactive user interfaces using basic data binding techniques and directives for dynamic content updates.
Implement Simple SPA Navigation: Configure basic Single Page Application (SPA) routing to enable smooth and intuitive navigation within Angular applications.
Build and Validate Basic Reactive Forms: Learn to create and manage basic reactive forms in Angular, ensuring user input is handled effectively and validation is in place.

Pre-requisites

  • Attendees should have experience with this,TT4003: Introduction to HTML5, CSS3 & JavaScript - 3 days, as a pre-requisite.

Target 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 15 Boot Camp five-day superset of this course as an alternative.

Your Instructors

gowranga

0/5
82 Courses
0 Reviews
0 Students
See more

Write a review

Don't have an account yet? Sign up for free

🚀 Get Up to 33% OFF on Top Courses + FREE e-learning subscription (worth $1595)
This is default text for notification bar
#edumall-wp-widget-courses-1 { display: none; } #single-course-ratings { display: none; } .tutor-single-course-lead-meta { display: none; } .lead-meta-item meta-course-total-enrolled { display: none; }