Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/edijunior88/angular2_na_pratica
Esta obra tem como objetivo apresentar o framework Angular, em sua nova versão, na qual foi totalmente reescrita.
https://github.com/edijunior88/angular2_na_pratica
angular-cli angular-material angular2 angular4 angular5 angular6 angular7 angular8 css3 html5 livro livros-desenvolvedor nodejs typescript
Last synced: about 17 hours ago
JSON representation
Esta obra tem como objetivo apresentar o framework Angular, em sua nova versão, na qual foi totalmente reescrita.
- Host: GitHub
- URL: https://github.com/edijunior88/angular2_na_pratica
- Owner: EdiJunior88
- License: mit
- Created: 2022-05-31T12:34:50.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T17:05:52.000Z (5 months ago)
- Last Synced: 2024-09-24T12:33:36.562Z (about 19 hours ago)
- Topics: angular-cli, angular-material, angular2, angular4, angular5, angular6, angular7, angular8, css3, html5, livro, livros-desenvolvedor, nodejs, typescript
- Language: HTML
- Homepage:
- Size: 427 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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
- 
[TypeScript](http://www.typescriptlang.org) – Languages
Para ver todas as tecnologias [clique aqui](/techstack.md)
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