Visão Geral
Curso Criação de aplicativos da web com Angular e TypeScript: Nos últimos anos, muito esforço foi feito para tornar o HTML e o JavaScript um lugar melhor para aplicativos da web, em vez de apenas conteúdo da web. Com o Angular, você pode explorar esses conceitos novos e modernos para levá-lo ao próximo nível. Usando uma abordagem com componentes, o Angular está mais bem equipado do que nunca para construir aplicativos da web orientados por dados de alto desempenho.
Enquanto o Angular cuida da vinculação de dados, navegação e comunicação do servidor, o TypeScript permite que você use os recursos mais avançados que o JavaScript tem a oferecer em qualquer navegador. Recursos como digitação forte tornam seu aplicativo mais sustentável, melhor estruturado e flexível.
Este curso é constantemente atualizado para a última versão do Angular, atualmente Angular 11. Aproveite esta bela sinergia entre o Angular do Google e o TypeScript da Microsoft.
Conteúdo Programatico
Introduction to Angular
In this module you'll see what Angular is all about and why it is so important in modern web development.
- Evolution in Web App Development
- Basic Node.js and Angular project structure
- Angular Core and Modules
- TypeScript, Dart, Plain Old JavaScript
Strongly Typed JavaScript with TypeScript
Let's face it: JavaScript was never designed for big applications. Many constructs to tame complex code like interfaces and strong typing are completely absent. And many of the new cool JS features are not implemented in current browsers. TypeScript is the solution to both problems; allowing you to write modern, application-scale JavaScript.
- Writing Application-Scale JavaScript
- Type-Safe JavaScript Development with TypeScript
- Typescript configuration
- Implementing Types, Classes and Inheritance
- Namespaces and Modules
- LAB - Building a Web Shop with TypeScript
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.
- Components
- Modules
- Services
- Angular CLI and other Tools
- LAB - Creating an Angular Application
Data Binding
Data binding allows you to forget about the HTML while writing JavaScript code. It allows you to inject data into a view without creating a strong dependency between the two. This results into more flexible, testable and maintainable code.
- The Importance of Binding
- Component to View
- Structural Directives
- Local Template Variables
- Value Conversion
- View to Component
- LAB - Data Binding
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. You'll also take a look at some component libraries like Angular Material and how they can make you more productive
- Using Multiple Components
- Input and Output
- ViewChild and ContentChild
- EventEmitter
- Directive Life Cycle
- Component Libraries
- LAB - Building components
Attribute and Structural Directives
A component always has a view. But what if you just want to add custom behavior to an existing element? In this module you'll explore existing directives like NgIf, NgFor, NgClasses, ... And learn how to build your own.
- Attribute Directives
- Structural Directives
- Built-in Directives
- Custom
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.
- Terminology
- Dependency Injection Basics
- Services
- Providers
- Factories
- Injection Tokens
- LAB - Building Services and using Dependency Injection
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.
- Using a Pipe
- Built-in Pipes
- Custom Pipes
- Pure versus Impure
- LAB - Build your own Conversion Pipe
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.
- What's in a Form
- Responding to Changes
- FormBuilder
- Data Validation
- LAB - Capturing and Validating Input with Forms
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 Observables to get the job done.
- Sending and Receiving Data
- HTTPClient Module
- HTTP Interceptors
- Observables versus Promises
- LAB - Communication with REST Web Services
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.
- What is a SPA
- Router Module
- Route Configuration
- Parent-Child Navigation
- Route Guards
- LAB - RECAP - Setting up a Complete Single Page Application with Routing