O que é AngularJS?

AngularJS é uma estrutura JavaScript MVC desenvolvida pelo Google, que permite construir aplicativos front-end bem estruturados que são fáceis de verificar e manter.

E por que devo usá-lo?

Se você ainda não experimentou o AngularJS, é uma pena. O framework consiste em um conjunto bem integrado de ferramentas que o ajudarão a construir aplicações do lado do cliente, bem estruturadas em um sistema modular, com menos código e mais flexibilidade.

AngularJS estende HTML, fornecendo diretrizes que adicionam funcionalidade à sua margem de lucro e permitem criar modelos dinâmicos poderosos. Você também pode criar suas próprias diretivas, criando componentes reutilizáveis ​​que completam suas necessidades e abstraindo toda a lógica de manipulação do DOM.

Ele também implementa vinculação de dados bidirecional, conectando seu HTML (visualizações) a objetos JavaScript (modelos) perfeitamente. Em termos simples, isso significa que qualquer atualização em seu modelo será refletida imediatamente em sua visualização, sem a necessidade de qualquer manipulação DOM ou tratamento de eventos (por exemplo, com jQuery).

O Angular fornece serviços além do XHR que simplificam muito seu código e permitem que você abstraia chamadas de API em serviços reutilizáveis. Com isso, você pode mover seu modelo de negócios e lógica para o front-end e construir aplicativos da web back-end independentes (agnóstico).

Por último, adoro o Angular por causa de sua flexibilidade quando se trata de comunicação com o servidor. Como a maioria dos frameworks JavaScript MVC, o Angular permite que você trabalhe com qualquer tecnologia de servidor, desde que possa servir seu aplicativo por meio de uma API da Web REST. Mas o Angular também fornece outros serviços além do XHR, o que simplifica muito o seu código e permite que você abstraia as chamadas de API em serviços reutilizáveis. Como resultado, você pode mover o modelo de negócios e a lógica para o front-end e construir aplicativos da web Processo interno independente. Neste post, vamos fazer exatamente isso: um passo de cada vez.

Então por onde começamos?

Primeiro, vamos decidir a natureza do aplicativo que queremos construir. Neste guia, preferimos não gastar muito tempo no back-end, por isso vamos escrever algo sobre o banco de dados que seja fácil de obter na internet, como um aplicativo de notícias esportivas!

Como sou um grande fã de esportes motorizados e Fórmula 1, usarei um serviço API Autosport como back-end. Felizmente, os caras da Ergast eles são gentis o suficiente para fornecer uma API de esportes motorizados gratuita, que é perfeita para nós.

Como uma prévia do que iremos construir, verifique o demonstração ao vivo . Para embelezar a demonstração e mostrar alguns modelos angulares, apliquei um tema Bootstrap de WrapBootstrap , mas como este artigo não é sobre CSS, irei abstraí-lo dos exemplos e deixá-lo totalmente de fora.

Tutorial para começar

Vamos começar nosso aplicativo de amostra com um pequeno Boilerplate. Eu recomendo o projeto semente angular já que não só fornece um ótimo esqueleto para inicialização, mas também estabelece a base para testes de unidade com Carma Y Jasmim (Não estamos fazendo nenhum teste nesta demonstração, então vamos deixar isso de lado por enquanto; veja o Parte 2 deste tutorial para aprender mais sobre como configurar seu projeto, para teste de unidade e ponta a ponta).

EDITADO (maio de 2014): Desde que escrevi este tutorial, o projeto semente angular passou por algumas mudanças importantes (incluindo a adição de Bower como gerenciador de pacotes). Se você tiver alguma dúvida sobre como implementar o projeto, dê uma olhada rápida na primeira seção do seu guia de referência . No tutorial parte 2 , Bower, entre outras ferramentas, é explicado em maiores detalhes.

Ok, agora que clonamos o repositório e instalamos as dependências, nosso esqueleto de aplicativo ficará assim:

Agora podemos começar a codificar. Como estamos tentando construir um aplicativo de notícias esportivas para um campeonato de corrida, vamos começar com a visão mais relevante: a tabela do campeonato.

Considerando que já temos uma lista de drivers definidos em nosso escopo (Fique comigo - chegaremos lá), e ignorando qualquer CSS (para facilitar a leitura), nosso HTML poderia ser:

Drivers Championship Standings
{{$index + 1}}	{{driver.Driver.givenName}} {{driver.Driver.familyName}}	{{driver.Constructors[0].name}}	{{driver.points}}

