Visão Geral

O curso foi desenvolvido para colocar os alunos em funcionamento com o desenvolvimento básico do Angular 10 e fornecer o conhecimento necessário para tarefas mais desafiadoras. A estrutura Angular 10 suporta a criação de aplicativos de navegador de página única, bem como sites responsivos e aplicativos móveis híbridos. Este curso Angular 10 abrange todos os conceitos básicos, incluindo Typescript, componentes, diretivas, serviços, pipes, desenvolvimento de formulários, HttpClient e observáveis. Além disso, abrange o uso avançado de HttpClient, observáveis ​​e roteamento. Além disso, há tópicos sobre consumo de dados de WebSockets, teste e depuração de aplicativos Angular.

Objetivo

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

• Desenvolva aplicativos Angular de página única usando Typescript
• Configure um ambiente de desenvolvimento Angular completo
• Crie Componentes, Diretivas, Serviços, Pipes, Formulários e Validadores Personalizados
• Lidar com tarefas avançadas de recuperação de dados de rede usando Observables
• Consuma dados de serviços web REST usando o cliente HTTP Angular
• Manipular conexões de dados push usando o protocolo WebSockets
• Trabalhe com Angular Pipes para formatar dados
• Use recursos avançados do Angular Component Router
• Teste e depure aplicativos Angular usando ferramentas integradas
• Trabalhar com CLI Angular

Publico Alvo

• Desenvolvedores front-end e Angular.

Pre-Requisitos

• É necessária experiência em desenvolvimento Web usando HTML, CSS e JavaScript para aproveitar ao máximo este curso Angular. O conhecimento do DOM do navegador também é útil. Experiência anterior em Angular, com AngularJS ou a versão atual do Angular, não é necessária.

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

Introducing Angular

1. What is Angular?
2. Central Features of the Angular Framework
3. Appropriate Use Cases
4. Building Blocks of an Angular Application
5. Basic Architecture of an Angular Application
6. Installing and Using Angular
7. Anatomy of an Angular Application
8. Running the Application
9. Building and Deploying the Application

Introduction to TypeScript

1. Programming Languages for Use with Angular
2. TypeScript Syntax
3. Programming Editors
4. The Type System – Defining Variables
5. The Type System – Defining Arrays
6. Type in Functions
7. Type Inference
8. Defining Classes
9. Class Methods
10. Class Constructors
11. Class Constructors – Alternate Form
12. Interfaces
13. Working with ES6 Modules
14. Visibility Control
15. var vs let
16. Arrow Functions
17. Arrow Function Compact Syntax
18. Arrow Function and Caller Context
19. Template Strings
20. Generics in Class
21. Generics in Function
22. Generics - Restricting Types
23. TypeScript Transpilation

Components

1. What is a Component?
2. An Example Component
3. Creating a Component Using Angular CLI
4. The Component Class
5. The @Component Decorator
6. Registering a Component to Its Module
7. Component Template
8. Example: HelloComponent Template
9. Example: The HelloComponent Class
10. Using a Component
11. Run the Application
12. Component Hierarchy
13. The Application Root Component
14. The Bootstrap File
15. Component Lifecycle Hooks
16. Example Lifecycle Hooks
17. CSS Styles

Component Templates

1. Templates
2. Template Location
3. The Mustache {{ }} Syntax
4. Setting DOM Element Properties
5. Event Binding
6. Expression Event Handler
7. Prevent Default Handling
8. Attribute Directives
9. Apply Styles by Changing CSS Classes
10. Example: ngClass
11. Applying Styles Directly
12. Structural Directives
13. Conditionally Execute Template
14. Example: ngIf
15. Looping Using ngFor
16. ngFor Local Variables
17. Manipulating the Collection
18. Example - Deleting an Item
19. Item Tracking with ngFor
20. Swapping Elements with ngSwitch
21. Template Reference Variable

Inter Component Communication

1. Communication Basics
2. The Data Flow Architecture
3. Preparing the Child to Receive Data
4. Send Data from Parent
5. More About Setting Properties
6. Firing Event from a Component
7. @Output() Example - Child Component
8. @Output() Example - Parent Component
9. Full Two Way Binding
10. Setting up Two Way Data Binding in Parent

Template Driven Forms

1. Template Driven Forms
2. Importing Forms Module
3. Basic Approach
4. Setting Up a Form
5. Getting User Input
6. Omitting ngForm Attribute
7. Initialize the Form
8. Two Way Data Binding
9. Form Validation
10. Angular Validators
11. Displaying Validation State Using Classes
12. Additional Input Types
13. Checkboxes
14. Select (Drop Down) Fields
15. Rendering Options for Select (Drop Down)
16. Date fields
17. Radio Buttons

Reactive Forms

1. Reactive Forms Overview
2. The Building Blocks
3. Import ReactiveFormsModule
4. Construct a Form
5. Design the Template
6. FormControl Constructor
7. Getting Form Values
8. Setting Form Values
9. The Synchronous Nature
10. Subscribing to Input Changes
11. Validation
12. Built-In Validators
13. Showing Validation Error
14. Custom Validator
15. Using a Custom Validator
16. Supplying Configuration to Custom Validator
17. Sub FormGroups - Component Class
18. Sub FormGroups - HTML Template
19. Why Use Sub FormGroups

