Visão Geral

O Angular permite que os desenvolvedores criem facilmente aplicativos da Web dinâmicos e responsivos de página única que reescrevem dinamicamente partes da página atual, em vez de precisar gerar uma nova página em resposta a cada solicitação. O treinamento abrangente em Angular ensina aos participantes como criar aplicativos usando ES6, TypeScript e ferramentas modernas de front-end, incluindo npm e Webpack. Os alunos também obtêm uma compreensão da arquitetura do aplicativo e das práticas recomendadas de design em Angular, além de aprender como autenticar, testar a unidade e gerenciar o estado do aplicativo em um aplicativo Angular. Nota: Este curso é apropriado para todas as versões, Angular 2 a Angular 11.

Objetivo

Após a conclusão deste curso, você será capaz de:

• Entenda como as arquiteturas de aplicativos Web de página única são diferentes das arquiteturas tradicionais de aplicativos Web
• Use novos recursos de linguagem JavaScript (ES6), incluindo classes, módulos e funções de seta
• Use os novos recursos da linguagem TypeScript, incluindo Types, Decorators, Interfaces e Generics
• Aprenda as melhores práticas de codificação e arquitetura Angular, incluindo layout de projeto e uso de componentes de contêiner e apresentação
• Entenda e use formulários, observáveis, injeção de dependência e roteamento orientados por modelo Angular
• Comunique-se com um servidor de back-end usando o HttpClient do Angular para carregar e salvar dados
• Configure o roteador e navegue entre os componentes
• Aproveite o IVY, o novo compilador Angular, para compilações mais rápidas e menores
• Teste de unidade todas as partes de um aplicativo, incluindo componentes, serviços e tubos
• Entenda RxJS e Observables e onde eles podem ser usados
• Implementar autenticação e autorização em um aplicativo angular
• Otimize o desempenho angular alterando as estratégias de detecção de alterações
• Configure novos projetos do zero usando a CLI Angular
• Módulos de andaime, componentes, serviços, modelos, rotas e testes de unidade de acordo com as melhores práticas usando o Angular CLI
• Crie e implante um aplicativo para produção usando a CLI do Angular
• Entenda e visualize Ivy: o pipeline de compilação e renderização da próxima geração
• Escreva testes de ponta a ponta (opcional; ensinado apenas se isso se aplicar ao seu grupo)
• Atualize um aplicativo existente de AngularJS para Angular 11 (opcional; ensinado somente se isso se aplicar ao seu grupo)

Publico Alvo

• Este curso foi desenvolvido para aqueles que desejam aprender a criar um aplicativo do zero usando o Angular 11.

Pre-Requisitos

• Os alunos devem ter experiência em programação com uma linguagem orientada a objetos. Além disso, alguma experiência com JavaScript é útil, mas os novos recursos de linguagem de JavaScript e TypeScript são abordados/revisados ​​em aula.

Informações Gerais

Carga Horária: 32h

• Se noturno este curso é ministrado de Segunda-feira à sexta-feira, das 19h às 23h
• Se aos sábados este curso é ministrado das 9h às 18h
• Se in-company por favor fazer contato para mais detalhes.

Formato de entrega: 

• 100% on-line ao vivo, via Microsoft Teams na presença de um instrutor/consultor ativo no mercado.
• Nota: não é curso gravado. 

Lab:

• Laboratório + Exercícios práticos

Materiais

Conteúdo Programatico

Introduction

1. TypeScript and ECMAScript 6 (ES6) Fundamentals
2. TypeScript Installation, Configuration & Compilation
3. Type Annotations
4. Classes
5. Scoping using let, var, and const Keywords
6. Arrow Functions
7. ES Modules
8. Decorators
9. Template Literals
10. Spread Syntax and Rest Parameters
11. Destructuring

 Angular Overview

1. Benefits of Building using Angular
2. Understanding Angular Versions
3. Single-page Web Application Architectures vs. Traditional Serverside Web Application Architectures
4. Angular Style Guide
5. Angular Architecture
6. Angular Compared to Other JavaScript Libraries and Frameworks (React, VueJS, etc…)
7. Your First Angular Application

Components

