Desenvolvendo com AngularJS

Shyam Seshadri & Brad Green

Novatec

Authorized Portuguese translation of the English edition of Angular JS: Up and Running, ISBN 9781491901946 © 2014 Shyam Seshadri and Brad Green. This translation is published and sold by permission of O'Reilly Media, Inc., which owns or controls all rights to publish and sell the same.

Tradução em português autorizada da edição em inglês da obra Angular JS: Up and Running, ISBN 9781491901946 © 2014 Shyam Seshadri e Brad Green. Esta tradução é publicada e vendida com a permissão da O'Reilly Media, Inc., detentora de todos os direitos para publicação e venda desta obra. © Novatec Editora Ltda. 2014.

Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida a reprodução desta obra, mesmo parcial, por qualquer processo, sem prévia autorização, por escrito, do autor e da Editora.

Editor: Rubens Prates Tradução: Lúcia A. Kinoshita Revisão gramatical: Marta Almeida de Sá Editoração eletrônica: Carolina Kuwabata Assistente editorial: Priscila Ayumi Yoshimatsu ISBN: 978-85-7522-409-0 Histórico de impressões: Novembro/2014

Primeira edição

Novatec Editora Ltda.

Rua Luís Antônio dos Santos 110 02460-000 – São Paulo, SP – Brasil Tel.: +55 11 2959-6529 Email: novatec@novatec.com.br Site: www.novatec.com.br Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec

capítulo 1

Introdução ao AngularJS

A Internet percorreu um longo caminho desde a sua criação. Sites orientados ao consumo e não interativos começaram a se transformar em algo com que os usuários podiam interagir. Os usuários podiam responder, fornecer detalhes e passaram a acessar seus emails em sites. Usos concorrentes, suporte offline e várias outras funcionalidades se tornaram recursos básicos, e o tamanho e o escopo das aplicações do lado cliente se mantiveram em rápida expansão. À medida que as aplicações se tornaram maiores, melhores e mais rápidas, o mesmo ocorreu com a complexidade a ser administrada por um desenvolvedor.

Uma solução JavaScript/jQuery pura nem sempre tinha a estrutura adequada para garantir uma alta velocidade no desenvolvimento ou a possibilidade de manutenção em longo prazo. Os projetos se tornaram altamente dependentes de ter um bom engenheiro de software que criasse o framework inicial. Mesmo assim, nem sempre era possível ter modularidade, possibilidade de efetuar testes e separação de responsabilidades presentes em um projeto. Os testes e a confiabilidade, com frequência, ficavam em segundo plano em casos como esses.

