FE411
Introduction to Angular
Faculty
Pablo Deeleman
Frontend Architect at GitKraken
Course length
Duration
Total hours
Credits
Language
Course type
Fee for single course
Fee for degree students
Skills you’ll learn
Overview
Angular is a powerful framework powered by Google for building dynamic, interactive web applications. Since its launch back in 2016, Angular has become the most comprehensive framework in the industry for building high-performance, feature-rich applications and, nowadays, is used by thousands of companies worldwide, being particularly popular in large corporate environments such as banking and finance.
Contrary to other alternatives for building web components, Angular is a full-featured framework, meaning it provides a vast catalog of tools and features out of the box to build literally anything that a modern web application might require, without resourcing to third-party libraries. This obviously entails a very steep learning curve. In this course we will cover all the core entities of Angular and set the ground for building state-of-the-art UI applications combining Angular, RxJS and TypeScript.
By the end of the course, students will become seasoned Angular developers fully able to design, implement, and deploy advanced, production-ready e-commerce solutions
Learning highlights
- Discover the Angular framework architecture and its common conventions
- Get familiar with the Angular API, the Angular CLI and how to browse the official documentation
- Explore the different pillars of the Angular composition model: modules, components, directives, pipes and injectable provider services
- Build complex forms embracing template-driven or reactive strategies
- Scale up our projects with routing, navigation and HTTP network communication
- Dive deep into the Angular internals: Change detection, Zones.js, built-in modules, dependency injection, observable streams, etc
- Learn how to unit test our Angular components and related entities
Course outline
15 classes
Session 1
- Welcome to Angular: about this course
- Final project and grading
- The key pillars of Angular
- Setting up an Angular project
- A refresh on TypeScript I: Class Decorators Angular Components
- Text interpolation (and non bindable filtering)
- Component composition
- Basic interaction with Input and Output props
Session 2
- CSS and View Encapsulation
- Template syntax
- Property and attribute data binding
- Basic Change Detection in Angular
- Components Lifecycle
- Built-in output keyboard events
- Listening to DOM events
Session 3
- Angular Modules
- Native Modules
- The Angular CLI + DevTools
- Testing components
Session 4
- Advanced interaction: Template variables, ViewChild decorators, two-way data binding
- Content and children projection.
- Angular pipes
- Built-in pipes
- i18n pipes
- Testing Angular pipes
Session 5
- Navigating the online docs
- Application workshop: Building an online shop with a shopping cart.
- Weekly Q&A
Session 6
- Angular directives
- Custom attribute directives
- RxJS foundations
Session 7
- Injectable services in Angular
- Inside Angular's dependency injection mechanism
- Injecting dependencies: NgModules and inject()
- DI in standalone components
Session 8
- Injectable tokens
- Injector annotations
- Injection override
- Advanced Change Detection in Angular: Zones.js
Session 9
- Forms in Angular
- Template-driven forms
- Validating template driven forms
- Reactive forms
- Validating reactive forms
Session 10
- Application workshop: Building a modal checkout form for our online shop
- The Angular style guide
- Weekly Q&A
Session 11
- Routing in Angular
- Routed components and redirects
- Router directives: outlets, links and active route attributes
- Nested routes
- Router and route APIs
- Imperative routing
Session 12
- Route guards
- Data route resolvers
- Named route outlets
- Route metadata API
- Meta and Title service providers
Session 13
- A refresh on TypeScript II: Generics
- The Angular HTTP module
- The HttpClient provider
- Response serialization: JSON, text, etc.
- Error handling
Session 14
- Configuring custom HTTP headers
- Intercepting HTTP requests
- Intercepting HTTP responses
- Testing and mocking HTTP interaction
Session 15
- Application workshop: Implementing Mobile alerts messaging in our online shop
- Best practices, performance tips revisited and Angular antipatterns
- The road ahead: Next steps in your learning journey
- Final Q&A
Prerequisites
The following skills and background experience are a must prior to enrolling in this course:
Sound command of JavaScript. Students must feel comfortable with concepts such as asynchronous programming, network communication, promises and AJAX
Solid foundations on TypeScript and proper understanding of TypeScript typing.
Deep knowledge of responsive CSS, SASS and HTML. Notions of ARIA accessibility attributes will be appreciated
Feel at ease with the bash terminal
Prior exposure to Node.js web servers and REST APIs
Methodology
Lectures will feature a combination of theory plus hands-on segments. Firstly, a short introductory theory segment around the agenda of topics for the day, supported by presentation materials. Then, a hands-on segment, where we will conduct a live coding session to explore the capabilities of the Angular API with testable examples
In addition to the in-class coursework, students will work on a personal project in 3 stages and will submit it by the end of the course to validate their performance.
In order to build this application, students will work on daily exercises that will incrementally compound up a full-fledged application. Every Friday we will conduct a recap on the learnings of the week by building a full blown-up application end-to-end and then we will host a Q&A session so students can bring up questions and coding challenges so we can solve them together during the lecture
Grading
Pablo Deeleman has been standing in the intersection between corporate identity, UX management, UI design, web development and, particularly, front-end engineering for the past 25 years. With a master's degree in Marketing and Business Administration, Pablo developed his career in both USA and Europe as a UX designer, and later transitioned to UI engineering and development.
Over the past two decades, Pablo has been involved in dozens of projects combining design management, UX research and front-end planning and development, for both startups and large corporations such as Gameloft, Red Hat or Twilio. As a Frontend Architect at GitKraken, Pablo leads front-end initiatives within the GitKraken Labs team, working closely with cross-functional teams to tackle complex challenges, improve software architecture, and explore new technologies that accelerate innovation, ensuring that GitKraken’s tools meet the evolving needs of over 30 million developers globally.
See full profileApply for this course
Introduction to Angular
by Pablo Deeleman
Total hours
45 Hours
Dates
May 22 - Jun 09, 2023
Fee for single course
€1500
Fee for degree students
€750
How to secure your spot
Complete the form below to kickstart your application
Schedule your Harbour.Space interview
If successful, get ready to join us on campus
FAQ
Will I receive a certificate after completion?
Yes. Upon completion of the course, you will receive a certificate signed by the director of the program your course belonged to.
Do I need a visa?
This depends on your case. Please check with the Spanish or Thai consulate in your country of residence about visa requirements. We will do our part to provide you with the necessary documents, such as the Certificate of Enrollment.
Can I get a discount?
Yes. The easiest way to enroll in a course at a discounted price is to register for multiple courses. Registering for multiple courses will reduce the cost per individual course. Please ask the Admissions Office for more information about the other kinds of discounts we offer and what you can do to receive one.