Skip to content

Esta obra tem como objetivo apresentar o framework Angular, em sua nova versão, na qual foi totalmente reescrita.

License

Notifications You must be signed in to change notification settings

EdiJunior88/Angular2_Na_Pratica

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Angular2

Com Node/npm, Typescript, SystemJS e Visual Studio Code

Esta obra tem como objetivo apresentar o framework Angular, em sua nova versão, na qual foi totalmente reescrita. Quase todos os conceitos da versão 1 ficaram obsuletos e novas técnicas estão sendo utilizadas no Angular 2, com o objetivo de prover um framework mais dinâmico e moderno.

Antes de abordarmos o Angular 2 é necessário rever algumas tecnulogias que são vitais para o desenvulvimento de qualquer biblioteca utilizando HTML/Javascript. Primeiro, usaremos extensivamente o Node, que é uma forma de executar Javascript no servidor. O uso do Node será vital para que possamos manipular bibliotecas em nosso projeto, que serão instaladas através do gerenciador de pacotes do Node chamado npm.



Tecnologias Utilizadas

Para ver todas as tecnologias clique aqui


1 - Introdução

  • Pré requisitos
    • Node
    • Servidor web
    • Arquivo package.json
    • Erros ao instalar o Angular 2
    • Arquivo package.json
    • Editores de texto e IDEs
  • Além do Javascript
  • TypeScript
  • Código fonte

2 - TypeScript1

  • Instalando TypeScript
  • Uso do Visual Studio Code
    • Detectando alterações
    • Debug no Visual Studio Code
    • Debug no navegador
  • Tipos
    • Tipos Básicos
    • Arrays
    • Enum
    • Any
    • Void
  • Classes
    • Construtor
    • Visibilidade de métodos e propriedades
  • Herança
  • Accessors (get/set)
  • Métodos Estáticos
  • Interfaces
  • Funções
    • Valor padrão
    • Valor opcional
  • Parâmetros Rest
  • Parâmetros no formato JSON
  • Módulos
    • Exemplo com Systemjs
    • Omitindo arquivos js e map no VSCode
    • Uso do SystemJS
  • Decorators (ou annotation)
  • Conclusão

3 - Um pouco de prática

  • Projeto AngularBase
    • Configurando o projeto
    • Erros ao instalar o Angular 2
    • Configurando a compilação do TypeScript
    • Criando o primeiro componente Angular 2
    • Criando o bootstrap
    • Criando o arquivo html
  • Criando uma pequena playlist
    • Estrutura inicial dos arquivos
    • Criando um arquivo de configuração da aplicação
    • Adicionando bootstrap
    • Criando a classe Video
    • Criando uma lista simples de vídeos
    • Criando sub-componentes
    • Formatando o template
    • Repassando valores entre componentes
    • Selecionando um vídeo
    • Eventos
    • Propagando eventos
    • Exibindo os detalhes do vídeo
    • Editando os dados do video selecionado
    • Editando o título
    • Criando um novo item
    • Algumas considerações
  • Criando Componentes
  • Componentes Hierárquicos

4 - Um pouco de teoria

  • Visão Geral
  • Módulo (module)
    • Library Module
  • Componente (component)
  • Template
    • Interpulation (Uso de {{ }})
    • Template Expressions
  • Property Bind
    • Laços
    • Pipes (Operador |)
  • Metadata (annotation)
  • Serviço (Service)
  • Injeção de dependência
    • Uso do @Injectable()

5 - Formulários 8

  • Criando o projeto inicial
  • Uso do ngContrul
  • Exibindo uma mensagem de erro
  • Desabilitando o botão de submit do formulário
  • Submit do formulário
  • Contrulando a visibilidade do formulário

6 - Conexão com o servidor

  • Criando o projeto
  • Uso da classe Http
  • Utilizando services
  • Organização do projeto
  • Model user
  • Service user
  • Alterando o componente AppComponent
  • Enviando dados

7 - Routes

  • Aplicação AngularRoutes
  • Dividindo a aplicação em partes
  • Criando a área onde os componentes serão carregados
  • Configurando o router
  • Criando links para as rotas
  • Repassando parâmetros

8 - Exemplo Final - Servidor

  • Criando o servidor RESTful
  • O banco de dados MongoDB
  • Criando o projeto
  • Estrutura do projeto
  • Configurando os modelos do MondoDB
  • Configurando o servidor Express
  • Testando o servidor
  • Testando a api sem o Angular

9 - Exemplo Final - Cliente

  • Arquivos iniciais
  • Preparando o Template base da aplicação
  • Implementando o roteamento (Router)
    • Criando componentes
    • Configurando o @RouteConfig
    • Configurando o menu
    • Configurando o router-outlet
  • Exibindo Posts
  • Login
  • Services
    • LoginService
    • UserService
    • HeadersService
  • Conectando no servidor
  • Posts
    • PostService
  • Refatorando a tela inicial
  • Conclusão

10 - Utilizando Sublime Text

  • Instalação
  • Adicionando suporte a linguagem TypeScript
  • Automatizando a build TypeScript

11 - Publicando a aplicação em um servidor cloud

  • Criando a conta na Digital Ocean
  • Criando o droplet (servidor)
  • Configurando o acesso SSH
  • Criando o usuário
  • Instalando o git
  • Instalando Node
  • Instalando o nginx
  • Instalando os módulos do node
  • Recompilando os arquivos TypeScript
  • Teste inicial
  • Integração entre nginx e node
  • Algumas considerações sobre node+nginx
  • Domínio
  • Conclusão

Aulas: 📚 11 capítulos

Status do Curso: 💬 Estudando