O AngularJS (http://www.angularjs.org/) surgiu para atender a essas necessidades básicas. Seria possível oferecer uma estrutura-padrão e um metaframework em que as aplicações web pudessem ser desenvolvidas de forma rápida e confiável? Os mesmos conceitos de engenharia de software como código testável, separação de responsabilidades, MVC (Model-View-Controller, ou Modelo-Visão-Controlador), ou ainda MVVM (Model-View-ViewModel), e assim por diante poderiam ser adequados a aplicações JavaScript? Seria possível ter o melhor dos dois mundos – a concisão do JavaScript e o prazer de ter um desenvolvimento rápido e de fácil manutenção? Achamos que sim, porém deixaremos que você faça o julgamento final, à medida que apresentarmos o AngularJS no restante deste livro.

No final deste capítulo, criaremos um exemplo básico do tipo “hello world” em AngularJS para termos uma noção de alguns conceitos comuns e da filosofia por trás do AngularJS. Veremos também como inicializar e converter qualquer 19

20

Desenvolvendo com AngularJS

aplicação HTML em AngularJS, além de vermos o uso de técnicas comuns de data-binding (ligação de dados) no AngularJS.

Introdução ao AngularJS O AngularJS é um framework JavaScript MVC para Web que consideramos ser um super-herói. Nós o chamamos de super-herói porque o AngularJS faz tanto por nós que tudo o que devemos fazer é focar em nossa aplicação principal e deixar que ele cuide do resto. O AngularJS permite aplicar práticas-padrão de engenharia de software testadas e aprovadas, tradicionalmente utilizadas do lado do servidor, na programação do lado cliente para acelerar o desenvolvimento de frontends. Esse framework oferece uma estrutura consistente e escalável, que facilita desenvolver aplicações complexas e de grande porte como parte de uma equipe.

E qual é a melhor parte disso? Tudo é feito em JavaScript e em HTML puros.

Não há necessidade de aprender uma nova linguagem de programação ou de templating (embora seja preciso entender os paradigmas MVC e MVVM para o desenvolvimento de aplicações, que serão brevemente discutidos neste livro). E como o AngularJS cumpre todas essas promessas loucas e maravilhosas, aparentemente impossíveis de serem satisfeitas?

Sua filosofia está fundamentada em alguns princípios que orientam todos os aspectos, desde a maneira de estruturar sua aplicação até o modo como as aplicações devem se encaixar umas nas outras, como a aplicação deve ser testada e de que forma o seu código será integrado a outras bibliotecas. Contudo, antes de discutirmos cada um desses assuntos, vamos dar uma olhada no motivo pelo qual, inicialmente, devemos nos preocupar com eles.

O que é MVC (Modelo-Visão-Controlador)?

O principal conceito por trás do framework AngularJS é o padrão de arquitetura MVC. O padrão MVC (Model-View-Controller, ou Modelo-Visão-Controlador) ou MVVM (Model-View-ViewModel, que é muito semelhante) evoluiu como uma maneira de separar unidades lógicas e responsabilidades no desenvolvimento de aplicações de grande porte. Ele oferece aos desenvolvedores um ponto de partida para decidir como e em que ponto as responsabilidades serão divididas. O padrão de arquitetura MVC separa uma aplicação em três partes distintas e modulares:

Capítulo 1 ■ Introdução ao AngularJS

21

• O modelo (model), que é a força motriz da aplicação. Em geral, o modelo corresponde aos dados por trás da aplicação, geralmente acessados pelo servidor. Qualquer UI com dados que o usuário vê é derivada do modelo ou de um subconjunto do modelo.

• A visão (view), que corresponde à UI. É aquilo que o usuário vê e com o qual interage. A visão é dinâmica e é gerada de acordo com o modelo atual da aplicação.

• O controlador (controller), que representa a lógica de negócios e a camada de apresentação. O controlador realiza ações como acessar dados e toma decisões, por exemplo, sobre como o modelo será apresentado, que partes dele serão exibidas etc.

Como o controlador é responsável por decidir, basicamente, que partes do modelo devem ser exibidas na visão, de acordo com a implementação, ele também poderá ser considerado como uma viewmodel (visão do modelo) ou um presenter (apresentador).

Em sua base, porém, cada um desses padrões separa as responsabilidades da aplicação em subunidades diferentes, o que proporciona as seguintes vantagens: • Cada unidade é responsável por uma e somente uma tarefa. O modelo corresponde aos dados, a visão é a UI e o controlador corresponde à lógica de negócios. Descobrir a qual parte o novo código em que estamos trabalhando pertence, bem como saber onde estão os códigos existentes, é fácil por causa desse princípio de responsabilidade única.

• Cada unidade é tão independente das outras quanto for possível. Isso deixa o código muito mais modular e reutilizável, além de facilitar a manutenção.

Vantagens do AngularJS Faremos algumas afirmações nesta seção, que serão esmiuçadas na seção seguinte, em que detalharemos de que modo o AngularJS torna tudo isso possível: • O AngularJS é um metaframework para SPA (Single Page Application, ou Aplicação de página única). Com templating do lado do cliente e uso intenso de JavaScript, criar e manter uma aplicação pode se tornar maçante e trabalhoso. O AngularJS evita códigos redundantes e faz o trabalho pesado, de modo que podemos focar exclusivamente no núcleo da aplicação.

22

Desenvolvendo com AngularJS

• Uma aplicação AngularJS exigirá menos linhas de código para realizar uma tarefa em relação a uma solução JavaScript pura usando jQuery. Quando comparado a outros frameworks, você se verá implementando menos código boilerplate e terá um código mais limpo, pois sua lógica ficará contida em componentes reutilizáveis e estará longe de suas vistas.

• A maior parte do código que você implementará em uma aplicação AngularJS estará focada na lógica de negócios ou nas funcionalidades principais de sua aplicação, e não em códigos redundantes e desnecessários. Isso é resultado do fato de o AngularJS cuidar de todo o código boilerplate que você normalmente implementaria bem como do padrão de arquitetura MVC. • A natureza declarativa do AngularJS facilita escrever e entender as aplicações. É fácil entender o propósito de uma aplicação somente observando o HTML e os controladores. Em certo sentido, o AngularJS permite criar HTMLX (em vez de contar com o HTML5 ou esperar pelo HTML6 etc.), que é um subconjunto do HTML para atender às suas necessidades e aos seus requisitos.

• As aplicações AngularJS podem ser estilizadas com CSS e HTML, independentemente da lógica de negócios e das funcionalidades. Ou seja, é possível alterar todo o layout e o design de uma aplicação sem alterar uma única linha de JavaScript.

• Os templates de aplicações AngularJS são implementados em HTML puro, portanto os designers acharão mais fácil trabalhar com eles e estilizá-los.

• É incrivelmente fácil efetuar testes de unidade em aplicações AngularJS, o que também torna a aplicação estável e fácil de ser mantida por períodos mais longos de tempo. Há novas funcionalidades a serem implementadas? É preciso alterar uma lógica existente? Tudo isso é muito fácil de fazer com a base sólida de testes existente.

• Não precisamos abrir mão daqueles componentes da jQueryUI e do BootStrap que tanto amamos. O AngularJS interage bem com bibliotecas de componentes de terceiros e disponibiliza hooks para que elas sejam integradas de acordo com nossas necessidades.

A filosofia do AngularJS Há cinco princípios básicos que fundamentam o AngularJS e que permitem aos desenvolvedores criar aplicações complexas e de grande porte de forma rápida e fácil:

Capítulo 1 ■ Introdução ao AngularJS

23

Orientação a dados (por meio de data-binding, ou seja, ligação de dados) Em uma aplicação tradicional do lado do servidor, criamos a interface de usuário ao combinar o HTML com nossos dados locais. É claro que isso significa que, sempre que for necessário alterar uma parte da UI, o servidor deverá enviar todo o HTML e os dados ao cliente novamente, mesmo que o cliente já tenha a maior parte do HTML. Com SPAs (Single Page Applications) do lado cliente, temos uma vantagem.

Precisamos enviar, do servidor para o cliente, somente os dados que foram alterados. Entretanto o código do lado cliente ainda deverá atualizar a UI de acordo com os dados novos. Isso resulta em código boilerplate que poderá ter uma aparência como a que está sendo apresentada a seguir (se estivermos usando jQuery). Inicialmente, vamos dar uma olhada em um HTML bem simples: Hello <span id="name"></span>

O JavaScript que faz isso funcionar poderá ter um aspecto semelhante a: var updateNameInUI = function(name) { $('#name').text(name); }; // Muito código aqui... // Na carga inicial do dado updateNameInUI(user.name); // Quando o dado, de algum modo, é alterado updateNameInUI(updatedName);

O código anterior define uma função updateNameInUI que aceita o nome do usuário e, em seguida, encontra o elemento da UI e atualiza o seu innerText. É claro que devemos garantir que essa função seja chamada sempre que o valor de name for alterado, por exemplo, na carga inicial e talvez quando o usuário fizer logout e fizer login novamente, ou se ele alterar o seu nome. E esse é apenas um campo.

Agora pense nas dezenas de linhas iguais a essa em todo o seu código. Esses tipos de operação são muito comuns em um modelo CRUD (Create-Retrieve-Update-Delete, ou Criar-Ler-Atualizar-Apagar) como esse.

Por outro lado, a abordagem do AngularJS é determinada pelo modelo que o suporta. A principal funcionalidade do AngularJS – que pode fazer com que milhares de linhas de código boilerplate sejam evitadas – é o seu data-binding (uni e bidirecional). Não é preciso perder tempo enviando dados da UI para o JavaScript e vice-versa em uma aplicação AngularJS. Basta efetuar o binding dos

24

Desenvolvendo com AngularJS

dados em nosso HTML e o AngularJS cuidará de fazer esse valores chegarem até a UI. Ele não só faz isso como também cuida de atualizar a UI sempre que os dados forem alterados.

A mesma funcionalidade em uma aplicação AngularJS terá um aspecto semelhante a: Hello <span>{{name}}</span>

No JavaScript, tudo o que devemos fazer é definir o valor da variável name. O AngularJS cuidará de descobrir que ela sofreu alterações e atualizará a UI automaticamente.

Esse é o data-binding unidirecional, em que tomamos os dados provenientes do servidor (ou de qualquer outra fonte) e atualizamos o DOM (Document Object Model, ou Modelo de Objetos de Documentos). Mas e o inverso? A maneira tradicional ao trabalhar com formulários – em que precisamos obter dados do usuário, realizar algum processamento e então enviá-los ao servidor – terá um aspecto semelhante ao que se segue. O HTML inicialmente poderá se parecer com: <form name="myForm" onsubmit="submitData()"> <input type="text" id="nameField"/> <input type="text" id="emailField"/> </form>

O JavaScript que faz isso funcionar poderá ter um aspecto semelhante a: // Define os dados no formulário function setUserDetails(userDetails) { $('#nameField').value(userDetails.name); $('#emailField').value(userDetails.email); } function getUserDetails() { return { name: $('#nameField').value(), email: $('#emailField').value() }; } var submitData = function() { // Supondo que haja uma função que faça a solicitação XHR // Faz uma solicitação POST com dados JSON makeXhrRequest('http://my/url', getUserDetails()); };

Capítulo 1 ■ Introdução ao AngularJS

25

Além do layout e do templating, devemos administrar o fluxo de dados entre o código da lógica de negócios e do controlador e o código da UI e vice-versa.

Sempre que os dados forem alterados, é preciso atualizar a UI, e sempre que o usuário fizer uma submissão ou for necessário executar uma validação, devemos chamar a função getUserDetails() e, em seguida, aplicar nossa lógica principal nos dados.

O AngularJS oferece data-binding bidirecional, que permite evitar esse código boilerplate. O data-binding bidirecional garante que o nosso controlador e a UI compartilhem o mesmo modelo, de modo que atualizações em um deles (seja a partir da UI ou em nosso código) fará o outro ser atualizado automaticamente. Sendo assim, a mesma funcionalidade anterior, com o AngularJS, poderá ter um HTML como o que se segue: <form name="myForm" ng-submit="ctrl.submitData()"> <input type="text" ng-model="user.name"/> <input type="text" ng-model="user.email"/> </form>

Cada tag input do HTML está associada a um modelo do AngularJS, declarado por meio do atributo ng-model (que se chama diretiva no AngularJS). Quando o formulário é submetido, o AngularJS entra em ação disparando uma função do controlador chamada submitData. O JavaScript para isso poderá ter um aspecto semelhante a: // No código de meu controlador this.submitData = function() { // Faz uma solicitação POST ao servidor com um objeto JSON $http.post('http://my/url', this.user); };

O AngularJS cuida do data-binding bidirecional, que possibilita obter os valores mais recentes da UI e atualizar name e email no objeto user automaticamente.

Ele também garante que qualquer alteração feita nos valores de name e de email no objeto user serão refletidos automaticamente no DOM. Por causa do data-binding, em uma aplicação AngularJS, você poderá focar na lógica de negócios principal e em suas funcionalidades e poderá deixar que o AngularJS faça o trabalho pesado de atualizar a UI. Também significa que deverá haver uma mudança de mentalidade para que possamos desenvolver uma aplicação AngularJS. É necessário atualizar a UI? Altere o modelo e deixe que o AngularJS atualize a UI.

26

Desenvolvendo com AngularJS

Declarativo Uma aplicação web single-page (também conhecida como uma aplicação AJAX) é composta de vários trechos diferentes de HTML e de dados associados por meio de JavaScript. Com muita frequência, acabamos com templates HTML que não oferecem nenhum indício daquilo em que se transformaram.

Por exemplo, considere o HTML a seguir: <ul class="nav nav-tabs"> <li>Home</li> <li class="selected">Profile</li> </ul> <div class="tab1"> algum conteúdo aqui </div> <div class="tab2"> <input id="startDate" type="text"/> </div>

Se você estiver acostumado com determinadas construções de HTML ou estiver familiarizado com a jQuery ou com frameworks semelhantes, poderá perceber que o HTML anterior representa um conjunto de abas, e que a segunda aba tem um campo de entrada que deve se transformar em um datepicker (selecionador de data). Mas nada disso é realmente mencionado no HTML. Isso é percebido somente porque há um pouco de JS e de CSS em seu código, que tem a função de converter esses elementos li em abas e o campo input em um datepicker.

Essencialmente, esse é o paradigma imperativo, em que dizemos exatamente à aplicação como realizar toda e qualquer ação. Dizemos a ela para encontrar o elemento com a classe nav-tabs e transformá-lo em um componente relativo a abas e, em seguida, selecionar a primeira aba por padrão. Isso é totalmente feito por meio de nosso código JavaScript, e não no local em que o HTML realmente deve ser alterado. O HTML não reflete nenhuma parte dessa lógica.

O AngularJS, por sua vez, promove um paradigma declarativo, em que declaramos diretamente no HTML o que estamos tentando realizar. Isso é feito por meio de um recurso que o AngularJS chama de diretiva. Basicamente, as diretivas estendem o vocabulário do HTML para ensinar-lhe novos truques.

Deixamos que o AngularJS descubra como fazer o que queremos que ele faça, seja criar abas ou datepickers. A maneira ideal de implementar o código anterior em AngularJS é semelhante a:

Capítulo 1 ■ Introdução ao AngularJS

27

<tabs> <tab title="Home">Some content here</tab> <tab title="Profile"> <input type="text" datepicker ng-model="startDate"/> </tab> </tabs>

O HTML baseado em AngularJS utiliza tags <tab>, que dizem ao AngularJS para descobrir como renderizar o componente relativo às abas e declara que <input> é um datepicker associado a uma variável do modelo do AngularJS chamada startDate.

Há algumas vantagens nessa abordagem: • Ela é declarativa, portanto, somente observando o HTML podemos descobrir de imediato que há duas abas, uma das quais contém um datepicker.

• A lógica de negócios para selecionar a aba corrente, remover a seleção de outras abas e ocultar e mostrar o conteúdo correto está toda encapsulada na diretiva tab.

• De modo semelhante, qualquer desenvolvedor que queira ter um datepicker não precisa saber se estamos usando jQueryUI, BootStrap ou algo diferente. O uso e a implementação ficam separados para que haja uma clara distinção de responsabilidades.

• Como a funcionalidade toda está encapsulada e contida em um só local, podemos fazer alterações em um ponto centralizado e fazer com que elas afetem todos os usos, em vez de encontrar e substituir manualmente todas as chamadas de API. Separação de responsabilidades O AngularJS adota um padrão semelhante ao MVC (Model-View-Controller, ou Modelo-Visão-Controlador) para estruturar qualquer aplicação. Se pensar no assunto, você perceberá que há três partes em sua aplicação.

Temos os dados propriamente ditos, que você quer apresentar aos usuários ou fazer com que eles os forneçam por meio de sua aplicação. Isso corresponde ao modelo em um projeto AngularJS, que, em sua maior parte, é composto de dados puros e é representado por meio de objetos JSON.

28

Desenvolvendo com AngularJS

Temos a interface de usuário ou o HTML final renderizado, que o usuário vê e com o qual interage, e que exibe os dados ao usuário. Essa parte corresponde à visão.

Por fim, temos a lógica de negócios e o código que acessa os dados, decide que parte do modelo deve ser apresentada ao usuário, lida com a validação e assim por diante, ou seja, é a lógica central específica de sua aplicação. Essa parte corresponde ao controlador em uma aplicação AngularJS. Achamos que uma abordagem MVC ou semelhante a ela é adequada por alguns motivos consistentes: • Há uma clara separação de responsabilidades entre as diversas partes de sua aplicação. Você precisa de um pouco de lógica de negócios? Use o controlador. É preciso renderizar algo de modo diferente? Vá para a visão.

• Sua equipe e os colaboradores poderão entender de imediato o seu código, pois haverá uma estrutura e um padrão bem definidos.

• Você precisa rever o design de sua UI por algum motivo? Não será necessário alterar nenhum código JavaScript. É preciso mudar o modo como algo é validado? Não será necessário alterar o HTML. Você pode trabalhar em partes independentes do código sem interferir em outras.

• O AngularJS não é totalmente compatível com o MVC; o controlador jamais fará uma referência direta à visão. Isso é ótimo porque mantém o controlador independente da visão, além de permitir testar facilmente o controlador sem a necessidade de instanciar um DOM. Por causa de todos esses motivos, o MVC permite desenvolver e escalar sua aplicação de maneira a ser fácil de ser mantida, estendida e testada.

Injeção de dependência (Dependency Injection) O AngularJS é um dos poucos frameworks JavaScript com um sistema completo de injeção de dependência incluído. A injeção de dependência (discutida no capítulo 5) corresponde ao conceito de solicitar as dependências de um controlador ou de um serviço em particular, em vez de instanciá-las online por meio do operador new ou chamar explicitamente uma função (por exemplo, DatabaseFactory.getInstance()). Outra parte de seu código será responsável (nesse caso, o injetor) por descobrir como criar essas dependências e disponibilizá-las quando forem solicitadas.

Capítulo 1 ■ Introdução ao AngularJS

29

Isso é útil porque: • O controlador, o serviço ou a função que solicitar a dependência não precisa saber como construir suas dependências e pode percorrer toda a cadeia, por mais longa que ela seja.

• As dependências são explícitas, de modo que podemos saber de imediato o que é necessário antes de começarmos a trabalhar com nossa porção de código.

• É mais fácil testar porque podemos substituir dependências pesadas por mocks mais adequados aos testes. Desse modo, em vez de usar um HttpService que converse com o verdadeiro servidor, usamos um MockHttpService que conversa com um servidor criado em memória.

A injeção de dependência no AngularJS é usada em todas as partes, que incluem desde os controladores e serviços até os módulos e testes. Ela permite implementar um código modular e reutilizável facilmente e pode ser usada de modo simples e fácil conforme for necessário.

Extensível Já mencionamos as diretivas na seção anterior, em que discutimos a natureza declarativa do AngularJS. As diretivas representam a maneira de o AngularJS ensinar novos truques ao navegador e ao HTML, que variam desde lidar com cliques e condicionais até criar novas estruturas e novos estilos.

Entretanto esse é somente o conjunto pronto de diretivas. O AngularJS expõe a mesma API usada internamente para criar essas diretivas para que qualquer pessoa possa estender as diretivas existentes ou criar suas próprias diretivas.

Podemos desenvolver diretivas robustas e complexas que podem ser integradas com bibliotecas de terceiros como a jQueryUI e o BootStrap, para citar somente algumas, e criar uma linguagem que seja específica para nossas necessidades.

Veremos a criação de nossas próprias diretivas no capítulo 11.

Em suma, o AngularJS tem um excelente conjunto nuclear de diretivas com as quais podemos começar a trabalhar, além de uma API que nos permite fazer tudo o que o AngularJS faz e muito mais. Nossa imaginação é o único limite para a criação de componentes declarativos e reutilizáveis.

30

Desenvolvendo com AngularJS

Testar antes, testar novamente e continuar testando Muitas das vantagens mencionadas anteriormente decorrem do foco singular em testes e da capacidade de testar, proporcionados pelo AngularJS. Todas as partes do AngularJS foram projetadas para serem testáveis, incluindo os controladores, os serviços e as diretivas até as visões e as rotas.

Considerando a injeção de dependência e o fato de o controlador ser independente de referências à visão, o código JS que escrevermos para uma aplicação AngularJS poderá ser facilmente testado. Como temos o mesmo sistema de injeção de dependência tanto em nossos testes quanto no código de produção, podemos instanciar qualquer serviço facilmente, sem nos preocuparmos com suas dependências. Tudo isso é executado por meio do Karma (http://karma-runner.github.io/), a nossa ferramenta de execução de testes maravilhosa e incrivelmente rápida. É claro que para garantir que nossa aplicação realmente funcione de ponta a ponta, também temos o Protractor (https://github.com/angular/protractor), que é uma ferramenta baseada em WebDriver para executar cenários fim a fim, totalmente projetada para se integrar ao AngularJS. Isso significa que não teremos de implementar nenhuma espera (wait) ou observação (watch) em nosso teste fim a fim, por exemplo, esperar um elemento ser exibido ou esperar cinco segundos depois de um clique para que o servidor possa responder. O Protractor é capaz de se associar ao AngularJS e descobrir quando deve prosseguir com o teste, deixando-nos com um conjunto de testes fim a fim sólidos e determinísticos.

Começaremos com o Karma e discutiremos como configurá-lo e utilizá-lo no capítulo 3; o Protractor será discutido no capítulo 14. Portanto não há realmente nenhuma desculpa para que a sua aplicação AngularJS não seja completamente testada. Vá em frente; você e seus colegas de equipe ficarão agradecidos por isso.

Agora que você já teve uma breve visão geral do que torna o AngularJS tão bom, veremos como começar a implementar nossas próprias aplicações AngularJS.

Começando a trabalhar com o AngularJS Começar uma aplicação AngularJS nunca foi tão fácil, mas, antes de mergulharmos nela de cabeça, vamos reservar um tempo para responder a algumas perguntas simples que ajudarão a decidir se o AngularJS é o framework certo para você.

Capítulo 1 ■ Introdução ao AngularJS

31

Que tipo de backend é necessário?

Uma das primeiras perguntas que geralmente ouvimos diz respeito ao tipo de backend necessário para podermos criar uma aplicação AngularJS. A resposta bem simples é: esse tipo de requisito não existe.

O AngularJS não tem nenhum requisito definido sobre o tipo de backend necessário para funcionar como uma Single-Page Application. Você é livre para usar Java, Python, Ruby, C# ou qualquer outra linguagem com a qual se sentir mais à vontade. O único recurso necessário é ter uma maneira de se comunicar com o seu servidor. O ideal é que isso seja feito por meio de XHR (solicitações HTTP XML) ou sockets.

Se o seu servidor tiver pontos de conexão com REST ou APIs que disponibilizem valores JSON, sua vida como desenvolvedor de frontend será mais fácil ainda. Mas mesmo que o seu servidor não retorne JSON, isso não quer dizer que o AngularJS deva ser abandonado. É bem fácil ensinar o AngularJS a conversar com um servidor XML ou que use qualquer outro formato, se for o caso.

Minha aplicação como um todo deve ser uma aplicação AngularJS? Em uma única palavra, não. O AngularJS tem um conceito (tecnicamente, é uma diretiva, porém discutiremos esse assunto na próxima seção) chamado ng-app. Esse recurso permite anotar qualquer elemento HTML existente (e não apenas a tag principal <html> ou <body>) e diz ao AngularJS que ele tem permissão para controlar, modificar e trabalhar somente com essa seção HTML em particular.

Com isso, é bem fácil começar com uma seção pequena em uma aplicação já existente e então ampliar gradualmente a parte controlada pelo AngularJS ao longo do tempo.

Uma aplicação AngularJS básica Por fim, depois de todas essas explicações, vamos trabalhar com um pouco de código. Começaremos com a aplicação AngularJS mais básica possível, que apenas importa a biblioteca AngularJS e prova que ela foi inicializada e que está funcionando: <!-- File: chapter1/basic-angularjs-app.html --> <!DOCTYPE html> <html ng-app>

32

Desenvolvendo com AngularJS <body> <h1>Hello {{1 + 2}}</h1> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"> </script> </body> </html>

Os exemplos deste livro Todos os exemplos deste livro estão hospedados no repositório do GitHub (https://github.com/shyamseshadri/angularjs-up-and-running). A versão correta, mais recente e atualizada, sempre estará disponível nesse local caso você se depare com algum problema ao executar o exemplo do livro. Todos os exemplos também contêm o nome do arquivo para que você possa encontrá-lo no repositório do GitHub. Cada capítulo tem sua própria pasta para que os exemplos do livro possam ser mais facilmente identificados.

Há duas partes para iniciar uma aplicação AngularJS: Carregar o código-fonte do AngularJS Incluímos a versão não minificada diretamente do Google Hosted Libraries, mas você poderá disponibilizar sua própria versão local. O CDN do Google (https://developers.google.com/speed/libraries/devguide) hospeda todas as versões mais recentes do AngularJS, que podem ser diretamente referenciadas, ou você poderá baixá-las do site do AngularJS (http://www.angularjs.org/).

Inicializar o AngularJS Isso é feito por meio da diretiva ng-app. Essa é a primeira e mais importante diretiva do AngularJS, que indica a seção do HTML controlada por ele. Inserir essa diretiva na tag <html> diz ao AngularJS para controlar toda a aplicação HTML. Também podemos inseri-la em <body> ou em qualquer outro elemento da página.

Qualquer elemento que for filho desse elemento será tratado pelo AngularJS e será anotado com diretivas; tudo o que estiver fora não será processado.

Por fim, experimentaremos pela primeira vez o data-binding unidirecional do AngularJS. Colocamos a expressão “1+2” entre chaves duplas. A chave dupla na sintaxe do AngularJS indica data-binding unidirecional ou expressões do AngularJS. Se ela se referir a uma variável, a UI permanecerá atualizada de acordo

Capítulo 1 ■ Introdução ao AngularJS

33

com as mudanças em seu valor. Se for uma expressão, o AngularJS a avaliará e manterá a UI atualizada se o valor da expressão for alterado.

Se, por algum motivo, o AngularJS não for inicializado corretamente, veremos {{1 + 2}} na UI; entretanto, se não houver erros, veremos o que está sendo mostrado na figura 1.1 em nosso navegador.

Figura 1.1 – Imagem de tela de uma aplicação AngularJS básica.

Hello World com o AngularJS Agora que já vimos como criar uma aplicação AngularJS, vamos implementar a aplicação “hello world” tradicional. Para isso, teremos um campo de entrada em que os usuários poderão digitar o seu nome. À medida que o usuário digitar, atualizaremos a UI com o valor mais recente da caixa de texto. Parece complicado?

Vamos ver como é a aparência desse código: <!-- File: chapter1/angularjs-hello-world.html --> <!DOCTYPE html> <html> <body ng-app> <input type="text" ng-model="name" placeholder="Enter your name"> <h1>Hello <span ng-bind="name"></span></h1> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"> </script> </body> </html>

Adicionamos duas novidades em relação ao último exemplo e mantivemos dois itens: • O código-fonte do AngularJS continua sendo o mesmo. A diretiva ng-app foi movida para a tag <body>.

34

Desenvolvendo com AngularJS

• Temos uma tag input com uma diretiva chamada ng-model. A diretiva ng-model é usada em campos de entrada sempre que quisermos que o usuário insira dados e tenha acesso ao valor em JavaScript. Nesse caso, dizemos ao AngularJS para armazenar o valor digitado pelo usuário nesse campo em uma variável chamada name.

• Também temos outra diretiva chamada ng-bind. O ng-bind e a notação de duas chaves são intercambiáveis, de modo que, em vez de termos <span ng-bind="name"></span>, poderíamos ter escrito {{ name }}. Ambas as opções fazem o mesmo, que é colocar o valor da variável name na tag e mantê-lo atualizado caso haja alguma mudança.

O resultado final está sendo mostrado na figura 1.2.

Figura 1.2 – Imagem de tela com o exemplo “hello world” do AngularJS.

Conclusão Implementamos duas aplicações AngularJS muito simples. A primeira mostrou a criação de uma aplicação AngularJS bem simples e a segunda demonstrou a eficácia do data-binding bidirecional do AngularJS. A melhor parte foi termos sido capazes de fazer isso sem escrevermos uma única linha de JavaScript. A mesma aplicação em JavaScript puro teria exigido que criássemos listeners e manipuladores de DOM com a jQuery. Pudemos nos livrar de tudo isso.

Também discutimos a filosofia básica do AngularJS e algumas de suas vantagens, e vimos como ele difere das soluções existentes. No próximo capítulo, iremos nos familiarizar com algumas das partes mais comuns do AngularJS, por exemplo, com as diretivas triviais, trabalharemos com controladores e usaremos serviços.