1. Understanding Components
2. Component Properties & Methods
3. Templates: Inline, Multi-line, and External with Component-relative Paths

 Angular Modules (NgModule)

1. Angular Modules vs. ES Modules
2. Organizing your code into Feature Modules

 Project Set-Up (Using the Angular CLI)

1. Angular CLI Features
2. Creating a New Project (CLI Prompts)
3. Generating Code
4. Customizing the Angular CLI

Data Binding

1. Interpolation
2. Property binding
3. Event binding
4. Two-way data binding

Directives

1. Structural: ngFor, ngIf, ngSwitch
2. Attribute: ngClass, ngStyle

Pipes

1. Built-in Pipes: Using, Passing Parameters, Chaining

Advanced Components

1. Component Communication using @Input, @Output
2. Component Architecture
3. Component Styles
4. Component Lifecycle Hooks
5. Evaluating UI Component Frameworks & Libraries

Services & Dependency Injection

1. Using a service to access data
2. Using a service to encapsulate business logic
3. Understanding the scope of services

Dependency Injection

1. Understanding Dependency Injection
2. Angular’s Dependency Injection System
3. Registering
4. Injecting

Model-driven Forms (Reactive Forms)

1. Importing the ReactiveFormsModule
2. FormControl, FormGroup, and AbstractControl
3. Binding DOM Elements to FormGroups and FormControls
4. Validation Rules, Messages, and Styles
5. Refactoring Reactive Forms for Reuse
6. Custom Validators

Communicating with the Server using the HttpClient Service

1. Deciding between Promises or Observables (RxJS)
2. Making an HTTP GET Request
3. Sending data to the server using Http POST and PUT Requests
4. Issuing an HTTP DELETE Request
5. Intercepting Requests and Responses

Router

1. Importing the RouterModule
2. Configuring Routes
3. Displaying Components using a RouterOutlet
4. Navigating declaratively with RouterLink
5. Navigating with code using the Router
6. Accessing parameters using ActivatedRoute

Deploying an Angular Application to Production

1. Building an application using the Angular CLI
2. Differential loading: creating a modern build (ES2015) and a legacy build (ES5)
3. Deploying to a web server

Ivy: Next-Generation Compilation & Rendering Pipeline

1. Understanding Ivy
2. Ivy Goals
3. Ivy Benefits & Current Status
4. Ivy Bundle Sizes

Upgrading to the latest version of Angular from earlier versions

1. 2.x and above
2. Update Guide
3. Deprecation Guide
4. Patching Dependencies: npm audit fix
5. Looking for AngularJS to Angular upgrades? See optional topics below.

 Unit Testing

1. Tools: Jasmine, Karma
2. Jasmine Syntax: describe, it, beforeEach, afterEach, matchers
3. Setup and your First Test
4. Testing Terminology: Mock, Stub, Spy, Fakes
5. Angular Testing Terminology: TestBed, ComponentFixture, debugElement, async, fakeAsync, tick, inject
6. Simple Component Test
7. Detecting Component Changes
8. Testing a Component with properties (inputs) and events (outputs)
9. Testing a Component that uses the Router
10. Testing a Component that depends on a Service
11. Testing a Service and Mocking its HTTP requests
12. Testing a Pipe

RxJS and Observables

1. What is an Observable?
2. Creating Observables
3. What is an Observer?
4. Observer Example
5. Operators: map, switchMap, debounceTime, distinctUntilChanged
6. Practical Application of using RxJS
7. Subject
8. Subject Example
9. EventEmitter or Observable

Security

1. Best Practices
2. Preventing Cross-site Scripting (XSS)
3. Trusting values with the DOMSanitizer
4. HTTP Attacks (CSRF and CSSI)
5. Authentication using JSON Web Tokens (JWT)
6. Authorization: Router Guards

Change Detection

1. Understanding Zone.js and Change Detection
2. Change Detection Strategies Default and OnPush

 Advanced Routing

1. Lazy-loading Angular Modules (using Dynamic Imports)
2. Nested or Child Routes

Advanced Dependency Injection

1. Providers
2. Hierarchical Injection

Pipes

1. Creating a custom Pipe using PipeTransform
2. Understanding Pure and Impure Pipes