Crie aplicações com Angular - O novo framework do Google - Casa do Codigo

Crie aplicações com Angular - O novo framework do Google - Casa do Codigo

(Parte 1 de 3)

Você pode discutir sobre este livro no Fórum da Casa do Código: http://forum.casadocodigo.com.br/.

Caso você deseje submeter alguma errata ou sugestão, acesse http://erratas.casadocodigo.com.br.

Nada na vida é por acaso. Como dizia Steve Jobs, "ligue os pontos" e acredite que as situações da vida vão se ligar em algum momento para que, no final, tudo faça sentido. Assim, você sempre terá coragem de seguir seu coração, mesmo que ele o leve para um caminho diferente do previsto. No final, tudo fará sentido na vida.

Se alguém falasse que um dia eu teria meu próprio livro, eu daria risada e falaria que esse era um dos meus desejos. Mas não sabia que isso seria verdade um dia. Sempre temos altos e baixos, e são nas dificuldades que aprendemos, nos direcionamos, e ficamos mais fortes.

Sempre gostei de ensinar e passar meu conhecimento para a frente. Acredito que essa é uma maneira de continuar vivo mesmo quando partimos, um livro, um ensinamento, uma dica, tudo o que possa melhorar a vida do próximo. Quem me conhece sabe a paixão que tenho em aprender e dividir conhecimento, afinal, ninguém é tão inteligente que não tenha nada para aprender, e ninguém é tão burro que não tenha a ensinar. E quem sabe esta paixão possa estar em uma sala de aula algum dia sendo um professor. Infelizmente, este momento ainda não chegou.

Hoje, estou realizando um dos meus objetivos na vida, que é ter um livro publicado. Este tema vem como um presente para mim, e poder falar dele é algo sensacional.

Agradeço a toda equipe da editora Casa do Código pela confiança e ajuda com a construção deste livro. Agradeço também por toda as orientações e feedbacks de conteúdo até a publicação.

Agradeço a minha companheira, Andressa Fernandes, por sempre estar ao meu lado, e por nossas conversas, brincadeiras, brigas, risos, passeios, e tudo que passamos juntos. Esteja certa que tudo que faço será pensando em nós dois.

Agradeço a toda a minha família, professores, pessoas e amigos. Bons ou ruins, todos têm uma influência sobre o que eu sou hoje.

Finalizo dizendo que, se você quer chegar onde a maioria não chega, faça o que a maioria não faz. Então, espero que estude muito, aprenda bastante e goste da leitura deste livro. Ele foi feito com esforço e dedicação. Espero que sirva como uma ótima referência para seu aprendizado e desenvolvimento profissional e pessoal.

Bons estudos!

Figura 1: Thiago Guedes

Sou Thiago Guedes, desenvolvedor Web e Mobile. Tenho conhecimento em desenvolvimento Android, Angular 2, Nodejs, Ionic 2, JavaScript, HTML5, CSS3, Java, C#, PHP, MySQL, WebService RestFul, SOAP, metodologia ágil Scrum, XP e certificação Microsoft.

Minhas especialidades em Mobile são desenvolvimento nativo para Android e Híbridos com Ionic 2. Minhas especialidades em Web são desenvolvimento com Angular 2, HTML5, CSS3, JavaScript. Já em serviços, são com Node.js e Restful.

Atualmente, trabalho como analista desenvolvedor, na capital de São Paulo.

LinkedIn: https://br.linkedin.com/in/thiago-guedes- 7b0688100

Já pensou em desenvolver aplicações web de forma rápida e fácil usando todas as novidades da web moderna? Já pensou em aprender a usar um dos melhores frameworks front-end hoje do mercado, e ainda poder fazer aplicações web e mobile, tudo no mesmo lugar?

Com o Angular 2, você desenvolverá de forma fácil e rápida qualquer aplicação web que desejar, e ainda poderá expandir para plataforma mobile de forma simples. Neste livro, você vai aprender tudo o que precisa para iniciar seu desenvolvimento usando este framework feito pelo Google.