Services and Dependency Injection

1. What is a Service?
2. Creating a Basic Service
3. The Service Class
4. What is Dependency Injection?
5. Injecting a Service Instance
6. Injectors
7. Injector Hierarchy
8. The Root Injector
9. Registering a Service with a Component's Injector
10. Where to Register a Service?
11. Dependency Injection in Other Artifacts
12. Providing an Alternate Implementation
13. Dependency Injection and @Host
14. Dependency Injection and @Optional

HTTP Client

1. The Angular HTTP Client
2. Using The HTTP Client - Overview
3. Importing HttpClientModule
4. Simple Example
5. Service Using HttpClient
6. ES6 Import Statements
7. Making a GET Request
8. What does an Observable Object do?
9. Using the Service in a Component
10. The PeopleService Client Component
11. Error Handling
12. Customizing Error Object with .catch()
13. Making a POST Request
14. Making a PUT Request
15. Making a DELETE Request

Pipes and Data Formatting

1. What are Pipes?
2. Built-In Pipes
3. Using Pipes in HTML Template
4. Chaining Pipes
5. Internationalized Pipes (i18n)
6. Loading Locale Data
7. The number Pipe
8. Currency Pipe
9. Create a Custom Pipe
10. Custom Pipe Example
11. Using Custom Pipes
12. Using a Pipe with ngFor
13. A Filter Pipe
14. Pipe Category: Pure and Impure
15. Pure Pipe Example
16. Impure Pipe Example

Introduction to Single Page Applications

1. What is a Single Page Application (SPA)
2. Traditional Web Application
3. SPA Workflow
4. Single Page Application Advantages
5. HTML5 History API
6. SPA Challenges
7. Implementing SPA's Using Angular

The Angular Component Router

1. The Component Router
2. View Navigation
3. The Angular Router API
4. Creating a Router Enabled Application
5. Hosting the Routed Components
6. Navigation Using Links and Buttons
7. Programmatic Navigation
8. Passing Route Parameters
9. Navigating with Route Parameters
10. Obtaining the Route Parameter Values
11. Retrieving the Route Parameter Synchronously
12. Retrieving a Route Parameter Asynchronously
13. Query Parameters
14. Supplying Query Parameters
15. Retrieving Query Parameters Asynchronously
16. Problems with Manual URL entry and Bookmarking

Advanced HTTP Client

1. Request Options
2. Returning an HttpResponse Object
3. Setting Request Headers
4. Creating New Observables
5. Creating a Simple Observable
6. The Observable.create() Method
7. Observable Operators
8. More About map
9. Piping Operators
10. The flatMap() Operator
11. The tap() Operator
12. The zip() Operator
13. Caching HTTP Response
14. Making Sequential HTTP Calls
15. Making Parallel Calls
16. Customizing Error Object with catchError()
17. Error in Pipeline
18. Error Recovery

Angular Modules

1. Why Angular Modules?
2. Angular Built-in Modules
3. Anatomy of a Module Class
4. @NgModule Properties
5. Feature Modules
6. Create Feature Module Using CLI
7. Add Artifacts to a Feature Module
8. Using One Module From Another
9. Module as a Service Injector

Advanced Routing

1. Routing Enabled Feature Module
2. Using the Feature Module
3. Lazy Loading the Feature Module
4. Creating Links for the Feature Module Components
5. More About Lazy Loading
6. Preloading Modules
7. routerLinkActive binding
8. Default Route
9. Wildcard Route Path
10. redirectTo
11. Child Routes
12. Defining Child Routes
13. for Child Routes
14. Links for Child Routes
15. Navigation Guards
16. Creating Guard Implementations
17. Using Guards in a Route
18. Route Animations

 Unit Testing Angular Applications

1. Unit Testing Angular Artifacts
2. Testing Tools
3. Typical Testing Steps
4. Test Results
5. Jasmine Test Suites
6. Jasmine Specs (Unit Tests)
7. Expectations (Assertions)
8. Matchers
9. Examples of Using Matchers
10. Using the not Property
11. Setup and Teardown in Unit Test Suites
12. Example of beforeEach and afterEach Functions
13. Angular Test Module
14. Example Angular Test Module
15. Testing a Service
16. Injecting a Service Instance
17. Test a Synchronous Method
18. Test an Asynchronous Method
19. Using Mock HTTP Client
20. Supplying Canned Response
21. Testing a Component
22. Component Test Module
23. Creating a Component Instance
24. The ComponentFixture Class
25. Basic Component Tests
26. The DebugElement Class
27. Simulating User Interaction

Debugging

1. Overview of Angular Debugging
2. Viewing TypeScript Code in Debugger
3. Using the debugger Keyword
4. Debug Logging
5. What is Augury?
6. Using Augury
7. Opening Augury
8. Augury - Component Tree
9. Augury - Router Tree.
10. Catching Syntax Errors