Professional Documents
Culture Documents
Tpicos
1. Introduo
a. Velocidade & Performance
b. Tooling Incrvel
c. Angular CLI
d. Porque utilizar o angular?
2. Fundamentos do Angular
a. Viso Geral
b. Arquitetura
c. Diretivas
d. Servios
e. Injeo de dependncias
3. Comeando a desenvolver
a. Introduo ao Node.js
b. Instalando o NPM
c. Instalando Node da maneira tradicional
d. Dicas para usurios Windows
e. Instalando Node pelo NVM
f. Instalando o Angular CLI
6. Mos obra
a. Passo 1 - Iniciando um novo projeto em angular
i. Analisando a estrutura criada
1. node_modules
stewan.io 1
Guia Definitivo do Angular
2. src
3. src/app
4. src/assets
5. src/environments
6. src/index.html
7. src/main.ts
8. src/styles.sass
9. src/typing.d.ts
10..angular-cli.json
11. package.json
9. Crditos
10. Agradecimentos
stewan.io 2
Guia Definitivo do Angular
Introduo
stewan.io 3
Guia Definitivo do Angular
Tooling Incrvel
Angular CLI
stewan.io 4
Guia Definitivo do Angular
Fundamentos do Angular
Aplicaes Angular so feitas a partir de um conjunto de web components. Um web
componente a combinao de estilo CSS + template HTML + classe javascript que ir
dizer ao angular como controlar uma parte da aplicao.
stewan.io 5
Guia Definitivo do Angular
Viso Geral
@Component({
selector: 'my-app',
})
name = 'Angular';
O resultado do exemplo acima ser um simples: "Hello Angular", dentro de uma tag
padro <h1> do html.
para
stewan.io 6
Guia Definitivo do Angular
Nota:
Este exemplo foi escrito usando a linguagem TypeScript, que um super conjunto
(superset) do JavaScript. Angular usa TS para tornar mais fcil e dar maior
produtividade a vida do desenvolvedor por meio de ferramentas para desenvolvimento.
Apesar de no ser recomendado, voc tambm pode escrever cdigo Angular usando
JavaScript puro, este guia explica como.
@Component({
selector: 'my-app',
})
Selector: ir informar ao angular qual nome dever utilizar na tag HTML. Neste caso o
resultado final seria <my-app>
Template: o HTML em si do componente. Neste caso uma tag <h1> com uma varivel
de template {{name}}
stewan.io 7
Guia Definitivo do Angular
name = 'Angular';
legal voc conferir esta parte da documentao (em ingls), que ensina outro jeito de
aprender angular. Neste ebook, vou ser o mais objetivo possvel para voc comear a
desenvolver, sem ter que ver conceitos mais complexos por agora.
stewan.io 8
Guia Definitivo do Angular
Arquitetura
stewan.io 9
Guia Definitivo do Angular
@Component({
selector: 'my-app',
})
name = 'Angular';
stewan.io 10
Guia Definitivo do Angular
Diretivas
stewan.io 11
Guia Definitivo do Angular
Consulte mais sobre outras diretivas na sesso Built-in Directives deste Cheat Sheet
da documentao do Angular.
Servios
@Injectable()
Singleton um padro de projeto de software (do ingls Design Pattern). Este padro
garante a existncia de apenas uma instncia de uma classe, mantendo um ponto global
de acesso ao seu objeto.
Basicamente elas servem para guardar a lgica do negcio. Para fazer uma simples
aluso, imagine duas xcaras de caf, estas xcaras so dois componentes angular, as
duas precisam ter caf, o que seria melhor, escrever o cdigo de fazer caf repetidamente
nas 2 xcaras ou escrever de uma nica vez um terceiro elemento chamado bule
(provider)?
Com este bule poderamos com um nico cdigo servir as duas xcaras.
stewan.io 12
Guia Definitivo do Angular
Para criar um servio no novo angular, basta criar uma Classe e decor-la com decorador
@Injectable(), o angular possui vrios decoradores, voc pode conferir a lista completa
deles no Cheat Sheet do angular. Vamos ver isto melhor na prtica mais a frente.
Injeo de dependncias
// typescript
import { Component } f
rom '@angular/core';
import { BuleService } from '../../providers/bule.service';
@Component({
selector: 'app-xicara',
templateUrl: './xicara.component.html'
})
export class XicaraComponent {
// declara uma propriedade de escopo global na classe
// usaremos ela mais a frente pra fazer a ligao dos dados com a view
cafe:any;
stewan.io 13
Guia Definitivo do Angular
Injetar dependncia significa que voc pode reutilizar cdigo por toda sua aplicao. Na
primeira e segunda linha estamos importando duas dependncias, a classe Component
do core do angular para ser utilizada mais abaixo como decorador em @Component
e a classe BuleService que contm toda a lgica relacionada a fazer caf para
injetar na classe XicaraComponent.
Comeando a desenvolver
Para comear a brincar de verdade com angular necessrio, primeiramente, preparar o
ambiente.
Introduo ao Node.js
Em linhas gerais o node.js uma plataforma escrita em javascript feita para rodar cdigo
javascript. Em uma simples analogia, o Node.js seria a soma do PHP+Apache.
importante frisar que o Node.js roda cdigo javascript apenas no lado do servidor.
Utilizaremos o node aqui no para criar API's ou renderizar HTML no lado do servidor.
Iremos utilizar o node como ferramenta principal para desenvolvimento. Por meio dele
vamos instalar a linha de comando do angular e executar nossa aplicao localmente.
stewan.io 14
Guia Definitivo do Angular
Instalando o NPM
Neste caso basta baixar o binrio do site nodejs.org, executar e seguir os passos. Para
testar se tudo est ok, digite npm no seu terminal de comando.
Se estiver utilizando o windows, recomendo fortemente que baixe e instale o Git for
windows e utilize a linha de comando pelo git em tudo que for executar pelo terminal.
Procure no menu iniciar por Git bash. Dependendo da verso do windows (8), talvez
seja necessrio executar como administrador.
stewan.io 15
Guia Definitivo do Angular
No caso do NVM, voc poder ter mltiplas verses instaladas do Node ao mesmo tempo
em seu sistema operacional. Este inclusive o jeito que eu trabalho. Existem duas
verses:
https://github.com/creationix/nvm#install-script
https://github.com/coreybutler/nvm-windows/releases
Talvez seja necessrio reiniciar o Windows para linha de comando do NVM funcionar
Esse comando ir instalar a ltima verso do node pelo NVM. Caso queira instalar uma
verso especfica, execute
stewan.io 16
Guia Definitivo do Angular
nvm ls
para verificar se est tudo OK, execute node --version no terminal de comando. Caso
no esteja funcionando, rode o comando nvm use x.x.x
stewan.io 17
Guia Definitivo do Angular
ng new
exemplo:
ng new --help
ng new myApp
ng serve
serve a aplicao criada anteriormente para ser executada em tempo real no browser.
Isto significa que tudo que voc alterar no cdigo compilado e exibido no navegador
automaticamente sem a necessidade de reload manual, ou f5. O endereo padro o
localhost:4200
stewan.io 18
Guia Definitivo do Angular
ng generate
class
component
directive
enum
guard
interface
module
pipe
service
exemplo:
Este prefixo 'app' adicionado automaticamente pelo angular-cli para que o novo
elemento no entre em conflito com tags nativas do html, por exemplo o prprio
<header>. Este prefixo pode ser facilmente alterado diretamente no arquivo de
configurao da CLI (.angular-cli.json), gerado ao criar um novo projeto.
stewan.io 19
Guia Definitivo do Angular
ng build
stewan.io 20
Guia Definitivo do Angular
Pgina Home
Este seria o rabisco da nossa pgina home, que no deixa de ser tambm um
componente
stewan.io 21
Guia Definitivo do Angular
Pgina Post
stewan.io 22
Guia Definitivo do Angular
Pgina 404
stewan.io 23
Guia Definitivo do Angular
Mos obra
A partir de agora vamos ver detalhadamente passo a passo para desenvolver nossa app.
Inicia o projeto especificando o esquema de estilo que vamos utilizar, no caso o SASS.
Vamos utilizar esta tecnologia para poder trabalhar com o bulma, que um framework
css escrito em cima do SASS.
stewan.io 24
Guia Definitivo do Angular
src/app - Arquivos fontes contendo lgica, template, estilos e testes unitrios. Tudo que voc
gerar pelo comando da CLI generate, ir para src/app
Nota: No crie folhas de estilos CSS nesta pasta, cada estilo deve compor um
componente. Caso precise criar um estilo que atenda sua app de maneira global, utilize o
arquivo src/styles.sass
stewan.io 25
Guia Definitivo do Angular
src/index.html - Como estamos trabalhando uma aplicao de pgina nica ou SPA (Single
Page App) este o template principal da aplicao. Dificilmente mexemos neste arquivo.
Nota: para trabalhar com vrias rotas ou URLs, voc deve configurar seu servidor para
que todas requisies batam no arquivo index.html
src/styles.sass - arquivo global de estilos, utilizando o compilador SASS. Tudo que escrito
aqui ficar disponvel para todos os componentes da aplicao
package.json - arquivo global de dependncias do node. Tudo que estiver aqui baixado para
a pasta node_modules ao se executar o comando npm install
stewan.io 26
Guia Definitivo do Angular
Para adicionar o Font Awesome copie e cole a tag <link> abaixo logo antes de fechar a
tag <head> em src/index.html
$primary: #ff3860
@import '~bulma'
stewan.io 27
Guia Definitivo do Angular
stewan.io 28
Guia Definitivo do Angular
Como iremos trabalhar com rotas, primeiro devemos criar as pginas que iro ser
chamadas ou utilizadas por estas rotas.
Sero 3 rotas
ng g c pages/home-page
ng g c pages/post-page
ng g c pages/error-404-page
Nota: O nome das pages podem variar de acordo com a sua necessidade como por ex:
ng g c pages/about-page
Sero criados um componente para cada pgina, no caminho src/pages. Voc pode
utilizar o caminho e dar o nome que quiser para criar seus componentes, porm por uma
questo de conveno, estamos criando aqui no caminho pages. A grande questo aqui
stewan.io 29
Guia Definitivo do Angular
que estas pginas componentes so as que sero chamadas pelo componente de rota do
angular, que vamos definir agora em rotas.
stewan.io 30
Guia Definitivo do Angular
Passo 5.3 - declarar uma constante com a configurao das rotas, definindo o
caminho e o componente que ser utilizado para este caminho
stewan.io 31
Guia Definitivo do Angular
// route module
import { RoutingModule } from './app.router';
import { AppComponent } from './app.component';
import { HomePageComponent } from './pages/home-page/home-page.component';
import { PostPageComponent } from './pages/post-page/post-page.component';
import { Error404PagesComponent } from
'./pages/error-404-pages/error-404-pages.component';
@NgModule({
declarations: [
AppComponent,
HomePageComponent,
PostPageComponent,
Error404PagesComponent
],
imports: [
RoutingModule,
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
stewan.io 32
Guia Definitivo do Angular
<router-outlet></router-outlet>
stewan.io 33
Guia Definitivo do Angular
ng serve
dever exibir
home-pageworks!
stewan.io 34
Guia Definitivo do Angular
Neste provider vamos utilizar uma biblioteca de terceiros chamada lodash _ para ilustrar
a importao de bibliotecas externas no angular e reaproveitar alguns mtodos desta
incrvel lib.
ng g s providers/blog
g = generate
s = service
providers = pasta a ser criada pelo angular-cli
blog = servio a ser criado pelo angular-cli
// route module
import { RoutingModule } from './app.router';
// services
import { BlogService } from './providers/blog.service';
stewan.io 35
Guia Definitivo do Angular
@NgModule({
...
providers: [BlogService],
bootstrap: [AppComponent]
})
stewan.io 36
Guia Definitivo do Angular
stewan.io 37
Guia Definitivo do Angular
Para verificar se tudo est ok no momento, basta no haver nenhum erro no navegador
(chrome f12 console) ao executar ng serve
stewan.io 38
Guia Definitivo do Angular
ng g c components/header
stewan.io 39
Guia Definitivo do Angular
<app-header></app-header>
stewan.io 40
Guia Definitivo do Angular
ng g c components/post-card
depois declare uma propriedade decorada na classe, chamada "post" do tipo "any"
stewan.io 41
Guia Definitivo do Angular
Agora abra o template do componente, apague todo o contedo e cole o html abaixo
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<a [routerLink]="post.router">
<img src="http://bulma.io/images/placeholders/1280x960.png"
alt="Image" />
</a>
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<h2 class="title is-4"><a [routerLink]="post.router">{{ post.title
}}</a></h2>
</div>
</div>
<div class="content">
<div [innerHTML]="post.body">
<!-- aqui vira o conteudo de post.body -->
</div>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
</div>
stewan.io 42
Guia Definitivo do Angular
1) <a [routerLink]="post.router">
O [routerLink] uma diretiva nativa do angular router usada para navegar entre rotas.
Neste caso, o post.router est sendo gerado l no mapeamento dentro do provider
blog.service. No final este <a> se parecer com algo do tipo <a href="/lorem-ipsum/1">
2) {{ post.title }}
Aqui o angular est dando sada no dado que foi ligado a partir da varivel post, que
acabamos de definir mais acima com @Input. Isso permitir com que nosso
componente receba dado de cima, a partir do atributo post
exemplo:
// ts
const objetoDoPost =
{
title: 'Lorem ipsum'
}
// html
<app-post-card [post]="objetoDoPost"></app>
stewan.io 43
Guia Definitivo do Angular
3) <div [innerHTML]="post.body"></div>
[innerHTML] uma diretiva nativa do angular para que possamos inserir cdigo html
dentro de um elemento html. Neste caso o <div> vai receber exatamente o que existir em
post.body que pode ser um cdigo html.
stewan.io 44
Guia Definitivo do Angular
Agora a coisa fica mais legal. Vamos criar o componente pai posts que ir utilizar em
seu template o componente post-card, j consumindo os dados a partir do provider
blog.service
Doidera?
vamos l
ng g c components/posts
Trabalhando a lgica
Importe o BlogService
stewan.io 45
Guia Definitivo do Angular
Declare uma propriedade para guardar a lista de posts que vamos obter pelo provider
stewan.io 46
Guia Definitivo do Angular
Agora vamos escrever um cdigo que ir pegar os dados (posts) por meio do hook
ngOnInit(), que o mtodo que o angular executa depois do constructor()
ngOnInit() {
// aqui vamos chamar o mtodo posts do provider/servio blog que criamos
anteriormente
// que quando for resolvido retornar um array (lista) de posts do tipo
any
this.blog.posts().then((posts: any[]) => { // acessamos this.blog pois
instanciamos no constructor desta classe a varivel blog do tipo BlogService
setTimeout(() => { // damos um tempo pra exibir o resultado no template
this.posts = posts; // ligamos o resultado na view (template)
this.loading = false; // paramos o carregamento
}, 1 * 1000) // define o tempo de carregamento pra 1 segundo
})
}
stewan.io 47
Guia Definitivo do Angular
Trabalhando o Template
<section class="posts">
<br /><br />
<div class="container">
<div class="heading">
<h2 class="subtitle">
<span [hidden]="loading != true">Carregando...</span> Latest
<strong>fake</strong> news
</h2>
</div>
</div>
<br /><br />
</section>
stewan.io 48
Guia Definitivo do Angular
1)
<span [hidden]="loading!=true">Carregando...</span>
O [hidden] uma diretiva interna do angular para trabalhar o estado de viso dos
elementos. Neste caso, estamos escondendo o elemento <span> sempre que a
propriedade loading da classe for diferente de true, ou seja, false. Em outras linhas, se
loading for true, mostra o <span> com o texto "Carregando..."
2)
*ngFor="let post of posts; let i = index"
3)
[ngClass]="{'is-half':i==0||i%11==0, 'is-one-quarter':i>0&&i%11!=0}"
stewan.io 49
Guia Definitivo do Angular
4)
[post]="post"
Esta uma diretiva que criamos quando definimos o @Input na classe do componente
post-card. Aqui estamos passando o objeto "post" criado dinamicamente pela diretiva
*ngFor vista anteriormente
<app-header></app-header>
<app-posts></app-posts>
stewan.io 50
Guia Definitivo do Angular
Execute o comando
ng g c components/footer
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<p>
<strong>Angular Bulma Blog</strong>
<br />
por <a href="https://stewan.io">Stewan Pacheco</a> <a class="icon"
href="https://github.com/stewwan">
<i class="fa fa-github"></i>
</a>
</p>
<p>
<strong>Curtiu o projeto?</strong><br /><a
href="https://stewan.io/ebooks/guia-definitivo-do-angular">Baixe meu ebook de
angular</a> e veja passo a passo + cdigo fonte
</p>
</div>
</div>
</footer>
stewan.io 51
Guia Definitivo do Angular
Adicione o html
<app-header></app-header>
<app-posts></app-posts>
<app-footer></app-footer>
.footer
padding-top: 50px
border-top: 1px solid #eee
background-color: #fff
a.icon
margin-top: 5px
display: inline-block
line-height: 20px
stewan.io 52
Guia Definitivo do Angular
Devido as configuraes de rota que fizemos no Passo 5.3, uma url como esta
http://localhost:4200/dolorem-dolore-est-ipsam/54
ng g c components/post
stewan.io 53
Guia Definitivo do Angular
Trabalhando a lgica
// declarando uma varivel objeto do tipo any que ir armazenar o post assim
que for resolvido pelo provider
post: any = {};
constructor(
// instanciando a rota ativa
public activatedRoute: ActivatedRoute,
// instanciando o roteador
stewan.io 54
Guia Definitivo do Angular
stewan.io 55
Guia Definitivo do Angular
Trabalhando o template
<section class="posts">
<br /><br />
<div class="container">
<div class="heading">
<h2 class="subtitle">
<a [routerLink]="'/'">Blog</a> > {{ post.title }}
</h2>
</div>
<br />
<div class="columns">
<app-post-card class="column" [post]="post"></app-post-card>
</div>
</div> <br /><br />
</section>
<app-header></app-header>
<app-post></app-post>
<app-footer></app-footer>
stewan.io 56
Guia Definitivo do Angular
.heading
margin: 20px
.container
max-width: 980px
stewan.io 57
Guia Definitivo do Angular
Salve e para testar se est ok, abra seu navegador em um endereo qualquer como
http://localhost:4200/asdf
Booom!!!
stewan.io 58
Guia Definitivo do Angular
Quando estamos desenvolvendo com angular, mexemos puramente com arquivos SASS
e Typescript. Entretanto, nenhum navegador entende esses tipos de arquivos, por isso
necessrio gerar uma build final de tudo isso no formato em que o navegador possa
entender.
Rode o comando
ng build --prod
Todo o projeto ser compilado e exportado para a pasta dist minificados em arquivos
puramente javascript e css. Com isto basta que voc hospede o contedo desta pasta
em qualquer servidor esttico.
stewan.io 59
Guia Definitivo do Angular
O Github alm de ser um repositrio mundial de cdigo fonte dos mais variados tipos,
tambm um mega servidor esttico gratuito. Podemos hospedar qualquer arquivo
HTML, CSS, Javascript e imagens, de forma que estejam disponveis na web por meio de
um endereo. Para ilustrar este cenrio, vamos hospedar nosso blog na seguinte url
http://seu_usuario.github.io/nome_repositorio
Se ainda no tem, abra uma conta gratuita no Github. Depois crie um novo repositrio
com qualquer nome.
Agora altere uma configurao no angular-cli para que ao invs de ele gerar a build na
pasta dist, gere em uma pasta especfica, denominada "docs".
Nota: Para usurios windows existe um bug atualmente discutido aqui, onde no
inserido corretamente o base href no arquivo index.html pela opo --bh. Um
workaround voc abrir manualmente o arquivo em docs/index.html e corrigir
deixando exatamente assim:
stewan.io 60
Guia Definitivo do Angular
<base href="/nome_respositorio/">
git init
git add -A
git commit -am "primeiro commit"
git push origin master
stewan.io 61
Guia Definitivo do Angular
Pode acontecer de pedir seu login e senha do Github. Agora precisamos apenas dizer ao
Github Pages para "ouvir" a pasta docs. Abra as configuraes do repositrio (Settings) e
mais abaixo na aba GitHub Pages selecione a opo Master branch /docs folder.
http://seu_usuario.github.io/nome_do_repositorio
stewan.io 62
Guia Definitivo do Angular
Esta a opo que utilizo em todos meus sites angular, incluindo meu blog. Porm
requer conhecimentos e passos extras, caso queira se aventurar, recomendo comear
pelo servio prerender.io que possui plano inicial free.
Uma vez que todos os bots caem no mesmo arquivo, o index.html, podemos ento
trabalhar um SEO bsico da seguinte forma:
stewan.io 63
Guia Definitivo do Angular
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blog</title>
<base href="/">
<meta name="title" content="Angular Bulma Blog">
<meta name="og:title" property="og:title" content="Angular Bulma Blog">
<meta name="description" content="Um blog construdo com angular e bulma">
<meta name="og:description" property="og:description" content="Um blog
construdo com angular e bulma">
<meta name="og:image" property="og:image"
content="https://stewwan.github.io/angular-bulma-blog/assets/guia-angular.png
">
Pronto, agora ao menos os bots vo ter alguma informao da sua pgina. Quando o site
crescer, recomendo fortemente que utilize a tcnica nmero 1.
stewan.io 64
Guia Definitivo do Angular
https://seu_usuario.github.io/seu_repositorio/qui-est-esse/2
No caso est sendo exibida a pgina padro do Github, mas se voc quiser pode exibir
sua prpria pgina 404, basta adicionar um arquivo 404.html na raiz da build que o
angular gerou, /docs (ou /dist).
E fazendo isso que vamos hackear essa treta, bastando copiar o arquivo index.html
para 404.html gerado em /docs, commitar a alterao e enviar novamente pro Github.
https://seu_usuario.github.io/seu_repositorio/qui-est-esse/2
stewan.io 65
Guia Definitivo do Angular
Repositrio no Github
https://github.com/stewwan/angular-bulma-blog/
stewan.io 66
Guia Definitivo do Angular
Crditos
- Angular
- Angular CLI
- Angular CheatSheet
- Bulma
- Lodash
- Font awesome
- Github Pages
- Node
- Node Version Manager Win / Linux
stewan.io 67
Guia Definitivo do Angular
Github: https://github.com/stewwan
Twitter: https://twitter.com/StewanPacheco
Instagram: https://www.instagram.com/stewan.io
Facebook: https://fb.me/Stewan.io
Youtube: https://goo.gl/ZaCr71
Abs,
Stewan.
stewan.io 68