Building web apps with Angular and TypeScript
Curso Remoto (Abierto)
Nuestra solución de formación remota o virtual, combina tecnologías de alta calidad y la experiencia de nuestros formadores, contenidos, ejercicios e interacción entre compañeros que estén atendiendo la formación, para garantizar una sesión formativa superior, independiente de la ubicación de los alumnos.
Create and manage Angular applications.
Use data binding to update your screen.
Split up complex interfaces into components.
Write their own directives and pipes.
Create complex forms with validation.
Communicate with a REST backend.
Write an Single Page Application with client-side routing.
Disponible en formato e-learning
Disponible en formato presencial
Disponible en formato a distancia
A través de Fundae, cumpliendo requisitos.
- Dificultad 50% 50%
- Nivel alcanzado 80% 80%
Before attending this course, students must have:
Basic understanding of HTML and CSS.
At least a notion of node.js and npm. An IDE for web development like Visual Studio Code or WebStorm.
Module 1: Introduction to Angular
In this module you'll see what Angular is all about and why it is so important in modern web development.
Lessons of Module 1
Evolution in Web App Development
Angular Core and Modules
After completing module 1, students will be able to:
Have an understanding of modern web UI technologies and the role they play in modern development.
Lessons of Module 2
Implementing Types, Classes and Inheritance
Namespaces and Modules
Lab : Toy Store
Getting started with a TypeScript project
Making the models: Product, Category, Order
Creating the ShoppingCart
Using an external library
Adding the code to the HTML page
After completing module 2, students will be able to:
Have an understanding of the benefits of TypeScript
Use core features of TypeScript
Set up a new TypeScript project
Compile and run TypeScript project
Module 3: Core Concepts
In this module you'll get acquainted with the most important building blocks for any Angular application. This is the foundation of all following chapters.
Lessons of Module 3
Lab : Inspecting a First Project
Opening an running the project
Elements of an applications
After completing module 3, students will be able to:
Understand the goal of Components and Services.
Group Components and Services into Modules. Work with Angular Tools.
Module 4: Data binding
Lessons of Module 4
The Importance of Binding
Component to View
Local Template Variables
View to Component
Lab : TaskManager with Data Binding
Displaying a list of tasks
Adding a Task
After completing module 4, students will be able to:
Create and update a view using data binding.
Handle user interactions in a component.
Refer to elements with local template variables.
Use pipes for value conversion.
Module 5: Components
In this module we'll dive a bit deeper into Components. You'll learn how to create a hierarchy of components and how to communicate between them.
Lessons of Module 5
Using Multiple Components
Input and Output
ViewChild and ContentChild
Directive Life Cycle
Lab : TaskManager: Using Multiple Components
Adding some style
After completing module 5, students will be able to:
Split up complex components into multiple components
Set up parent-child communication
Work with various life cycle hooks
Module 6: Attribute Directives
What if you want to add custom behavior to an existing element? In this module you'll explore existing directives like NgClasses and NgStyle; and learn how to build your own.
Lessons of Module 6
What are Attribute Directives?
Built-in Attribute Directives
Custom Attribute Directives
After completing module 6, students will be able to:
Understand the role of attribute directives.
Use built-in attribute directives. Create your own attribute directives.
Module 7: Structural Directives
Lessons of Module 7
What are Structural Directives?
Built-in Structural Directives
Custom Structural Directives
After completing module 7, students will be able to:
Understand the role of structural directives.
Use built-in structural directives.
Create your own structural directives.
Module 8: Dependency Injection and Providers
Dependency Injection (DI) is the art of taking two strongly coupled objects and tearing them apart. This helps you write understandable, maintainable and testable code. It's not really a choice in Angular either: you have to do it. Angular has an entire mechanism based on Providers to support DI which you will explore in this module.
Lessons of Module 8
Dependency Injection Basics
Lab : Creating a Task Service
Implementing the Service
Providing the service
Updating the AppComponent
Replacing the mock service with a real service
After completing module 8, students will be able to:
Create their own services.
Work with the various providers in Angular.
Inject services into components and other services.
Module 9: Pipes
Pipes are a convenient way to make little changes to values in a view. This includes formatting and filtering of data. It's easy to use and to extend the possibilities of pipes.
Lessons of Module 9
Using a Pipe
Pure versus Impure
Lab : Temperature Pipe
Create a pipe for displaying temperatures in Kelvin, Celsius and Farenheit
Use your newly created pipe
After completing module 9, students will be able to:
Use built-in pipes.
Create their own pipes.
Understand the importance of pure pipes.
Module 10: Working with Forms
Forms are essential to any app that allows you to manage data. You need to do more than just data binding. You need validation, automatic formatting, respond to data changes a so on. Angular provides two different approaches to dealing with this: Template-driven forms and Model-driven forms. This module will explore both.
Lessons of Module 10
What's in a Form
Responding to Changes
Lab : Task Editor Form
The TaskEditor component
After completing module 10, students will be able to:
Choose between template-driven and model-driven forms.
Create a form and submit the information.
Add validation and visual feeback.
Module 11: Talking to the Server
This module will teach you how to retrieve and send data to your backend. We will focus on REST and use RxJS's Observables to get the job done.
Lessons of Module 11
Sending and Receiving Data
Observables versus Promises
Lab : Working with Observables
Update Components wot work with observables
Lab : Talking to the Server
Providing the HttpClient Module
Implementing the HTTP service
After completing module 11, students will be able to:
Work with HttpClient to make rest calls.
Process the result with observables.
Module 12: Building a Single Page Application
Instead of hopping from one page to the next, you can design your website as a Single Page Application. This makes your website feel and perform more like an application. SPAs have many advantages, but are usually difficult to implement. This module will teach about the constructs available in Angular to build a SPA.
Lessons of Module 12
What is a SPA
Lab : 7Building a SPA: Rabbit Rescue
Replace static HTML with components and templates
Set up routing per feature area
Linking the feature area with with root area
After completing module 12, students will be able to:
Create a single page application.
Create feature areas.
Set up routing per feature.
Intercept navigation with guards.