Angular 2 e 4: Desenvolva agora de forma simples!

Neste vídeo, vamos introduzir a seção sobre instalação e configuração do ambiente de desenvolvimento necessário para criação de projetos com o Angular

Nesta aula, vamos fazer a instalação do Node.js, plataforma base para desenvolver projetos com o Angular.

Nota: após a gravação do vídeo, foram lançadas novas versões do Node.js e NPM: as versões atuais são v7.9.0 e 4.2.0, respectivamente.

Nesta aula, vamos instalar o Node Version Manager, mais conhecido como NVM. O NVM é um gerenciador de versões do Node.js, o que facilita a instalação e atualização da nossa plataforma de desenvolvimento.

Nesta aula, vamos instalar o Visual Studio Code, mais conhecido como VSCode. O VSCode é um editor poderoso de código fonte, e fortemente recomendado para o desenvolvimento de projetos com o Angular. 

Nesta aula, vamos instalar o Git. O Git é um sistema de controle de versão distribuído gratuito, e o mais utilizado na comunidade. Vamos precisar do Git ao longo do nosso curso, principalmente para importar recursos do Angular e das nossas aulas através do Github

Nesta aula, vamos criar a primeira função com o Typescript.

Nesta seção, vamos criar e configurar o arquivo tsconfig.json na pasta raiz do nosso projeto. Utilizamos arquivo tsconfig.json para informar as opções de compilação necessárias para a execução dos nossos projetos.

Nesta aula, vamos mostrar como declarar variáveis com o tipo any. O tipo de dados any é recomendado para uso na declaração de dados que vem de fontes desconhecidas, como dados de funções de bibliotecas Javascript puras

Vamos introduzir e desenvolver um exemplo para mostrar como fazer a declaração do tipo de dado string com o Typescript nesta aula

Nesta aula, vamos introduzir o tipo de dado boolean e mostrar como utilizá-lo com o Typescript

Vamos introduzir e mostrar na prática nesta aula como usar o tipo de dado number no Typescript

Nesta aula, vamos introduzir através de um exemplo prático como utilizar o tipo de dado array com o Typescript

Nesta aula, vamos mostrar através de um exemplo como usar o enum com o Typescript

Nesta aula, vamos mostrar como podemos alterar os valores padrões de um enum

Nesta aula, vamos criar a primeira função com o Typescript com compilação automática após a configuração do arquivo tsconfig.json

Nesta aula, vamos mostrar, através de um exemplo, como criar funções com parâmetros tipados com o Typescript

Nesta aula, vamos mostrar como adicionar parâmetros opcionais com o Typescript. Ao chamar funções com estes tipos de parâmetros, podemos passá-los ou não para a execução do método

Nesta aula, vamos aprender como criar funções com parâmetros REST com o Typescript.

Nesta aula, vamos aprender e nos aprofundar como desenvolver arrow functions com o Typescript

Nesta aula, vamos aprender a criar classes com o Typescript. Vamos aprender também a instanciar objetos de uma classe nesta aula.

Vamos aprender a criar construtores para inicializar objetos com valores já pré-definidos nesta aula.

Nesta aula, vamos aprender a criar métodos dentro de classe com o Typescript

Vamos aprender a utilizar herança para criar classes mais especializadas e que herdam comportamentos de uma super classe com o Typescript. Vamos aprender também a utilizar a palavra-chave super para fazer a chamada, dentro de métodos sobrescritos, das suas funções originais que herdam os seus comportamentos

Nesta aula, vamos aprender a utilizar os modificadores de acesso private, public e protected com o Typescript, e quais as situações ideias para utilizar cada um deles

Nesta aula, vamos aprender a criar interfaces tipadas com o Typescript, e em quais situações podemos utilizá-las e aproveitar os seus benefícios

Nesta aula, vamos ver como usar as interfaces para definir contratos para implementação em classes.

Nesta aula, vamos introduzir e mostrar como utilizar generics com o Typescript

Nesta aula, vamos aprender a criar funções com generics para manipulação de tipos específicos em funções