Veremos todas as novidades da web moderna, desde o novo

JavaScript e as novas funções do ES6. Aprenderemos a usar Default Parameters, Arrow functions, destructuring, Map, Reduce, Filter e muito mais. Veremos como usar o TypeScript, desde a criação e declaração de variáveis até classes, funções any e void , passagens de parâmetros e parâmetros opcionais.

Para configurar todo o ambiente para desenvolvimento, instalaremos o Node.js e o NPM, e usaremos os comandos do NPM, o TypeScript. Vamos desenvolver aplicações Angular 2 usando o facilitador angular-cli .

Vamos explicar e mostrar cada parte que compõe uma aplicação Angular 2, explicando para que serve cada uma. Veremos o que são componentes e como interagi-los com HTML5 e com CSS3. Vamos aprender cada marcação do Angular 2 e quando utilizar cada uma delas, como diretivas, serviços, injeção de dependências, bem como separar a aplicação em módulos.

No final, faremos um projeto usando tudo o que foi ensinado durante o livro e construiremos uma aplicação do zero. Vamos colocá-la em produção, subir um servidor e utilizar o projeto em nível de produção como sendo um usuário real.

Se você deseja criar aplicações para web e mobile, usando tudo o que tem de melhor para desenvolvimento, então você deve ler este livro. No final, você será capaz de realizar aplicações usando o Angular 2.

Os projetos que foram desenvolvidos durante o livro estão no meu GitHub.

Projeto feito durante o livro: https://github.com/thiagoguedes99/livro-Angular-2

Projeto final: https://github.com/thiagoguedes99/projeto-finallivro-angular-2

Para desenvolver em Angular 2, de preferência você precisa saber sobre HTML5, CSS3, JavaScript, TypeScript. Como se trata de aplicações client-size ou híbridas, os conceitos front-end serão usados a todo momento.

Entretanto, se você não tem conhecimento sobre isso, fique tranquilo. Com o tempo e fazendo todos os exercícios apresentados neste livro, garanto que no final você estará desenvolvendo em Angular 2 muito bem, e fazendo sistemas muito

Conhecimentos necessários mais fácil do que com uma codificação tradicional. mais fácil do que com uma codificação tradicional.

Sumário

SumárioCasa do Código

4 Exibindo dados para o usuário 4.1 Interpolation 4.2 Property binding

Casa do CódigoSumário

6 Formulários 6.1 ngModel, variável de template e atributo name da tag HTML 6.2 Validações de formulário 6.3 ngModelGroup 6.4 Enviando dados do formulário 6.5 Resumo

SumárioCasa do Código

8 Projeto final 8.1 Criação do novo projeto 8.2 Instalação do bootstrap 8.3 Arquitetura do projeto 8.4 Classe de modelo para os contatos 8.5 Classe de serviço e data-base 8.6 Componente de cadastro de contato 8.7 Componente de lista dos contatos 8.8 Componente de detalhe do contato 8.9 Fazendo build para produção 8.10 Resumo

10 Bibliografia

Casa do CódigoSumário

SumárioCasa do Código SumárioCasa do Código

CAPÍTULO 1

Angular 2 é um framework para desenvolvimento front-end com HTML, CSS e TypeScript que, no final, é compilado para JavaScript. Com ele, você constrói aplicações juntando trechos de código HTML, que são chamados de templates — com suas tags customizadas e classes que são marcadas com @component para gerenciar o conteúdo que será exibido no template. O conjunto desses dois conceitos forma um componente em Angular 2.

Ao contrário do que algumas pessoas acham, o Angular 2 não é continuação do AngularJS, também conhecido como Angular 1. Angular 2 é um framework totalmente novo e remodelado, codificado do zero, com lições aprendidas do AngularJS.

Muitas coisas foram mudadas internamente, inclusive vários conceitos para desenvolvimento. O Angular 2 vem com cara nova, aproveitando o máximo da nova web (com todo o poder do HTML5), usando conceito de SPA (Single Page Application) e sendo base para aplicações mobiles. Com ele, podemos fazer desde simples páginas web até grandes sistemas e aplicações, aplicativos mobile com Ionic 2 — que tem como base de desenvolvimento o Angular 2.

