├── Conteudos
├── angular-cli.md
├── components.md
├── configurar-ambiente.md
├── estrutura-arquivos.md
├── estrutura-de-projeto.md
├── modules.md
└── services.md
├── Projeto
└── estruturando-projeto.md
├── README.md
└── assets
└── a4n-logo.svg
/Conteudos/angular-cli.md:
--------------------------------------------------------------------------------
1 |
2 | ## Angular CLI
3 | Primeiramente depois de tudo configurado, vamos precisar entender como funciona o Angular CLI
4 | Para Instalar utilizaremos o NPM que é um gerenciador de Pacotes do NodeJS, digitando o seguinte código
5 |
6 | ```console
7 | npm install -g @angular/cli
8 | ```
9 |
10 | Angular CLI e uma poderosa ferramenta de gerenciador de linhas de Comandos onde voce pode gerenciar toda a aplicacão atraves das linhas de comando do prompt de comando do seu sistema operacional
11 | **Certo, mas em que ele me ajuda?**
12 | > Ele nos ajuda a criar o proprio projeto, módulos, servicos, componentes, diretivas, entre outras coisas de forma facil, rápida e padronizada.
13 |
14 | **Mas Como ele Funciona?**
15 | > É facil, basta usar a nomeclatura que ele te proporciona que e o comando: ng e seus comandos
16 |
17 | vou te dar uma lista dos comandos e em seguida te ensinar como usar cada um
18 |
19 |
20 | | Comando | O que ele faz |
21 | | ------------- |:-------------:|
22 | | ng new | Cria o Projeto instalando todas as dependencias e criando os arquivos |
23 | | ng generate| cria ou atualiza componentes, modulos, servicos e diretivas (component, module, service, directive ) |
24 | | ng build | gera o build de produção para sua aplicação |
25 | | ng serve | Gera e serve a aplicação em localhost |
26 | | ng test | roda os testes unitários da aplicação |
27 | | ng update | atualiza a aplicação e suas dependencias |
28 | | ng version | mostra a versão do Angular CLI |
29 |
30 |
31 | ### Alias
32 | Você pode rodas os comandos por alias para os que possuem alias.
33 | **Exemplo**
34 | ```console
35 | ng generate component my-component
36 | ````
37 | ```console
38 | ng g c my-component
39 | ````
40 |
41 | Para ver mais detalhes de cada comando você pode rodar o comando ```--help```
42 |
43 |
44 |
--------------------------------------------------------------------------------
/Conteudos/components.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WilHolt/angular4noobs/d565dc2970ce5164601c67bf5814c18e44392f14/Conteudos/components.md
--------------------------------------------------------------------------------
/Conteudos/configurar-ambiente.md:
--------------------------------------------------------------------------------
1 | **Ferramentas necessárias**
2 | 1. Node JS
3 | * [Acesse o site Oficial](https://nodejs.org/en/)
4 | 2. NPM (ou qualquer outro gerenciador de pacotes de sua preferencia como por exemplo o Yarn)
5 | 2. Angular CLI
6 | ```console
7 | npm install -g @angular/cli
8 | ```
9 | 3. Qualquer Editor de sua preferencia ( no caso vou usar o VSCode )
10 | * [Acesse o site Oficial do VSCode](https://code.visualstudio.com)
11 |
--------------------------------------------------------------------------------
/Conteudos/estrutura-arquivos.md:
--------------------------------------------------------------------------------
1 |
2 | ## Explicando a Estrutura dos Arquivos.
3 |
4 | ### **Componentes**
5 | ### **Modulos**
6 | ### **Serviços**
7 | ### **Diretivas**
8 |
--------------------------------------------------------------------------------
/Conteudos/estrutura-de-projeto.md:
--------------------------------------------------------------------------------
1 |
2 | ## Explicando a estrutura de Projeto.
3 |
4 | ##### Componentes
5 | ##### Modulos
6 | ##### Services
7 | ##### Diretivas
8 |
--------------------------------------------------------------------------------
/Conteudos/modules.md:
--------------------------------------------------------------------------------
1 | # Módulos
2 |
3 | ## Introdução
4 |
5 | O Angular tem um próprio sistema de modularização chamado NgModules.
6 |
7 | **NgModules** são uma espécie de container que agregam vários recursos como componentes, serviços e outros tipos de ferramentas em um escopo só, para evitar repetição e aumentando a coesão do código e também a performance.
8 | **(bem como Pacotes do Java ou Namespaces do php)**
9 |
10 | Eles também podem se relacionar trocando por meio de exportação as funcionalidades que estão no seu escopo.
11 |
12 | Tenha em vista que a quantidade de módulos vai depender do tamanho da sua aplicação, da complexidade, e da sua forma de estruturar.
13 |
14 | Por exemplo: aplicações de pequeno porte podem ter apenas um módulo, já aplicações maiores podem ter modulos separados por features.
15 |
16 | Modelo Básico de um Módulo.
17 |
18 | ```console
19 | import { NgModule } from '@angular/core';
20 |
21 | @NgModule({
22 | imports: [ ... ],
23 | declarations: [ ... ],
24 | bootstrap: [ ... ]
25 | })
26 | export class AppModule { }
27 | ```
28 |
29 |
30 |
31 | ## Módulos a fundo
32 |
33 | A estrutura de um módulo se divide em
34 |
35 |
36 | ### **Decorator NgModule**
37 | O módulo é feito a partir de um decorator chamado NgModule
38 | dentro dele você define o que o modulo deve ter
39 |
40 | ### **Declarations**
41 | Todos os Componentes do referido modulo devem estar declarados no campo **Declarations**, para que o modulo possa entender que aqueles componentes são somente daquele módulo.
42 |
43 | ### **Imports**
44 | Nesta propriedade é utilizada para importar outros módulos para serem utilizados nele, definimos um array onde você declara quais modulos você quer importar.
45 |
46 | Você só consegue utilizar algo de outro modulo se você estiver importando ele.
47 |
48 | ### **Exports**
49 | Nesta propriedade é utilizada para importar outros módulos para serem utilizados nele, definimos um array onde você declara quais modulos você quer importar.
50 | ### **Providers**
51 | É onde você declara quais serviços você quer injetar dentro desse módulo, ou seja, uma propriedade para injeção de dependencias.
52 | Possibilitando treeshaking de dependencias ( Termo usado para falar sobre eliminação de codigo inutilizado ou repeticão desnecessária de código)
53 |
--------------------------------------------------------------------------------
/Conteudos/services.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WilHolt/angular4noobs/d565dc2970ce5164601c67bf5814c18e44392f14/Conteudos/services.md
--------------------------------------------------------------------------------
/Projeto/estruturando-projeto.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WilHolt/angular4noobs/d565dc2970ce5164601c67bf5814c18e44392f14/Projeto/estruturando-projeto.md
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | ### Angular4Noobs desenvolvido para contribuir com a comunidade
10 | **Iniciativa em parceria com a He4rts Developers**
11 |
12 | [](https://opensource.org/licenses/MIT)
13 |
14 |
15 |
16 | ## Introdução
17 | Bem Vindo ao Angular4Noobs, nosso objetivo aqui é te ensinar um pouco do angular de forma simples, fácil, rápida e descontraída para que você consiga aprender e criar seus próprios projetos e seguir o aprendizado neste framework e no mundo do desenvolvimento web.
18 |
19 | ##### Vamos Assumir que voce ja entende um pouco sobre HTML, CSS e Javascript e Typescript
20 | Todos os exemplos serão escritos com Typescript, porém voce pode escrever utilizando javascript (porém é altamente recomendado você utilizar Typescript).
21 |
22 | Caso voce já entenda de angular e queira a nos dar alguma opinião, ajuda ou algo do tipo, fique à vontade para sugerir nas issues ou fazer pull requests (no final desse texto eu explico como).
23 |
24 | ## O que é Angular
25 | Angular é um Component-Based Javascript Framework para desenvolvimento de Single Page Applications e PWA Escaláveis utilizando Typepscript e Javascript.
26 |
27 | **mas Wil, o que é um framework?**
28 | > eu te digo meu jovem padawan, um framework é basicamente uma estrutura que vai te da coisas pra facilitar tua vida na hora de desenvolver alguma aplicação.
29 | >
30 | >No caso do angular, ele te da todo um ecossistema para desenvolvimento que se voce seguir você consegue desenvolver projetos dos simples aos complexos de forma rápida,padronizada, perfomática. e escalável.
31 |
32 | **Mas enfim, o que ele me oferece de bom wil?**
33 | > então... o angular te oferece
34 | > 1- desenvolvimento crossplataform
35 | >
36 | > velocidade e performace
37 | >
38 | >Libs bem integradas paras as mais variadas necessidades como por exemplo para Requisições HTPP (calma, vamos chegar lá)
39 | >
40 | > Ferramentas integradas para te ajudar no desenvolvimento tanto no build da sua aplicacão como também para testes e atualizaçao de codigo.
41 | >
42 | > uma gama de ferramentas e conceitos pra utilizar, e de quebra uma comunidade enorme e participativa.
43 |
44 |
45 | ## O que vamos aprender
46 | Neste Angular4Noobs vamos fazer entender os conceitos teoricamente e depois aplicar no projeto que será uma calculadora de valor para freelancer, faremos isso para fixar os conceitos e aprender bem na prática como é usar o angular.
47 |
48 | 1. [ Angular CLI](https://github.com/WilHolt/angular4noobs/blob/master/Conteudos/angular-cli.md)
49 | 2. [ Módulos](https://github.com/WilHolt/angular4noobs/blob/master/Conteudos/modules.md)
50 | 3. [ Componentes](https://github.com/WilHolt/angular4noobs/blob/master/Conteudos/components.md)
51 | 4. [ Passagem Dados](https://github.com/WilHolt/angular4noobs/blob/master/Conteudos/inputs-outputs.md)
52 | 5. [ Ciclos de Vida ](https://github.com/WilHolt/angular4noobs/blob/master/Conteudos/lifecycle.md)
53 | 6. [ Rotas](https://github.com/WilHolt/angular4noobs/blob/master/Conteudos/routes.md)
54 | 7. [ Serviços](https://github.com/WilHolt/angular4noobs/blob/master/Conteudos/services.md)
55 | 8. [ Estrutura de Projetos](https://github.com)
56 | 9. [ Formularios](https://github.com)
57 | 10. [ Diretivas](https://github.com)
58 | 11. [ Requisições HTTP ](https://github.com)
59 |
60 | # Sobre o Projeto
61 | Bom, nos vamos criar um joguinho de pokemon em cards aplicar o que vai ser ensinado aqui, vamos la?
62 |
63 | Você pode ver o resultado aqui: Preview
64 |
65 | ## Configurar Ambiente
66 | Bom, para começar, você vai primeiramente necessitar dos seguintes arquivos:
67 |
68 |
69 | 2. [ Criando estrutura do Projeto](https://github.com)
70 | 7. [ Configurando Rotas ](https://github.com)
71 | 8. [ Implementando Formulários ](https://github.com)
72 | 8. [ Implementando a Lógica de Negócio](https://github.com)
73 |
74 |
75 |
76 |
77 |
78 | # Quero Contribuir
79 |
80 | Deseja contribuir com a comunidade open source e com esse projeto maravilhoso para ajudar mais e mais pessoas? nós apreciamos muito sua atitude!
81 | segue os passos abaixo e seja feliz (:
82 |
83 | 1. Realize um Fork do projeto
84 | 2. Crie um branch com a nova feature (git checkout -b feature/featureNova)
85 | 4. Realize o Commit (git commit -m 'add lazyload content') (explicitando bem o que esse commit irá fazer ( de preferencia em ingles))
86 | 5. Realize o Push no Branch (git push origin feature/featureNova)
87 | 6. Abra um Pull Request
88 | 7. Aguarde a Review e Voilá
89 |
90 | ou crie uma issue.
91 |
92 | ## Autores
93 |
94 | **Jose Wilder - Front-end Developer and He4rt Developer Member [Linkedin](http://linkedin.com/in/jose-wilder)**
95 |
--------------------------------------------------------------------------------
/assets/a4n-logo.svg:
--------------------------------------------------------------------------------
1 |
86 |
--------------------------------------------------------------------------------
3 |
4 |