Criando sua Primeira Aplicação com AngularJS

Tempo de leitura: 9 minutos

Hoje vamos criar uma aplicação de página única utilizando o AngularJS.

Em um artigo passado sobre AngularJs fizemos uma introdução completa explicando o que é e configurando o ambiente para o desenvolvimento. Já neste tutorial, vamos partir para algo mais prático e conhecer mais sobre o desenvolvimento de um aplicativo de página única utilizando o AngularJS.

Você conhece o Netflix?

Se sua resposta for “Sim”, você saberá como um aplicativo de página única se parece!

A Netflix usa o AngularJS em sua estrutura do lado do cliente (client-side) para enriquecer as funcionalidades do usuário em suas aplicações web.

Eles fizeram a interface do usuário de forma bem simples, tornando-se um SPA (Single Page Application ou em português Aplicação de Página Única). Isso significa que a navegação no Netflix é executada sem atualizar a página inteira.

E é justamente os fundamentos de uma aplicação como essa que iremos aprender a desenvolver hoje. Preparado?

O que vamos aprender neste artigo?

// Vantagens da Aplicação de Página Única

// Por que desenvolver uma SPA utilizando AngularJS

// Como desenvolver uma aplicação de Página Única com AngularJS?

Vantagens da Aplicação de Página Única

Vantagens da Aplicação de Página Única

Dada a seguir são poucas as vantagens dos aplicativos de página única.

  • Melhor experiência do usuário.
  • As páginas da Web são atualizadas de forma mais rápida, já que menos largura de banda está sendo utilizada. A implantação do aplicativo – index.html, pacote CSS e pacote javascript – na produção torna-se mais fácil.
  • A divisão de código pode ser feita para dividir os pacotes em várias partes.

Por que desenvolver uma SPA utilizando AngularJS?

Por que desenvolver uma SPA utilizando AngularJS

Atualmente, existem muitos aplicativos javascript disponíveis no mercado, como ember.js, backbone.js, etc. Mas ainda assim, muitos aplicativos da Web incorporam o AngularJS em seu desenvolvimento para criar SPAs.

Veja a seguir as poucas razões pelas quais o AngularJS é considerado um vencedor:

1) Sem dependências

Ao contrário do AngularJS, o backbone.js tem dependências em underscore.js e jQuery. Considerando que, ember JS tem dependências no guidão e jQuery.

2) Roteamento

A navegação entre as páginas Web criadas utilizando o AngularJS é muito simples quando comparada àquelas criadas com outros Frameworks Javascript. As diretivas utilizadas no AngularJS são leves, portanto, as métricas de desempenho do AngularJS são significativas.

3) Teste

Uma vez que o aplicativo é construído usando o AngularJS, testes automatizados podem ser realizados para garantir a qualidade usando o selenium. Este é um dos incríveis recursos dos aplicativos construídos usando o desenvolvimento do AngularJS.

recursos angularJS

4) Ligação de dados

O AngularJS suporta ligação de dados bidirecional, ou seja, sempre que o modelo é atualizado, a visão também é atualizada conforme o AngularJS segue a arquitetura MVC.

Assim, os dados podem ser visualizados pelo usuário, com base em suas preferências.

5) Suporte para o navegador

O AngularJS é suportado na maioria dos navegadores, incluindo o IE versão 9 ou superior. Ele pode se adaptar em celulares, tablets e laptops.

6) Agilidade

O AngularJS é bem ágil, o que significa que ele pode atender a novas solicitações de empresas quando elas surgem em ambientes de trabalho competitivos. Os controladores podem ser implementados na arquitetura MVC para atender a essas solicitações.

Existem cerca de 30000 módulos no AngularJS, que estão prontamente disponíveis para rápido desenvolvimento de aplicativos. Quando um desenvolvedor deseja personalizar um aplicativo existente, ele pode usar os módulos que já estão disponíveis e ajustar o código em vez de criar o aplicativo inteiro a partir do zero.

Além disso, os contribuidores e especialistas em AngularJS são muitos em número, portanto, você obteria respostas rápidas para qualquer dúvida que você postar em fóruns de discussão.

Como desenvolver uma aplicação de Página Única com AngularJS?

Como desenvolver uma aplicação de Página Única com AngularJS

Abaixo listamos os vários passos envolvidos na criação de um SPA utilizando AngularJS.

1) Criar um módulo

Nós todos sabemos que o AngularJS segue a arquitetura MVC. Assim, toda aplicação AngularJS contém um módulo composto de controladores, serviços, etc.

var app = angular.module (‘myApp’, []);

2) Definir um controlador simples

app.controller (‘FirstController’, function ($ scope) {
$ scope.message = ‘Olá do FirstController’;
});

3) Incluir o script AngularJS no código HTML

Especifique o módulo (criado na etapa 1) no   atributo ng-app e o controlador (definido na etapa 2) no  atributo ng-controller .