Nesta aula, vamos aprender a criar módulos com o Typescript, e também como eles são extremamente importantes na organização dos nossos projetos, além de reutilizá-los na implementação de outras classes e projetos.

Nesta aula, vamos apresentar todo o conteúdo da seção referente à criação do primeiro projeto com o Angular. Vamos apresentar como todo o módulo está estruturado.

Nesta aula, vamos desenvolver o primeiro projeto com o Angular. Para facilitar a criação de toda a estrutura de projetos e focar nos principais pontos do projeto, vamos utilizar o projeto quickstart, disponibilizado através do Github oficial do Angular.

Nota: o projeto disponibilizado no github já está atualizado com a nova versão do Angular (4)

Detalhamento da estrutura do projeto gerada nos vídeos anteriores. Nesta aula, vamos também mostrar como organizamos os arquivos necessários para a execução completa de um projeto Angular. Vamos mostrar também como as dependências necessárias para a execução do projeto estão organizadas.

Nesta aula, vamos introduzir e nos aprofundar nos Módulos. Vamos descrever a importância na criação de Módulos para organização, agrupamento e reutilização de elementos dos nossos projetos Angular. Vamos também mostrar o porque um projeto Angular deve ter um módulo Root

Nesta aula, vamos introduzir e nos aprofundar em Components e Templates com o Angular, e mostrar como eles interagem entre si.

Nesta aula, vamos introduzir a seção Instalação e desenvolvimento do primeiro do projeto com o Angular CLI. O Angular CLI é uma ferramenta para a criação e pré-configuração de projetos Angular. A estrutura de projetos gerada através da ferramenta já está pronta para a execução, e nos focamos desde já na criação de projetos

Nesta aula, vamos mostrar como é feita a instalação do Angular CLI.

Vamos desenvolver o primeiro projeto através do Angular CLI, um componente e executá-lo através de comandos da ferramenta

Nesta aula, vamos descrever toda a estruturação do projeto gerado através do Angular CLI. O projeto criado através da ferramenta já tem diretórios e configurações para execução de componentes, arquivos de ambientes, testes unitários e integração

Vamos mostrar como utilizar os arquivos do diretório environments, disponibilizado pelo projeto gerado através do Angular CLI nesta aula. Estes arquivos contém as configurações específicas de cada ambiente de execução do projeto (desenvolvimento , produção, homologação, etc.) Além disso, vamos mostrar também como criar um arquivo de configuração para um ambiente de homologação

Nesta aula, vamos demonstrar, de forma breve, quais são os principais comandos disponíveis no Angular CLI para ajudar e facilitar o desenvolvimento dos nossos projetos

Nesta aula vamos demonstrar como utilizar o comando ng doc para pesquisa na documentação oficial do Angular

Nesta aula, vamos fazer a atualização de versão do Angular CLI. 

Nesta aula, vamos introduzir todas as seções referentes ao desenvolvimento do projeto principal do curso: Gestão de Vinhos

Vamos mostrar a arquitetura do projeto Gestão de Vinhos nesta aula. Vamos descrever quais componentes, serviços e outros elementos do projeto serão desenvolvido ao longo das seções

Nesta aula, vamos gerar toda a estrutura do projeto com o Angular CLI

Nesta aula, vamos adicionar o Bootstrap 4 através da instalação da sua dependência e configurar todo o projeto para utilizá-lo como padrão de layout. Vamos também adicionar o template principal e o menu da aplicação.

Nesta aula, vamos criar a classe Vinho, que representará o vinho a ser gerenciado pelo sistema

Neta aula, vamos desenvolver a primeira versão da Listagem de Vinhos. Vamos exibir todos os vinhos cadastrados no sistema em uma tabela e mostrar também todos os seus atributos, definidos pela classe criada no vídeo anterior. Vamos também mostrar outros elementos do angular como a diretiva ngFor para exibir os vinhos cadastrados em uma tabela, e também os ciclo de vida ngOnInit