A primeira coisa que você notará neste modelo é o uso de expressões ('{{' e '}}') para retornar valores de variáveis. No AngularJS, as expressões permitem que você execute alguns cálculos, a fim de retornar um valor desejado. Algumas expressões válidas seriam:

• {{ 1 + 1 }}
• { date }
• {{ user.name }}

Na verdade, as expressões são snippets semelhantes a JavaScript. Apesar de ser muito poderoso, você não deve usar expressões para implementar qualquer lógica de nível superior. Para fazer isso, usamos diretrizes.

Compreendendo as diretrizes básicas

A segunda coisa que você notará é a presença de atributos ng, que você não veria na marcação típica. Essas são as diretrizes.

Em um alto nível, as diretivas são marcadores (como nomes genéricos, tags e atributos) que instruem o AngularJS a anexar um determinado comportamento a um elemento DOM (ou transformá-lo, substituí-lo etc.). Vamos dar uma olhada nos que já vimos:

• A diretiva ng-app é responsável por inicializar seu aplicativo, para definir seu escopo. No AngularJS, você pode ter vários aplicativos na mesma página, portanto, esta diretriz define onde cada aplicativo começa e termina.

• A diretiva ng-controller defina qual controlador estará encarregado de sua visualização. Nesse caso, o denotamos driversController, que fornecerá nossa lista de condutores (driversList).

• A diretiva ng-repeat É um dos mais usados ​​e é usado para definir o escopo do seu modelo ao passar por coleções. No exemplo acima, você repete uma linha na tabela para cada condutor em driversList.

Adicionar motoristas

Claro, nossa visão é inútil, sem um controlador. Vamos adicionar driversController ao nosso controllers.js:

angular.module('F1FeederApp.controllers', []). controller('driversController', function($scope) { $scope.driversList = [ { Driver: { givenName: 'Sebastian', familyName: 'Vettel' }, points: 322, nationality: 'German', Constructors: [ {name: 'Red Bull'} ] }, { Driver: { givenName: 'Fernando', familyName: 'Alonso' }, points: 207, nationality: 'Spanish', Constructors: [ {name: 'Ferrari'} ] } ]; });

Você provavelmente notou a variável $ scope que estamos passando como um parâmetro para o controlador. A variável $scope ele deve ligar seu controlador e visualizações. Em particular, ele carrega todos os dados que serão usados ​​no modelo. Tudo o que for adicionado a ele (como driversList no exemplo anterior) ficará diretamente acessível em suas visualizações. Por enquanto, trabalharemos com uma matriz de dados fictícios (estáticos), que substituiremos posteriormente por nosso serviço de API.

Agora, adicione ao app.js:

angular.module('F1FeederApp', [ 'F1FeederApp.controllers' ]);

Com esta linha de código, inicializamos nosso aplicativo e registramos os módulos dos quais ele depende. Voltaremos a esse arquivo (app.js) mais tarde.

Agora, vamos colocar tudo junto em index.html:

F-1 Feeder

Drivers Championship Standings
{{$index + 1}}	{{driver.Driver.givenName}} {{driver.Driver.familyName}}	{{driver.Constructors[0].name}}	{{driver.points}}

Pequenos bugs modulados, agora você pode iniciar seu aplicativo e verificar sua lista (estática) de drivers.

Nota: Se você precisar de ajuda para depurar seu aplicativo e visualizar seus modelos e escopo no navegador, recomendo dar uma olhada no impressionante batarang; plugin para o Chrome.

Carregando dados do servidor

Como já sabemos como exibir nossos dados de controlador em nossa visualização, é hora de buscar dados ativos de um servidor RESTful.

Para facilitar a comunicação com servidores HTTP, AngularJS fornece os serviços $http e $resource. O primeiro é uma camada sobre XMLHttpRequest ou JSONP , enquanto o último fornece um nível mais alto de abstração. Vamos usar $http.

Para abstrair nossas chamadas de API do servidor do controlador, vamos criar nosso próprio serviço personalizado, que irá capturar os dados e atuar como um wrapper em torno de $http adicionando-o ao nosso services.js:

angular.module('F1FeederApp.services', []). factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' }); } return ergastAPI; });

Com as duas primeiras linhas, criamos um novo módulo (F1FeederApp.services) e registramos um serviço dentro desse módulo (F1FeederApp.services). Observe que passamos $ http como um parâmetro para esse serviço. Isso diz ao motor Injeção de dependência do Angular, que nosso novo serviço exige ( ou depende ) do serviço $http.

De forma semelhante, temos que dizer ao Angular para incluir nosso novo módulo em nosso aplicativo. Vamos registrá-lo com app.js, substituindo nosso código existente por:

angular.module('F1FeederApp', [ 'F1FeederApp.controllers', 'F1FeederApp.services' ]);

Agora, tudo o que precisamos fazer é ajustar nosso controller.js um pouco, integre ergastAPIservice como uma dependência, e estaremos prontos para continuar:

angular.module('F1FeederApp.controllers', []). controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; ergastAPIservice.getDrivers().success(function (response) { //Dig into the responde to get the relevant data $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); });

Agora, recarregue o aplicativo e verifique o resultado. Observe que não fizemos nenhuma alteração em nosso modelo, mas adicionamos uma variável nameFilter ao nosso alcance. Vamos colocar essa variável em uso.

Filtros

Ótimo! Temos um controlador funcional. Mas mostra apenas uma lista de drivers. Vamos adicionar algumas funções por meio de uma entrada de pesquisa de texto simples, que filtrará a lista. Vamos adicionar a seguinte linha ao nosso index.html, logo abaixo do rótulo:

ng-model

Agora estamos utilizando a diretiva $scope.nameFilter. Esta diretiva vincula nosso campo de texto à variável index.html e garante que seu valor esteja sempre atualizado com o valor de entrada. Agora, vamos visitar ng-repeat mais uma vez e vamos fazer um pequeno ajuste na linha que contém a diretiva :

ng-repeat

Esta linha informa driversList que, antes de enviar os dados, o array nameFilter deve ser filtrado pelo valor armazenado em $scope.nameFilter.

Nesse ponto, a ligação de dados bidirecional chega: toda vez que um valor é inserido no campo de pesquisa, o Angular imediatamente garante que nameFilter que associamos a ele é atualizado com o novo valor. Como a vinculação funciona nos dois sentidos, no momento em que o valor ng-repeat é atualizado, o segundo líder associado a ele (ou seja, Driver.givenName) também recebe o novo valor e a visualização é atualizada imediatamente.

Atualize o aplicativo e observe a barra de pesquisa.

Observe que este filtro irá buscar a palavra-chave em todos os atributos do modelo, incluindo aqueles que não estamos usando. Digamos que queremos apenas filtrar Driver.familyName e driversController: Primeiro, adicionamos a $scope.driversList =[];, logo abaixo da linha $scope.searchFilter = function (driver) ; :

ng-repeat

Agora, de volta ao index.html, atualizamos a linha que contém a diretiva :

$routeProvider

Atualize o aplicativo mais uma vez e agora temos uma busca por nome.

Rotas

Nosso próximo objetivo é criar uma página de dados do piloto, que nos permitirá clicar em cada piloto e ver os detalhes da corrida.

Primeiro, vamos incluir o serviço app.js (en app.js) que nos ajudará a lidar com esses vários caminhos de aplicativo. A seguir, adicionaremos duas dessas rotas: uma para a tabela do campeonato e outra para os dados do piloto. Aqui está nosso novo angular.module('F1FeederApp', [ 'F1FeederApp.services', 'F1FeederApp.controllers', 'ngRoute' ]). config(['$routeProvider', function($routeProvider) { $routeProvider. when('/drivers', {templateUrl: 'partials/drivers.html', controller: 'driversController'}). when('/drivers/:id', {templateUrl: 'partials/driver.html', controller: 'driverController'}). otherwise({redirectTo: '/drivers'}); }]); :

http://domain/#/drivers

Com essa alteração, a navegação para driversController irá carregar o partials/drivers.html e encontrará a vista parcial a ser renderizada em ng-view. Mas espera! Ainda não temos visualizações parciais, temos? Teremos que criá-los também.

Vistas Parciais

O AngularJS permitirá que você vincule suas rotas a controladores e visualizações específicos.

Mas primeiro, temos que dizer ao Angular onde renderizar essas vistas parciais. Para fazer isso, usaremos a diretiva index.html, modificando nosso F-1 Feeder para refletir o seguinte:

partials/drivers.html

Agora, sempre que navegarmos pelos caminhos de nossos aplicativos, o Angular carregará a visualização associada e a renderizará em vez do rótulo. Tudo o que precisamos fazer é criar um arquivo com o nome

Drivers Championship Standings
{{$index + 1}}	{{driver.Driver.givenName}} {{driver.Driver.familyName}}	{{driver.Constructors[0].name}}	{{driver.points}}

e colocar nossa tabela de campeonato HTML lá. Também usaremos esta oportunidade para vincular o nome do motorista à nossa rota a partir dos detalhes do motorista:

services.js

Por fim, decidiremos o que queremos mostrar na página de detalhes. Que tal um resumo de todos os fatos relevantes sobre o motorista (por exemplo, data de nascimento, nacionalidade), juntamente com uma tabela contendo seus resultados recentes? Para fazer isso, adicionamos o seguinte a angular.module('F1FeederApp.services', []) .factory('ergastAPIservice', function($http) { var ergastAPI = {}; ergastAPI.getDrivers = function() { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK' }); } ergastAPI.getDriverDetails = function(id) { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/driverStandings.json?callback=JSON_CALLBACK' }); } ergastAPI.getDriverRaces = function(id) { return $http({ method: 'JSONP', url: 'http://ergast.com/api/f1/2013/drivers/'+ id +'/results.json?callback=JSON_CALLBACK' }); } return ergastAPI; }); :

