Angular 2 e 4: Desenvolva agora de forma simples!
4.0 (15 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
78 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Angular 2 e 4: Desenvolva agora de forma simples! to your Wishlist.

Add to Wishlist

Angular 2 e 4: Desenvolva agora de forma simples!

Aprenda e comece a desenvolver agora projetos com a nova versão do Angular!
4.0 (15 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
78 students enrolled
Created by Rodrigo Peleias
Last updated 7/2017
Portuguese
Current price: $10 Original price: $70 Discount: 86% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 9.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Criar projetos com a nova versão do Angular
  • Aplicar os conceitos e exemplos do curso nos seus projetos
  • Adquirir conhecimentos em uma nova linguagem de programação (Typescript)
  • Aprender e ganhar experiência no desenvolvimento de projetos com a nova versão do Angular
  • Compreender a importância em manter todo o projeto Angular do lado do cliente (browser)
View Curriculum
Requirements
  • Conhecimentos em HTML, CSS e Javascript
  • Noções de padrão arquitetural MVC
  • Orientação a objetos
  • Conceitos básicos para desenvolvimento Web
  • Conhecimento em alguma linguagem fortemente tipada (como Java e C#) não é pré-requisito, porém é um apoio para o aprendizado da linguagem de programação Typescript
  • Conhecimentos em lógica de programação
Description

Quer aprender como desenvolver projetos com o Angular de forma eficiente, passando por todos os seus conceitos, através de um projeto prático?

Neste curso, vamos apresentar o Angular, entender as suas principais características e o porque atualmente ele é bem procurado pela comunidade. 

Durante o fluxo do curso, vamos introduzir o Angular, mostrar as suas principais vantagens e características em adotá-lo nos seus projetos. Vamos também ensinar como usar o Typescript, um superset do Javascript, utilizado como linguagem de programação base no desenvolvimento de projetos do Angular.

Ensinaremos a usar o Angular com uma abordagem 100% prática. E em paralelo, vamos introduzir os seus principais conceitos.

Para finalizar o curso, vamos mostrar como gerar os arquivos necessários para executar o projeto Angular em produção.

E para complementar o seu aprendizado, vamos disponibilizar alguns capítulos de bônus, para aumentar e otimizar o aprendizado e desenvolvimento de projetos com o Angular.

Serão fornecidos todos os slides, recursos da internet e principalmente, os códigos-fonte hospedados no github de todos os exemplos desenvolvidos em todas as seções do curso. Com estes materiais à sua disposição, tenho certeza que o seu aprendizado será muito eficiente.

Fiquem à vontade para assistirem às aulas abertas do curso, e inclusive experimentá-lo por 30 dias. Alguns vídeos estão disponíveis gratuitamente para ajudá-lo a se inscrever e aprender conosco. 

Estou à disposição para ajudá-lo nesta jornada incrível com o Angular. O objetivo é o aprendizado e domínio do Angular ao final do curso.

Clique agora para comprar o curso e evolua cada vez mais a sua carreira com o Angular!

Tenho certeza que vão adorar o conteúdo e a didática do curso!

Who is the target audience?
  • Desenvolvedores Web experientes que desejam migrar seus projetos para o Angular
  • Desenvolvedores que adoram aprender e desejam conhecer de forma mais aprofundada o Angular
  • Desenvolvedore que desejam se atualizar a aprender o Angular para uso nos seus novos projetos
  • Desenvolvedores desejam aprender e se aprofundar em uma nova linguagem de programação (Typescript)
  • Desenvolvedores web iniciantes e que já possuem conhecimentos básicos em lógica de programação, HTML, CSS e Javascript
Students Who Viewed This Course Also Viewed
Curriculum For This Course
112 Lectures
09:36:44
+
Apresentação do curso
3 Lectures 10:37

Bem vindos ao curso Angular 2 e 4 : Desenvolva agora de forma simples! 

Nesta aula, vamos ver a apresentação do instrutor do curso e o que vamos estudar ao longo da nossa jornada! 

Preview 03:33

Nesta aula, vamos listar as vantagens de usar o Angular e o porque atualmente é adotado para desenvolvimento pela comunidade

Preview 03:43

Links e sites úteis e essenciais referentes ao Angular

Links úteis e essenciais do Angular
03:21
+
Instalação e Configuração do Ambiente de Desenvolvimento
5 Lectures 16:17

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

Preview 01:32

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.

Instalação do Node.js
02:54

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.

Instalação e configuração do NVM (Node Version Manager)
05:04

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. 

Instalação do Visual Studio Code
03:02

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

Instalação e configuração do GIT
03:45
+
Introdução ao Typescript
25 Lectures 02:14:37

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

Preview 04:43

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.

Arquivo de configuração tsconfig.json
06:49

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

Tipos de dados básicos: o tipo ANY
07:27

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

Tipos de dados básicos: o tipo STRING
06:52

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

Tipos de dados básicos: o tipo BOOLEAN
02:32

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

Tipos de dados básicos: o tipo NUMBER
02:41

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

Tipos de dados básicos: o tipo ARRAY
06:15

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

Enums: como desenvolver e utilizar com o Typescript
05:21

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

Enums: como mudar os valores padrões
03:33

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

Funções: primeira função com o Typescript
04:53

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

Funções: declaração de parâmetros de entradas tipados
04:08

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

Funções: declaração de parâmetros de entrada com valores default
04:50

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

Funções: funções com parâmetros REST
03:32

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

Funções: Arrow Functions
05:15

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

Classes: introdução à criação de classes com o Typescript
05:12

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

Classes: Construtores
04:38

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

Classes: métodos internos da classe
03:15

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

Classes: como fazer o uso de Herança
09:35

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

Classes: modificadores de acesso
06:42

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

Interfaces: introdução e criação de Interfaces tipadas
06:10

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

Interfaces: Criação de interfaces funcionais e implementação com classes
10:25

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

Generics: introdução e uso com o Typescript
08:12

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

Generics: desenvolvimento de funções genéricas
04:33

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.

Módulos: Introdução, desenvolvimento e uso nos nossos projetos
04:04
+
Primeiro projeto com o Angular
5 Lectures 30:08

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.

Preview 00:59

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)

Preview 13:44

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.

Detalhamento da estrutura do projeto Angular
06:22

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

Módulos no Angular: o que são e a sua importância em um projeto
04:24

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

Components e Templates no Angular: o que são e como se relacionam
04:39
+
Instalação e Desenvolvimento de primeiro projeto com o Angular CLI
8 Lectures 47:55

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

Introdução à seção
03:31

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

Instalação do Angular CLI
04:28

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

Primeiro projeto com o Angular CLI
04:32

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

Estrutura de projeto gerado através do Angular CLI
12:25

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

Arquivos de ambientes específicos: Desenvolvimento, Homologação e Produção
09:26

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

Introdução e demonstração do comandos mais importantes do Angular CLI
08:27

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

Ng doc: Como usar o Angular CLI para pesquisa na documentação do Angular
01:55

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

Como atualizar o Angular CLI
03:11
+
Projeto Gestão de vinhos: apresentação e configuração inicial do projeto
4 Lectures 14:15

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

Preview 03:16

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

Preview 03:06

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

Geração do projeto com o Angular CLI
02:39

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.

Inclusão do Bootstrap 4 como template do projeto
05:14
+
Projeto Gestão de Vinhos: Listagem de Vinhos
8 Lectures 52:26

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

Criação da classe de modelo: vinho.ts
03:16

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

Geração do primeiro componente do projeto: Listagem de vinhos
14:18

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

Separação de responsabilidades: classe de serviço para gerenciar vinhos
09:08

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

Services: o que são e porque utilizá-lo na separação de responsabilidades
05:25

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.

Criação e configuração de API simulada para requisições de dados de negócio
07:10

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

Implementação de requisição assíncrona à API com Promises
04:06

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

Requisições assíncronas com Http e Promise
05:35

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

Aula extra: Implementação de requisição assíncrona à API com Observable
03:28
+
Projeto Gestão de Vinhos: Cadastro de novo vinho
8 Lectures 43:23

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.

Geração de componente para o cadastro de Vinhos
04:00

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.

Introdução ao Router Module: configuração de rotas de acesso a componentes
07:32

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

Configuração de barra de menu para Navegação no Cadastro e Listagem de vinhos
03:40

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

Implementação de botão para voltar do Cadastro para Listagem de Vinhos
03:22

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

Cadastro de vinhos: fluxo completo do formulário ao envio dos dados ao Servidor
13:26

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

Two-way databinding: uma abordagem mais detalhada
03:33

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

Validação dos campos do formulário de cadastro de vinhos
03:29

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

Validação de campos com ngModel: uma abordagem mais detalhada
04:21
+
Componente para detalhamento de todos os atributos do Vinho
4 Lectures 19:58

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.

Criação de componente e template para exibir os detalhes de um vinho
03:45

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

Detalhamento de vinho: da busca no Servidor até à exibição para o usuário
09:01

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

Implementação do botão para voltar para a tela de listagem de vinhos
01:11

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

Seleção de vinho na tela de listagem e redirecionamento para a tela de detalhes
06:01
+
Edição de vinhos
3 Lectures 15:26

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

Carregamento de vinho cadastrado para edição e criação de rota
06:46

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

Seleção de vinho na tela de listagem e redirecionamento para tela de edição
02:03

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.

Edição de vinhos: envio de dados atualizados para o Backend
06:37
7 More Sections
About the Instructor
Rodrigo Peleias
4.0 Average rating
15 Reviews
78 Students
1 Course
Desenvolvedor de Software

Eu sou Rodrigo Peleias, Desenvolvedor de Software (com foco em Java, mas também gosto muito de Javascript e Groovy, e não deixo de brincar com outras linguagens também) e adoro aprender e compartilhar conhecimentos sobre Desenvolvimento de Software e outros assuntos relacionados a TI.

Sou bacharel em Ciência da Computação, pós graduado em Engenharia de Software, Desenvolvedor com 7 anos de experiência em sistemas Web. Já escrevi artigos para revistas como Java Magazine e Easy Java Magazine. Também já atuei como palestrante em eventos na comunidade.

Em 2009 tive uma grata experiência como Embaixador de Campus pela Sun Microsystems na divulgação e evangelização de tecnologias open-source através de cursos, palestras e organização de eventos. Essa experiência, somada a outras experiências profissionais ao longo da minha carreira, me capacitaram para buscar novos aprendizados e compartilhá-los com a comunidade :)

Possuo as certificações SCJA (Sun Certified Java Associate), SCJP 6,(Sun Certified Java Developer), SCBCD (Sun Certified Business Component Developer), SCWCD (Sun Certified Web Component Developer) e LPIC 1

Acredito fortemente que a boa educação e o compartilhamento de informações valiosas são as chaves principais para grandes mudanças nas nossas vidas profissional e pessoal!