INTRODUÇÃO 1.1 O QUE É ANGULAR 2

O conhecimento desse framework do Google deixará você interado com tudo o que há de novo no mundo do desenvolvimento web e mobile.

Uma das principais mudanças do AngularJS para o Angular 2 é a performance. Enquanto o AngularJS era muito mais lento em relação aos outros frameworks front-end devido a várias interações feita no DOM, o Angular 2, com sua nova configuração, deixa a resposta muito mais rápida e a usabilidade muito mais dinâmica.

O desenvolvimento com Angular 2 é feito por meio de codificação TypeScript, que é um superset para JavaScript. Além de implementar funcionalidades do ES6, traz uma série de poderes ao desenvolvedor com as tipagens nas variáveis, e uma sintaxe mais clara e fácil de entender, parecendo-se bastante com C# ou Java.

Se você quiser fazer desenvolvimento web ou mobile, Angular

2 é o caminho certo para você aprender e desenvolver tudo o que deseja.

Com a evolução do JavaScript e também muitas das grandes empresas desenvolvendo padrões e técnicas para melhorar a performance dos scripts, chegamos a um padrão de desenvolvimento chamado de Single Page Applications (ou SPA). As SPAs são aplicações desenvolvidas em JavaScript que rodam quase inteiras no lado do cliente (browser). Assim que o usuário acessa o site, a aplicação fica armazenada do lado do cliente em forma de templates (pedaços de HTML).

As aplicações feitas em SPA fazem uma transição entre templates que estão dentro do browser, e só fazem requisições no servidor para buscar dados brutos de conteúdo que são enviados normalmente em JSON. O Google foi o primeiro nesta tecnologia com o Gmail, e hoje temos uma infinidade de sites que usam esse tipo de padrão.

Com uma aplicação desenvolvida em SPA, temos muitas vantagens, como melhor experiência do usuário, performance e menor carga de trabalho no servidor. A experiência do usuário é bastante melhorada com uma aplicação em SPA, dando a impressão até de ser uma aplicação desktop. Não temos reloads nem carregamento da página inteira, são apenas trechos da página que são mudados dependendo da ação do usuário, fazendo uma conexão e transferência do servidor para o cliente muito mais leve e rápida.

1.2 O QUE É SPA

Quanto à performance, não temos como discordar. Uma aplicação tradicional carrega uma página inteira do servidor em toda interação com o usuário, gerando mais tráfego na rede, mais processos no servidor e mais processos no navegador.

Em uma aplicação em SPA, tudo fica mais rápido e performático. Quando o usuário inicia a aplicação, quase todo o HTML é enviado para o navegador. As transições entre as partes da aplicação não precisam ser montadas e enviadas do servidor. O que o servidor envia para o navegador do usuário são somente os dados do processo em formato JSON.

O que temos na verdade com o padrão SPA é um hidden e show de partes do HTML, formando uma página apresentável para o cliente. Isso torna todo o processo muito mais rápido, leve e com performance elevada.

Com o servidor não precisando montar todo o HTML para enviar ao cliente, ele só precisa receber a requisição, processar e montar um JSON, e enviar como resposta. O resultado disso é que o serviço fica com menos processos, o tráfego entre server e cliente fica mais leve, e tudo fica mais rápido.

ES6, ECMAScript 6 ou ES2015? Uma dúvida bem comum é por que a mudança de nome, mas na verdade não houve mudança. JavaScript como conhecemos é somente um dialeto/apelido para a linguagem ECMAScript, abreviada carinhosamente de ES.

Quando falamos ECMAScript ou JavaScript, ambas tratam das evoluções constantes que a linguagem vem tendo durante os anos.

1.3 AS NOVIDADES DO ES6

