Course Outline
Introduction
- What is Angular?
- Angular vs React vs Vue
- Overview of Angular 17 features and architecture
- Setting up the Development Environment
Getting Started
- Creating a new Angular 17 project using Angular CLI
- Exploring the project structure and files
- Running and serving the application
- Displaying data using interpolation and expressions
Components
- Understanding the role of components in Angular 17
- Creating and using components
- Passing data between components using inputs and outputs
- Using component lifecycle hooks
Directives
- Understanding the difference between structural and attribute directives
- Creating and using built-in directives such as ngIf, ngFor, ngSwitch, etc.
- Creating and using custom directives
Pipes
- Understanding the purpose of pipes in Angular 17
- Creating and using built-in pipes such as date, currency, json, etc.
- Creating and using custom pipes
Services
- Understanding the role of services in Angular 17
- Creating and using services
- Injecting dependencies using providers
Modules
- Understanding the role of modules in Angular 17
- Creating and using modules
- Importing and exporting modules
Data Binding
- Understanding the difference between one-way and two-way data binding
- Creating and using property binding, event binding, and banana-in-a-box syntax
- Using template reference variables
Routing
- Understanding the role of routing in Angular 17
- Creating and configuring routes
- Navigating between routes using routerLink and router.navigate()
- Using route parameters, query parameters, and fragments
Forms
- Understanding the difference between template-driven and reactive forms
- Creating and validating forms using form controls, form groups, form arrays, etc.
- Using built-in validators such as required, minLength, maxLength, etc.
- Creating and using custom validators
HTTP Client
- Understanding the role of HTTP client in Angular 17
- Creating and using HTTP requests to communicate with backend services
- Using observables to handle asynchronous data streams
- Using interceptors to modify or handle HTTP requests or responses
New, Declarative Control Flow
- Explaining the new template control block syntax and how it simplifies common tasks like conditional rendering, looping, and handling empty collections
- Giving examples of using the new blocks, such as @if, @else, @switch, @case, @default, @for, and @empty
- Comparing the new syntax with the previous one, such as *ngIf, *ngSwitch, and *ngFor
- Mentioning how the new control blocks support zoneless applications with signals
Deferred Loading Blocks
- Explaining the concept of deferred loading and how it can improve the performance and user experience of web applications
- Introducing the new @defer control block that enables lazy-loading of the block's content and its dependencies
- Giving examples of using the @defer block for different scenarios, such as loading components, directives, pipes, animations, and styles
- Mentioning how the @defer block works with the new view transitions API
View Transitions API
- Explaining the purpose and benefits of the view transitions API, which allows developers to customize the animations and transitions between views
- Introducing the new withViewTransitions directive that enables the use of the view transitions API
- Giving examples of using the withViewTransitions directive with different transition types, such as fade, slide, zoom, and flip
- Mentioning how the view transitions API works with the Angular router and the browser history
Other Features and Improvements
- Briefly summarizing some of the other features and improvements that Angular 17 offers, such as:
- Support for passing in @Component.styles as a string
- Angular's animations code is lazy-loadable
- TypeScript 5.2 support
- The core signal API is now stable
- Node.js v16 support has been removed and the minimum support version is v18.13.0
- Esbuild will be the default builder and the default dev server will use Vite
Summary and Next Steps
Requirements
- An understanding of HTML, CSS, and JavaScript
- Experience with TypeScript and RxJS
- Web development experience
Audience
- Developers who wish to learn how to use Angular 17 to create dynamic and responsive web applications
- Developers who wish to upgrade their skills from previous versions of Angular
- Programmers who wish to explore the new features and improvements of Angular 17
Testimonials (10)
I liked your jokes
Dermot - Griffiths & Armour
Course - Angular 2 Fundamentals
The practical experience of actually working with the code
Chad Roskuge - ALTRON
Course - AngularJS Basics
interesting showing the topic
Adam Boroch - SPOC S.A.
Course - Angular JavaScript
The labs were interesting and probably the most useful learning tool to me. Anything I missed or forgot about was relearned or reinforced in the labs.
Joseph Fuerst
Course - Building Web Apps using the MEAN stack
I mostly enjoyed the hands-on training code.
Tomislav Brajkovic - HSE - Healthlink
Course - Angular 4: Create Single-Page Applications Using HTML, CSS and JavaScript
Step by step analysis. Each line of code explanation. Every problem I had during the course was successfully solved and Łukasz told me the reason. I also liked good practices that have been presented. Never have I been convinced about TDD style - I just dont find it useful and worth its time. Łukasz pointed out so many advantages of TDD, it completely changed my opinion.
Michał Uściński - Devapo Sp. z o. o.
Course - Testing Angular Applications
część o RxJS
Kacper - INWEBIT Sp. z o.o.
Course - Reactive Programming with Angular RxJS
I liked the communication and way of passing knowledge.
Marcin Wojdowski - PSI Polska Sp. z o.o.
Course - Angular 5
Good material! The trainer is a really nice guy which helps a lot!
Xander Knol - Conclusion Learning Centers
Course - Angular 6
Good examples and interactive course !