1. Aprendizado completo: O curso abrange desde os conceitos básicos até os mais avançados de JavaScript, TypeScript e Angular, permitindo que o aluno adquira um conhecimento completo e aprofundado nessas tecnologias.

2. Aplicação prática: O curso é 100% prático, ou seja, o aluno aprende na prática como desenvolver aplicações web utilizando JavaScript, TypeScript e Angular. Isso permite que o aluno coloque em prática todo o conhecimento adquirido e desenvolva suas habilidades de programação.

3. Utilização de tecnologias modernas: O curso aborda as versões mais recentes do JavaScript (ES6, ES7, ES8, ES9, ES10, ES11 e ES12), permitindo que o aluno esteja atualizado com as últimas tendências e recursos da linguagem. Além disso, o curso utiliza o TypeScript, um superset do JavaScript que traz recursos adicionais e maior segurança ao desenvolvimento de aplicações.

4. Criação de aplicações incríveis: O curso ensina tudo o que é necessário para criar aplicações web incríveis utilizando o framework Angular 4. O Angular é um framework poderoso e amplamente utilizado no desenvolvimento de aplicações web e mobile, permitindo a criação de aplicações modernas e responsivas.

5. Aprendizado de ferramentas e técnicas adicionais: Além do JavaScript, TypeScript e Angular, o curso também ensina o uso de outras ferramentas e técnicas importantes no desenvolvimento web, como o json-server para criação de APIs fake e o Firebase como banco de dados real-time. Isso amplia o conhecimento do aluno e o prepara para enfrentar desafios reais no desenvolvimento de aplicações web.

Pergunta 1: Para quem é o produto?
Resposta 1: O produto é destinado a pessoas interessadas em aprender a desenvolver aplicações web utilizando JavaScript, TypeScript e Angular.

Pergunta 2: O que será aprendido com o produto?
Resposta 2: Com o produto, será aprendido a utilizar diversas features do JavaScript/ECMAScript, adquirir conhecimentos básicos e intermediários no uso do TypeScript, aprender orientação a objetos em JavaScript com TypeScript, criar aplicações web incríveis utilizando o framework Angular 4, fazer o build e deploy dos projetos, utilizar o pacote json-server para criação de APIs fake e utilizar o Firebase como back-end das aplicações. 

Pergunta 3: O que é o Angular?
Resposta 3: Angular é um framework JavaScript de código fonte aberto desenvolvido e mantido pelo Google que permite a criação de aplicações web e mobile baseadas no modelo Single-Page Application (SPA).

Jorge Sant' Ana

Desenvolvimento Web com JavaScript, TypeScript e Angular

Mapa do curso

Introdução

Introdução a seção

[Windows] Instalando o NodeJS, NPM e Angular CLI

Instalando o Visual Studio Code

Preparando o ambiente de desenvolvimento

[IMPORTANTE] Aula de adaptação para o estudo do ECMAScript

Instalando a extensão Live Server no VSCode

Existe diferença entre JavaScript e ECMAScript?

Let e Const - Entendendo o comportamento do Var

Let e Const - Entendendo o comportamento do Let

Let e Const - Entendendo o comportamento do Const

Arrow function

Template strings

Default parameters

Operador Rest/Spread parte 1

Operador Rest/Spread parte 2

Destructuring assignment parte 1

Destructuring assignment parte 2

Destructuring assignment parte 3

Destructuring assignment parte 4

Class keyword parte 1

Class keyword parte 2

Generators parte 1

Generators parte 2

Promises parte 1

Promises parte 2

ECMAScript 2015 (ES6)

Array.prototype.includes

Exponential operator

ECMAScript 2016 (ES7)

Async/Await

Object.values

Object.entries

Object.getOwnPropertyDescriptors

String padStart e padEnd

ECMAScript 2017 (ES8)

Asynchronous iteration

Promise finally

ECMAScript 2018 (ES9)

Array flat

Array flatmap

String trimStart (trimLeft), trimEnd (trimRight)

Object.fromEntries

Function toString

Catch com parâmetro opcional

ECMAScript 2019 (ES10)

Dynamic Import parte 1

Dynamic Import parte 2

Dynamic Import parte 3

Operador de visibilidade Private

Optional Chaining

Promise allSettled

Nullish Coalescing Operator

ECMAScript 2020 (ES11)

Logical Nullish Assignment

Logical OR Assignment

Logical AND assignment

Numeric separator

String replaceAll

Promise any

ECMAScript 2021 (ES12)

O que é TypeScript?

Instalando o TypeScript

Criando o nosso primeiro script TypeScript

Entendendo o compilador e o arquivo de configuração tsconfig.json

Inferência de tipos

Introdução ao desafio de Orientação a Objetos com TypeScript

Orientação a objetos - Classes, objetos, atributos e métodos

Class Carro - Criando e instanciando a nossa primeira classe

Visibilidade de atributos e métodos (public e private)

Classe Concessionaria - Praticando mais um pouco

Class Pessoa - Agora é com você!

Aplicando regras de negócio parte 1

Aplicando regras de negócio parte 2

Modularizando o código

Herança - Introdução

Herança - Prática

Sobrescrita de métodos

Interfaces - Introdução

Interfaces - Um pouco mais a fundo

Interfaces - Praticando mais um pouco

Generics

Extensão vscode-icons

TypeScript e Orientação a Objetos em JavaScript

Introdução ao Angular 4