Após um longo tempo sem atualizações, o comitê responsável conhecido como TC39, definido pela norma ECMA-262, decidiu fazer um release anual. Ou seja, cada edição é um superset da edição anterior, implementando novas funcionalidades. Em 2015, o ECMAScript ou JavaScript (chame como quiser) chegou à sua 6º versão, o ES6, trazendo muitas melhorias e resolvendo problemas antigos em relação a versões anteriores.

A primeira mudança é uma com que desenvolvedores já sofreram bastante: o uso do var para declaração de variável. Quem já programa em JavaScript sabe que a variável tinha escopo global no projeto, e no código com o ES6 temos o uso do let para declaração de variáveis. Esta é a nova forma, fazendo a variável como escopo de bloco. Isso ajuda bastante para pegar erros como uma declaração dentro de um bloco if , for , while ou outro qualquer, pois a variável morre quando o bloco termina.

var qualquerCoisa = true; if (qualquerCoisa) { let nomeVariavel = 'Angular 2'; alert(nomeVariavel); } console.log(nomeVariavel); // nomeVariavel is not defined console.log(qualquerCoisa); // printa no console True;

Vemos nesse pequeno exemplo o uso do let em ação.

Enquanto a variável com var está sempre ativa, a com let só está ativa dentro do bloco onde realmente ela será usada, não fazendo sentido algum continuar com ela fora do bloco if . Em resumo, o let conserta um antigo problema de declaração de variáveis, fazendo com que elas funcionem da forma esperada

Outra mudança introduzida no ES6 é o uso do constEle

pelos desenvolvedores. funciona igual como em outras linguagens de programação. Quando a variável é criada, não pode ser alterada, e o valor inicial declarado será sempre o mesmo. Caso se tente atribuir um novo valor, será lançado um erro de Uncaught SyntaxErro read-only.

Algumas alterações foram feitas em relação aos parâmetros de funções, que trazem grandes benefícios e agilidade na codificação, tanto no ES5 (versão anterior) quanto no ES6. Mais para a frente, veremos as modificações em TypeScript.

Na versão anterior do ES6, o ES5, já tivemos algumas mudanças na parametrização de funções que deram uma grande ajuda no código do programador. Veja o exemplo a seguir:

Esse código dará um erro de NaN (não é número), pois o valor de y é undefined, sendo o programador que tratará todas essas exceções em seu código, deixando a função cheia de linhas desnecessárias. No ES5, já podemos tratar isso de forma bem simples. Veja:

Rodando esse código, você verá que a soma é 6. O pipe (guarde bem esse nome, pois vamos falar dele em Angular 2 também!) faz uma função de if nesse lugar. Ou seja, caso o valor de y seja undefined, o y será 1. Com essa linha, nossa função não dará mais erro.

Mas, mesmo assim, temos uma linha que não faz parte da lógica da função e só serve como verificação. Então, surge a evolução do ES6: os default parameters.

Parâmetros padrão são colocados na declaração da função, deixando todo o bloco livre para colocar somente a lógica do problema.

Veja que nossa função volta a ter somente uma linha, e somente a lógica do problema está dentro do bloco. O próprio ES6 já faz toda a verificação de valores da variável na declaração. Ótimo, né? Mas acha que isso é tudo? Então, sente aí que ainda vêm mais.

Nossa função tem 3 linhas ao todo: uma na declaração, uma da lógica envolvida e uma para fechamento. E se fosse possível fazer isso tudo em apenas uma linha? Mágica? Não, é apenas uma evolução da linguagem. Apresentarei os arrows functions.

1.4 DEFAULT PARAMETERS

1.5 ARROW FUNCTIONS 1.4 DEFAULT PARAMETERS 7

É preciso entender bem esse conceito, pois, em Angular 2, muita coisa é escrita dessa forma. Veja como ficará nosso código:

Primeiro, declaramos uma constante com o nome da função.

Com isso, já podemos retirar a palavra function . Em seguida, retiramos os {} e o return , trocamos os dois por esse símbolo => , que significa que o valor a seguir será retornado. Simples, né?

Mas calma, com a evolução do Angular 2 e o TypeScript, isso fica menor ainda. Continue a leitura que você verá.

(Parte 1 de 3)

Comentários