Visão Geral

Este curso abrange todos os tópicos essenciais e foi projetado para colocar os alunos em funcionamento com o desenvolvimento do Angular 10 no menor tempo possível. Desenvolvedores e designers de aplicativos, bem como aqueles encarregados de oferecer suporte a aplicativos Angular 10, obterão conhecimento valioso necessário para o sucesso em suas funções de trabalho ao fazer este curso. Angular 10 é uma estrutura JavaScript que suporta o desenvolvimento de aplicativos de página única que são executados em navegadores e também podem ser usados ​​para desenvolver sites responsivos e aplicativos móveis híbridos.

Publico Alvo

• Desenvolvedores e gerentes da Web que têm uma base sólida de HTML e JavaScript.
  

Pre-Requisitos

• Experiência em JavaScript, incluindo conceitos de JavaScript orientado a objetos.
  

Informações Gerais

Carga Horária: 24h

• 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. Setting Element Body Text
6. Event Binding
7. Expression Event Handler
8. Prevent Default Handling
9. Attribute Directives
10. Apply Styles by Changing CSS Classes
11. Example: ngClass
12. Applying Styles Directly
13. Structural Directives
14. Conditionally Execute Template
15. Example: ngIf
16. Looping Using ngFor
17. ngFor Local Variables
18. Manipulating the Collection
19. Example - Deleting an Item
20. Item Tracking with ngFor
21. Swapping Elements with ngSwitch
22. Grouping Elements
23. 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. Getting Input Values
7. Initializing the Input Fields
8. Setting Form Values
9. Subscribing to Input Changes
10. Validation
11. Built-In Validators
12. Showing Validation Error
13. Custom Validator
14. Using a Custom Validator
15. Supplying Configuration to Custom Validator
16. Sub FormGroups - Component Class
17. Sub FormGroups - HTML Template
18. 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. Service Using HttpClient
5. Making a GET Request
6. What does an Observable Object do?
7. Using the Service in a Component
8. The PeopleService Client Component
9. Error Handling
10. Customizing the Error Object
11. Making a POST Request
12. Making a PUT Request
13. 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 date Pipe
8. The number Pipe
9. Currency Pipe
10. Create a Custom Pipe
11. Custom Pipe Example
12. Using Custom Pipes
13. Using a Pipe with ngFor
14. A Filter Pipe
15. Pipe Category: Pure and Impure
16. Pure Pipe Example
17. Impure Pipe Example
18. Summary
19. Chapter 11. Introduction to Single Page Applications
20. What is a Single Page Application (SPA)
21. Traditional Web Application
22. SPA Workflow
23. Single Page Application Advantages
24. HTML5 History API
25. SPA Challenges
26. Implementing SPA's Using Angular
27. Summary
28. Chapter 12. The Angular Component Router
29. The Component Router
30. View Navigation
31. The Angular Router API
32. Creating a Router Enabled Application
33. Hosting the Routed Components
34. Navigation Using Links and Buttons
35. Programmatic Navigation
36. Passing Route Parameters
37. Navigating with Route Parameters
38. Obtaining the Route Parameter Values
39. Retrieving the Route Parameter Synchronously
40. Retrieving a Route Parameter Asynchronously
41. Query Parameters
42. Supplying Query Parameters
43. Retrieving Query Parameters Asynchronously
44. Problems with Manual URL entry and Bookmarking
45. Summary