Curso Comprehensive Angular 10 Programming
32 horasVisã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
Português | InglêsConteúdo Programatico
Introducing Angular
- What is Angular?
- Central Features of the Angular Framework
- Appropriate Use Cases
- Building Blocks of an Angular Application
- Basic Architecture of an Angular Application
- Installing and Using Angular
- Anatomy of an Angular Application
- Running the Application
- Building and Deploying the Application
Introduction to TypeScript
- Programming Languages for Use with Angular
- TypeScript Syntax
- Programming Editors
- The Type System – Defining Variables
- The Type System – Defining Arrays
- Type in Functions
- Type Inference
- Defining Classes
- Class Methods
- Class Constructors
- Class Constructors – Alternate Form
- Interfaces
- Working with ES6 Modules
- Visibility Control
- var vs let
- Arrow Functions
- Arrow Function Compact Syntax
- Arrow Function and Caller Context
- Template Strings
- Generics in Class
- Generics in Function
- Generics - Restricting Types
- TypeScript Transpilation
Components
- What is a Component?
- An Example Component
- Creating a Component Using Angular CLI
- The Component Class
- The @Component Decorator
- Registering a Component to Its Module
- Component Template
- Example: HelloComponent Template
- Example: The HelloComponent Class
- Using a Component
- Run the Application
- Component Hierarchy
- The Application Root Component
- The Bootstrap File
- Component Lifecycle Hooks
- Example Lifecycle Hooks
- CSS Styles
Component Templates
- Templates
- Template Location
- The Mustache {{ }} Syntax
- Setting DOM Element Properties
- Event Binding
- Expression Event Handler
- Prevent Default Handling
- Attribute Directives
- Apply Styles by Changing CSS Classes
- Example: ngClass
- Applying Styles Directly
- Structural Directives
- Conditionally Execute Template
- Example: ngIf
- Looping Using ngFor
- ngFor Local Variables
- Manipulating the Collection
- Example - Deleting an Item
- Item Tracking with ngFor
- Swapping Elements with ngSwitch
- Template Reference Variable
Inter Component Communication
- Communication Basics
- The Data Flow Architecture
- Preparing the Child to Receive Data
- Send Data from Parent
- More About Setting Properties
- Firing Event from a Component
- @Output() Example - Child Component
- @Output() Example - Parent Component
- Full Two Way Binding
- Setting up Two Way Data Binding in Parent
Template Driven Forms
- Template Driven Forms
- Importing Forms Module
- Basic Approach
- Setting Up a Form
- Getting User Input
- Omitting ngForm Attribute
- Initialize the Form
- Two Way Data Binding
- Form Validation
- Angular Validators
- Displaying Validation State Using Classes
- Additional Input Types
- Checkboxes
- Select (Drop Down) Fields
- Rendering Options for Select (Drop Down)
- Date fields
- Radio Buttons
Reactive Forms
- Reactive Forms Overview
- The Building Blocks
- Import ReactiveFormsModule
- Construct a Form
- Design the Template
- FormControl Constructor
- Getting Form Values
- Setting Form Values
- The Synchronous Nature
- Subscribing to Input Changes
- Validation
- Built-In Validators
- Showing Validation Error
- Custom Validator
- Using a Custom Validator
- Supplying Configuration to Custom Validator
- Sub FormGroups - Component Class
- Sub FormGroups - HTML Template
- Why Use Sub FormGroups
Services and Dependency Injection
- What is a Service?
- Creating a Basic Service
- The Service Class
- What is Dependency Injection?
- Injecting a Service Instance
- Injectors
- Injector Hierarchy
- The Root Injector
- Registering a Service with a Component's Injector
- Where to Register a Service?
- Dependency Injection in Other Artifacts
- Providing an Alternate Implementation
- Dependency Injection and @Host
- Dependency Injection and @Optional
HTTP Client
- The Angular HTTP Client
- Using The HTTP Client - Overview
- Importing HttpClientModule
- Simple Example
- Service Using HttpClient
- ES6 Import Statements
- Making a GET Request
- What does an Observable Object do?
- Using the Service in a Component
- The PeopleService Client Component
- Error Handling
- Customizing Error Object with .catch()
- Making a POST Request
- Making a PUT Request
- Making a DELETE Request
Pipes and Data Formatting
- What are Pipes?
- Built-In Pipes
- Using Pipes in HTML Template
- Chaining Pipes
- Internationalized Pipes (i18n)
- Loading Locale Data
- The number Pipe
- Currency Pipe
- Create a Custom Pipe
- Custom Pipe Example
- Using Custom Pipes
- Using a Pipe with ngFor
- A Filter Pipe
- Pipe Category: Pure and Impure
- Pure Pipe Example
- Impure Pipe Example
Introduction to Single Page Applications
- What is a Single Page Application (SPA)
- Traditional Web Application
- SPA Workflow
- Single Page Application Advantages
- HTML5 History API
- SPA Challenges
- Implementing SPA's Using Angular
The Angular Component Router
- The Component Router
- View Navigation
- The Angular Router API
- Creating a Router Enabled Application
- Hosting the Routed Components
- Navigation Using Links and Buttons
- Programmatic Navigation
- Passing Route Parameters
- Navigating with Route Parameters
- Obtaining the Route Parameter Values
- Retrieving the Route Parameter Synchronously
- Retrieving a Route Parameter Asynchronously
- Query Parameters
- Supplying Query Parameters
- Retrieving Query Parameters Asynchronously
- Problems with Manual URL entry and Bookmarking
Advanced HTTP Client
- Request Options
- Returning an HttpResponse Object
- Setting Request Headers
- Creating New Observables
- Creating a Simple Observable
- The Observable.create() Method
- Observable Operators
- More About map
- Piping Operators
- The flatMap() Operator
- The tap() Operator
- The zip() Operator
- Caching HTTP Response
- Making Sequential HTTP Calls
- Making Parallel Calls
- Customizing Error Object with catchError()
- Error in Pipeline
- Error Recovery
Angular Modules
- Why Angular Modules?
- Angular Built-in Modules
- Anatomy of a Module Class
- @NgModule Properties
- Feature Modules
- Create Feature Module Using CLI
- Add Artifacts to a Feature Module
- Using One Module From Another
- Module as a Service Injector
Advanced Routing
- Routing Enabled Feature Module
- Using the Feature Module
- Lazy Loading the Feature Module
- Creating Links for the Feature Module Components
- More About Lazy Loading
- Preloading Modules
- routerLinkActive binding
- Default Route
- Wildcard Route Path
- redirectTo
- Child Routes
- Defining Child Routes
- for Child Routes
- Links for Child Routes
- Navigation Guards
- Creating Guard Implementations
- Using Guards in a Route
- Route Animations
Unit Testing Angular Applications
- Unit Testing Angular Artifacts
- Testing Tools
- Typical Testing Steps
- Test Results
- Jasmine Test Suites
- Jasmine Specs (Unit Tests)
- Expectations (Assertions)
- Matchers
- Examples of Using Matchers
- Using the not Property
- Setup and Teardown in Unit Test Suites
- Example of beforeEach and afterEach Functions
- Angular Test Module
- Example Angular Test Module
- Testing a Service
- Injecting a Service Instance
- Test a Synchronous Method
- Test an Asynchronous Method
- Using Mock HTTP Client
- Supplying Canned Response
- Testing a Component
- Component Test Module
- Creating a Component Instance
- The ComponentFixture Class
- Basic Component Tests
- The DebugElement Class
- Simulating User Interaction
Debugging
- Overview of Angular Debugging
- Viewing TypeScript Code in Debugger
- Using the debugger Keyword
- Debug Logging
- What is Augury?
- Using Augury
- Opening Augury
- Augury - Component Tree
- Augury - Router Tree.
- Catching Syntax Errors