Criando o primeiro App Angular 4

Entendendo a estrutura de um projeto Angular 4

Como o App foi carregado e iniciado?

Introdução aos Componentes Angular

App1 - Introdução ao projeto

App1 - Criando o componente Topo manualmente

Component Templates

Component Styles

Component  Selector

App1 - Criando o componente Painel via CLI

App1 - Criando o componente Tentativas e Progresso via CLI

Instalando o Bootstrap no projeto

App1 - Topo (Template)

App1 - Painel (Template)

App1 - Progresso (Template)

App1 - Tentativas (Template)

Databinding

App1 - Topo (String Interpolation)

App1 - Tentativas (Property Binding)

Property Binding vs String Interpolation

Criando a classe Frase

Criando um Mock de objetos Frase

App1 - Importando as frases para o componente Painel

App1 - Exibindo instrução e frase (String interpolation)

Event binding - Introdução

Event binding - Prática

App1 - Definindo resposta do usuário (tradução da frase)

One-way-binding vs Two-way-binding

App1 - Verificando resposta parte 1

App1 - Estabelecendo a lógica das rodadas de frases

App1 - Verificando resposta parte 2

App1 - Controlando o progresso das respostas

App1 - @Input (property binding entre o componente painel e progresso)

App1 - Atualizando a rodada

App1 - Criando a classe Coracao

Diretivas

App1 - Exibindo corações com ngFor

App1 - Controlando as tentativas parte 1

App1 - @Input (property binding entre o componente painel e tentativas)

Introdução ao ciclo de vida dos componentes

App1 - Tratando parâmetros atualizados com ngOnChanges

App1 - Controlando as tentativas parte 2

App1 - Encerrando as traduções parte 1 (Vitória e derrota)

App1 - @Output (event binding entre o componente painel e App)

App1 - Executando método do componente pai através do componente filho

App1 - Controlando a exibição do Painel e testando o método ngOnDestroy

App1 - Exibindo mensagem de derrota

App1 - Exibindo mensagem de vitória

App1 - Reiniciando a aplicação

Build de desenvolvimento vs Build de produção

Deploy local via pacote http-server

Deploy local via XAMPP

Deploy na nuvem com Amazon AWS S3

Build de desenvolvimento, build de produção e deploy

Iniciando o projeto e entendendo a flag --prefix

Instalando o Bootstrap, JQuery e Tether no projeto

Criando os componentes Topo, Home e Rodape

Criando e alterando o favicon

#App2 (Pássaro Urbano) - Primeiros passos

O que são Serviços (Services)?

App2 - Criando um serviço para exibir ofertas

App2 - Injetando o serviço de ofertas no componente Home parte 1

App2 - Injetando o serviço de ofertas no componente Home parte 2

App2 - Exibindo ofertas com base no serviço OfertasService parte 1

App2 - Exibindo ofertas com base no serviço OfertasService parte 2

Promises - Entendendo o processamento síncrono e assíncrono

Promises na prática parte 1 - Introdução a estratégia de uso

Promises na prática parte 2 (Resolve e then)

Promises na prática parte 3 (Reject e then)

Promises na prática parte 4 (Reject e catch)

Promises na prática parte 5 (Processamento assíncrono e encadeamento)

Promises na prática parte 6 (Promises encadeadas)

Serviços e Promises

Introdução a APIs Rest

Introdução, instalação e testes do pacote json-server

Estratégia de consumo de APIs Rest via Angular HTTP

Injetando o serviço HTTP do Angular como dependência de outros serviços

Efetuando requisições HTTP para APIs Rest

Filtrando ofertas

Criando uma API Rest fake, injeção de dependências e HTTP Request

Entendendo a estratégia de implementação do recursos de rotas (Routes)

Criando as páginas Restaurantes e Diversão

Criando o mapa de rotas

Estabelecendo a navegação entre rotas

Alterando a classe do elemento associado a rota ativa

Recuperando ofertas do tipo Restaurantes (HTTP Resquest / API Rest / Promise)

Ajustando o template do RestauranteComponent

Recuperando ofertas do tipo Diversao  (HTTP Resquest / API Rest / Promise)

Ajustando o template do DiversaoComponent

Criando e navegando para a página Oferta

Passando parâmetros na navegação

Recuperando parâmetros da rota (Snapshot vs Subscribe)

Recuperando parâmetros da rota com Snapshot

Recuperando parâmetros da rota com Subscribe

Recuperando a oferta selecionada (HTTP Resquest / API Rest / Promise)

Ajustando o template do OfertaComponent

Processamento assíncrono e a construção do template

Ajustando a url de acesso a API

Criando as tabs "Como usar" e "Onde fica"?

Criando os componentes ComoUsarComponent e OndeFicaComponent

Configurando rotas filhas

Navegando entre as rotas filhas como-usar e onde-fica

Recuperando parâmetros da rota parent (pai) nas rotas filhas

Recuperando dados "Como usar" via HTTP Request

Recuperando dados "Onde fica?" via HTTP Request

Rotas e Navegação

Introdução a Reactive Programming

Reactive Programming: Estudo de caso

Introdução a Observables

Observables na pratica parte 1 - Subscribe em ActivatedRoute.Params

Observables na prática parte 2 - Interval operator

Observables

Desenvolvimento Web com JavaScript, TypeScript e Angular

Perguntas Frequentes

Comece na Hotmart gratuitamente

Poucos passos, muitas possibilidades