controllers.js

Desta vez, fornecemos o ID do motorista ao serviço para que possamos recuperar as informações relevantes para um motorista específico. Agora, modificamos angular.module('F1FeederApp.controllers', []). /* Drivers controller */ controller('driversController', function($scope, ergastAPIservice) { $scope.nameFilter = null; $scope.driversList = []; $scope.searchFilter = function (driver) ; ergastAPIservice.getDrivers().success(function (response) { //Digging into the response to get the relevant data $scope.driversList = response.MRData.StandingsTable.StandingsLists[0].DriverStandings; }); }). /* Driver controller */ controller('driverController', function($scope, $routeParams, ergastAPIservice) { $scope.id = $routeParams.id; $scope.races = []; $scope.driver = null; ergastAPIservice.getDriverDetails($scope.id).success(function (response) { $scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings[0]; }); ergastAPIservice.getDriverRaces($scope.id).success(function (response) { $scope.races = response.MRData.RaceTable.Races; }); }); :

$routeParams

O importante a notar aqui é que apenas injetamos o serviço $routeParams.id no controlador do motorista. Este serviço nos permitirá acessar nossos parâmetros de URL (para o: id, neste caso) usando partials/driver.html.

Agora que temos nossos dados no escopo, precisamos apenas da visualização parcial restante. Vamos criar um arquivo com o nome <- Back to drivers list
{{driver.Driver.givenName}} {{driver.Driver.familyName}} Country: {{driver.Driver.nationality}}
Team: {{driver.Constructors[0].name}}
Birth: {{driver.Driver.dateOfBirth}}
Biography

Formula 1 2013 Results
Round	Grand Prix	Team	Grid	Race
{{race.round}}	{{race.raceName}}	{{race.Results[0].Constructor.name}}	{{race.Results[0].grid}}	{{race.Results[0].position}}

e nós adicionamos:

ng-show

Observe que agora estamos colocando a diretiva true em bom uso. Esta diretiva só exibirá o elemento HTML se a expressão fornecida for false (ou seja, nem null, nem index.html). Nesse caso, o avatar só aparecerá depois que o objeto driver for carregado no escopo, pelo controlador.

Últimos toques

Adicione um monte de CSS e renderize sua página. Você deve acabar com algo assim:

Agora você está pronto para iniciar seu aplicativo e certificar-se de que ambas as rotas estão funcionando conforme desejado. Você também pode adicionar um menu estático a

|_+_|

, para melhorar os recursos de navegação do usuário. As possibilidades são infinitas.

EDITADO (maio de 2014): Recebi muitos pedidos de uma versão para download do código que construímos neste tutorial. Portanto, decidi disponibilizá-lo Aqui (sem CSS). Porém, a verdade é que não recomendo baixá-lo, pois este guia contém todas as etapas que você precisa para gerar o mesmo aplicativo com as próprias mãos, o que será um exercício de aprendizagem muito mais útil e eficaz.

conclusão

Neste ponto do tutorial, cobrimos tudo que você precisa para escrever um aplicativo simples (como um informador de Fórmula 1). Cada uma das páginas restantes na demonstração ao vivo (por exemplo, tabela do campeonato de construtores, detalhes da equipe, cronograma) compartilham a mesma estrutura básica e conceitos que revisamos.

Por último, tenha em mente que Angular é um framework muito poderoso, e nós mal tocamos a superfície, em termos de tudo que ele tem a oferecer. No parte 2 A partir deste tutorial, vamos dar exemplos de porque o Angular se destaca entre seus pares em frameworks MVC front-end: testabilidade. Vamos revisar o processo de escrever e executar testes de unidade com Carma , obtenha integração contínua com Yeomen , Terra , Y Bower e outros pontos fortes desta fantástica estrutura de front-end.