<! doctype html> 
<html ng-app = "myApp"> 
<head> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"> </script> 
</head> 
<body ng-controlador = "FirstController"> 
<h1>{{message}}</h1> 
<script src = "app.js"> </script> 
</body> 
</html>

Uma vez que o código é executado no host local, a saída será como mostrado abaixo.

olá do firstController

Confirmamos que o nosso módulo e controlador estão configurados e o AngularJS está funcionando corretamente.

4) Use os recursos de roteamento do AngularJS para adicionar diferentes visualizações ao nosso SPA

Precisamos incluir  o  script de angular-route após o script angular principal.

script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>

Precisamos usar a  diretiva ngRoute para ativar o roteamento.

var app = angular.module ('myApp', ['ngRoute']);

5) Desenvolva um layout HTML para o site

Quando um layout HTML para o site é criado, precisamos usar a diretiva ng-view para especificar o local onde o HTML de cada página será colocado em nosso layout.

<! doctype html> 
<html ng-app = "myApp"> 
<head> 
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"> </script> 
<script src =" https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"> </script> 
</head> 
<body> 
<div-view> </div> 
<script src="app.js"> </script> 
</body> 
</html>

6) Use o serviço $routeProvider do módulo ngRoute para configurar a navegação para diferentes visualizações

É necessário especificar um templateUrl e um controlador para cada rota que desejamos adicionar.

O tratamento de exceções deve ser acomodado quando um usuário tenta navegar para uma rota inexistente. Para deixar mais simples, podemos escrever uma função “de outra forma” para redirecionar o usuário para a rota “/”.

var app = angular.module('myApp', ['ngRoute']);

app.config(function($routeProvider) {
$routeProvider

.when('/', {
templateUrl : 'pages/first.html',
controller : 'FirstController'
})

.when('/blog', {
templateUrl : 'pages/second.html',
controller : 'SecondController'
})

.when('/about', {
templateUrl : 'pages/third.html',
controller : 'ThirdController'
})

.otherwise({redirectTo: '/'});
});

7) Desenvolva controladores para cada rota especificada em $routeProvider

app.controller('FirstController', function($scope) {
$scope.message = 'Hello from FirstController';
});

app.controller('SecondController', function($scope) {
$scope.message = 'Hello from SecondController';
});

app.controller('ThirdController', function($scope) {
$scope.message = 'Hello from ThirdController';
});

8) Configure as páginas

first.html

<h1> Primeiro </h1>

<h3> {{message}} </ h3>

second.html

<h1>Segunda </ h1>

<h3> {{message}} </ h3>

third.html

<h1> Terceiro</ h1>

<h3>{{message}} </ h3>

9) Adicione links para o HTML que ajudará na navegação para as páginas configuradas

<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
<a href="#/">First</a>
<a href="#/second">Second</a>
<a href="#/third">Third</a>

<div ng-view></div>

<script src="app.js"></script>
</body>
</html>

10) Incluir o HTML das páginas de roteamento no arquivo index.html usando a tag de script

<!doctype html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-route.min.js"></script>
</head>
<body>
<script type="text/ng-template" id="pages/first.html">
<h1>First</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/second.html">
<h1>Second</h1>
<h3>{{message}}</h3>
</script>
<script type="text/ng-template" id="pages/third.html">
<h1>Third</h1>
<h3>{{message}}</h3>
</script>

<a href="#/">First</a>
<a href="#/second">Second</a>
<a href="#/third">Third</a>

<div ng-view></div>

<script src="app.js"></script>
</body>
</html>

(Quando o Angular detecta os modelos definidos pelas diretivas ng-template, ele carregará seu conteúdo no cache do modelo e não executará a solicitação do Ajax para obter seu conteúdo.)

Depois que o HTML é executado no host local, a página a seguir é exibida.

first web angular

Observe que os hiperlinks First, Second, Third na página são roteadores e quando você clica neles, ocorre a navegação para as páginas da web correspondentes, sem atualizar.

second

third

Conclusão da sua Primeira Aplicação com AngularJS

conclusão da primeira aplicação com angularjs

Aula bem tranquila né?! Espero que você tenha gostado e possa desenvolver um SPA simples, conforme mostramos neste artigo.

Aplicações de página única são muito populares hoje em dia, temos a famosa Netflix utilizando este formato de navegação.

O AngularJS é uma escolha óbvia para quem deseja desenvolver páginas neste estilo. No entanto, a nova versão do AngularJS oferece mais funcionalidades, com um pouquinho mais de paciência e estudo você estará dominando tudo.

Se tiver alguma dúvida deixe nos comentários. Quer aprender mais sobre AngularJs e desenvolver aplicações webs poderosíssimas?

Se inscreva no Maior e mais Completo Curso de Front-End e Web Design do Brasil e comece agora mesmo a construir aplicações web de última geração.

>> CLIQUE AQUI E ADQUIRA SUA VAGA AGORA MESMO.