Nesta aula, vamos aprender a criar classes services com o Angular. Vamos usar services para escrever classes que façam a interação com dados vindos do backend, e deixar o componente somente com a responsabilidade de controlar a exibição e interação dos dados no browser

Nesta aula, vamos nos aprofundar em Services. Vamos descrever e mostrar a importância no uso de services para separação de responsabilidades e reuso por diversos Components de um projeto, além de dar exemplos de quais tipos de services podemos criar.

Vamos também mostrar a importância ao usar Injeção de Dependências no uso de serviços por um Component

Nesta aula, vamos aprender a criar uma API simulada com o módulo angular-in-memory-web-api para fazer simulações de chamadas HTTP para obter dados de um servidor de dados.

Nesta aula, vamos aprender a usar as Promises para fazer requisições assíncronas na busca de dados.

Nesta aula, vamos aprender a fazer requisições HTTP para obter dados da nossa api simulada com o serviço HTTP disponibilizado pelo Angular

Nesta aula extra, vamos mostrar como usar um Observable para fazer requisições assíncronas de dados ä nossa API simulada

Nesta aula, vamos criar um componente para fazer o Cadastro de novos vinhos no sistema. Vamos também criar um formulário com o Bootstrap para o cadastro dos vinhos.

Nesta aula, vamos introduzir o Angular Router na prática. Com 2 funcionalidades no sistema, precisamos acessá-las através de rotas no navegar. Com o Angular Router, vamos criar rotas para navegar entre estas 2 páginas do sistema.

Nesta aula, vamos configurar a barra de menu para navegação entre as 2 rotas criadas na aula anterior. Vamos aprender a usar as diretivas routerLink e routerLinkActive para este propósito

Vamos usar o Angular Router para criar um botão na tela de Cadastro de Vinhos para voltar para a tela de Listagem de Vinhos nesta aula

Nesta aula, vamos implementar o fluxo básico do cadastro de um vinho no sistema: desde o preenchimento do formulário de cadastro até o envio de dados para a API simulada

Nesta aula, vamos fazer uma abordagem mais detalhada sobre o two-way databinding

Nesta aula, vamos mostrar como adicionar validação de campos com o ngModel

Nesta aula, vamos nos aprofundar sobre a validação de dados com o ngModel e entender os tipos de validação que podemos fazer

Nesta aula, vamos criar um componente para exibição, em uma tela, de todos os detalhes de um vinho cadastrado no sistema. Será uma tela bem similar à tela e cadastro de vinhos, entretanto não será permitida a edição de dados. Vamos também configurar uma rota para esta tela.

Vamos implementar todo o fluxo de exibição dos detalhes de um vinho nesta aula. Será implementado o carregamento dos seus detalhes na API simulada de dados para apresentar ao usuário na tela de Detalhes do Vinho

Nesta aula, vamos adicionar um botão na tela de Detalhes de Vinho para voltar à tela de Listagem de Vinhos. Vamos utilizar o módulo Angular Router para fazer esta implementação

Nesta aula, vamos implementar o fluxo de redirecionamento da sele de listagem de vinhos para a tela de detalhamento de vinhos. Vamos criar o método selecionar() na listagem de vinhos, onde vamos fazer o redirecionamento para a tela de Detalhes de Vinhos

Nesta aula, vamos implementar o fluxo para buscar um vinho para fazer a sua edição de dados. Vamos utilizar o método buscar() implementado em vinho.service.ts para buscar o vinho e carregá-lo na tela de cadastro de vinhos, para a edição. Vamos também cadastrar uma rota para carregar a tela de cadastro de vinhos para edição e passar o id do vinho selecionado

Vamos implementar um método na tela de listagem de vinhos para fazer o redirecionamento, à partir de um vinho selecionado, para a tela de edição de vinhos nesta aula

Nesta aula, vamos implementar o envio de dados do fluxo de atualização de um vinho para a API simulada e a sua chamada no componente de cadastro de vinhos, para salvar as modificações feitas em um vinho.