e Book Guia Definitivo Do Angular

Guia Definitivo do Angular

Tópicos Tópicos 1. Introdução a. Velocidade & Performance Performance b. Tooling Incrível c. Angular CLI d. Porque utilizar o angular? 2. Fundamentos do Angular Angular a. Visão Geral b. Arquitet Arquitetura ura c. Diretivas d. Serviços e. Injeção de dependências dependências 3. Começando a desenvolver a. Intr Introdução odução ao Node.js b. Instaland Instalandoo o NPM c. Instalando Node da maneira tradicional d. Dica Dicass para usuários Windows e. Instala Instalando ndo Node pelo NVM f. Instalando o Angular CLI 4. Comandos do Angular CLI a. ng new b. ng serve c. ng generate d. ng build 5. Projetando nossa aplicação 6. Mãos à obra a. Passo 1 - Iniciando um novo projeto em angular i. Analisando a estrutura estrutura criada 1. node_modules

stewan.io stewan .io

1


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 10. .angular-cli.json 11. package.json b. c. d. e. f. g.

Passo 2 - Adicionando a biblioteca Bulma e Font Awesome Passo 3 - Configurando o bulma pra trabalhar no angular Passo 4 - Criando as páginas que irão servir a rota Passo 5 - Configurando as rotas Passo 6 - Servindo para ver se tudo vai bem Passo 7 - Criando o provider `blog` que servirá nossos componentes h. Passo 8 - Criando componente header e chamando na home page i. Passo 9 - Criando o componente `post-card` j. Passo 10 - Criando o componente `posts` e utilizando o provider `blog` k. Passo 11 - Criando o componente `footer` e adicionando a home page l. Passo 12 - Criando o componente `post` para página interna m. Passo 13 - Customizando a página de erro 404 7. Build para produção a. Hospedando no Github Pages b. Trabalhando SEO no Angular c. Treta do 404 no Github Pages 8. Download do código fonte 9. Créditos 10. Agradecimentos 10. Agradecimentos

stewan.io stewan .io

2


Introdução A nova versão do angular nasce para ser apenas um Framework, mobile ou desktop. Você desenvolve apenas de uma maneira, reutilizando código para qualquer destino de implementação. Seja ela web, web móvel, móvel nativa e área de trabalho nativa.

Velocidade & Performance O novo angular consegue alcançar a velocidade máxima possível na plataforma Web atualmente, e levá-la mais longe, via Web Workers e renderização no lado do servidor.

stewan.io

3


Tooling Incrível

Construa sua aplicação rapidamente de forma simples e declarativa, utilizando uma IDE específica para desenvolvimento Angular e tecnologias web. O Visual Studio Code vem com IntelliSense, Depuração de código, integração com Git e gerenciador de extensões.

Angular CLI

A interface de linha de comando do angular vai desde executar um mini servidor para rodar no browser, a gerar builds finais para produção. Além de ajudar a prototipar rapidamente novas aplicações, criar componentes, serviços e todo tipo de recurso que o angular pode proporcionar.

stewan.io

4


Porque utilizar o Angular?

Simplesmente por ser amado por milhões de desenvolvedores ao redor do planeta.

O Angular está presente desde aplicações simples a aplicações de grandes corporações. Além de ser largamente utilizado em grandes aplicações do próprio Google, como o Google Analytics, Adwords, Adsense, Google Trends, etc.

Fundamentos do Angular Aplicações Angular são feitas a partir de um conjunto de web components. Um web componente é a combinação de estilo CSS + template HTML + classe javascript que irá dizer ao angular como controlar uma parte da aplicação. Além de componentes, no Angular possuímos uma série de bibliotecas (Classes) que resolvem cada uma um problema específico.

stewan.io

5


Visão Geral

Aqui está um exemplo de um componente que exibe uma simples string: import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `
Hello {{name}}
` }) export class AppComponent { name = 'Angular'; }

O resultado do exemplo acima será um simples: "Hello Angular", dentro de uma tag padrão
do html . Experimente executar o exemplo acima a partir deste plunker Quando o site carregar, altere a linha template: `
Hello {{name}}
`

para template: `
Olá {{name}}
`

Aguarde e veja o resultado.

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 fácil e dar maior produtividade a vida do desenvolvedor por meio de ferramentas para desenvolvimento. Apesar de não ser recomendado, você também pode escrever código Angular usando JavaScript puro, este guia explica como. Analisando o código do exemplo, em linhas gerais estamos import { Component } from '@angular/core';

importando a classe Component a partir do núcleo do angular @Component({ selector: 'my-app', template: `
Hello {{name}}
` })

O trecho acima é o decorador de componente do angular. Decoradores de componente sempre vem exatamente uma linha acima da classe a ser trabalhada e eles possuem o propósito de esclarecer ao angular como este componente deve trabalhar: Selector: irá informar ao angular qual nome deverá utilizar na tag HTML. Neste caso o

resultado final seria Template: o HTML em si do componente. Neste caso uma tag
com uma variável

de template {{name}}

stewan.io

7


export class AppComponent { name = 'Angular'; }

O trecho acima está exportando a classe AppComponent afim de que esteja disponível para importação em outros arquivos do projeto. Neste caso, a classe AppComponent é importada no arquivo app.module, verifique no plunker, lado

esquerdo, clique no arquivo app.module.

O objetivo do app.module é basicamente importar todos os recursos que a aplicação irá utilizar e defini-las em um módulo – onde possamos fazer o bootstrap – ou inicialização da nossa aplicação. Esta inicialização é feita no arquivo src/ main.ts, por meio do método platformBrowserDynamic().bootstrapModule(AppModule) Voltando ao último trecho de código do exemplo, além da exportação, também é definida uma propriedade no escopo da classe, a propriedade name é "ligada" ao template por meio de um recurso denominado Data Binding, ou Property Binding. É legal você conferir esta parte da documentação (em inglês), que ensina outro jeito de aprender angular. Neste ebook, vou ser o mais objetivo possível para você começar a desenvolver, sem ter que ver conceitos mais complexos por agora.

stewan.io

8


Arquitetura

Ok, WTF is this? No angular tudo é centrado no Componente. Conforme você pode analisar mais ao centro do diagrama o componente angular é definido por meio de um Metadata, que nada mais é que aquele objeto {} definido dentro do decorador @Component. Este mesmo componente possui um Template e a comunicação de dados entre a parte lógica do Componente e o Template é realizada por meio de Property Bindings, ou Ligação por meio de propriedades. Quebrando estes termos técnicos temos: Componente: Soma de uma classe javascript + template HTML + Metadata , conforme o exemplo abaixo, o metadata seria o que está entre { }

stewan.io

9


@Component({ selector: 'my-app', template: `
Hello {{name}}
` })

O bind de propriedade (Property Binding) seria a definição da propriedade no escopo da classe, já com valor inicial, que é ligada diretamente ao template export class AppComponent { name = 'Angular'; }

stewan.io

10


Diretivas Diretivas no angular são atributos HTML especiais que aceitam uma lógica de programação diretamente no template. Alguns exemplos básicos são:

Remove ou adiciona uma nova parte no

*ngIf="showSection==true">

DOM baseada em uma expressão, neste caso se showSection for true.

Cria um novo template dinâmico em tempo real baseado no elemento
, instanciando uma nova "view" para cada item da lista.

do objeto representa o nome da classe a ser aplicada, o valor do objeto representa a condição ou expressão.

O famoso two-way data-binding, ou ligação de dados em duas vias, além de controle de validação dos formulários.

stewan.io

11


Consulte mais sobre outras diretivas na sessão Built-in Directives deste Cheat Sheet da documentação do Angular.

Serviços @Injectable() export class MyService() {}

Serviços são classes Singleton. Singleton é um padrão de projeto de software (do inglês Design Pattern). Este padrão garante a existência de apenas uma instância de uma classe, mantendo um ponto global de acesso ao seu objeto. Basicamente elas servem para guardar a lógica do negócio. Para fazer uma simples alusão, imagine duas xícaras de café, estas xícaras são dois componentes angular, as duas precisam ter café, o que seria melhor, escrever o código de fazer café repetidamente nas 2 xícaras ou escrever de uma única vez um terceiro elemento chamado bule (provider)? Com este bule poderíamos com um único código servir as duas xícaras. O novo angular permanece com a mesma idéia de injeção de dependência da versão anterior, com a diferença de agora estarmos de fato trabalhando com Classes e orientação a objetos.

stewan.io

12

e Book Guia Definitivo Do Angular

Recommend Documents

Hello {{name}}

do html . Experimente executar o exemplo acima a partir deste plunker Quando o site carregar, altere a linha template: `

Hello {{name}}

Olá {{name}}

Hello {{name}}

Hello {{name}}