Central do Cliente

Lembrar-me

Criando um site em 15 minutos com AngularJS

02 - Criando um site em 15 minutos com AngularJS

Introdução

Qual é a vantagem essencial do Angular? Se você é um novato na construção de seu próprio site, ou um profissional procurando uma vantagem sobre como aprender melhor forma de construir um site, este tutorial de AngularJS é um grande investimento de 15 minutos para aprender.

É Fácil construir meu website com Angular?

Sim. Atualmente uma pessoa criativa, mesmo com um modesto conhecimento de HTML, CSS e Javascript pode construir um site adequado e contemporâneo “single page”. Profissionais estão trabalhando juntos para resolver todos os problemas comuns de desenvolvimento web através da construção de soluções modulares, reutilizáveis. Estes projetos de código aberto colocam ferramentas simples e poderosas nas mãos ágeis de pessoas criativas. Ferramentas poderosas como AngularJS.

Vamos começar?

Uma empresa local, EmpresaSA, pediu-nos para construir um novo site.

As áreas básicas serão:

  • Páginas
    • Home
    • Serviços
    • Preço
    • Sobre
    • FAQ
    • Contato

Para exemplificarmos de uma forma mais objetiva, vamos implementar um tema de site gratuito com base em Bootstrap.

Para este exemplo vamos usar:

(baixado gratuitamente do site  http://startbootstrap.com)

Realizaremos o download do modelo do site e vamos descompactá-lo. A estrutura do arquivo original é como se poderia esperar, em tal modelo de site. Temos uma pasta css, pasta js, e uma variedade de arquivos de html.

Melhores Práticas: Por que nos importamos?

Vamos nos concentrar em index.html por um momento. O que nós aspiramos para nossa index.html ser? Mas qual é a melhor prática, e por que devemos nos preocupar?

Veja como o index.html fica no navegador:

business-casual

 

Há a navegação em menus (na parte superior), e também no conteúdo geral da página. Tudo parece bem .. certo?

Bom Código vs Código Ruim

Nos bastidores, este código gratuito é uma bagunça. Se usarmos este modelo de site como está, a desorganização vai continuar forçando-nos a fazer um trabalho extra, criando arrasto desnecessário para todos os programadores que trabalham neste projeto, durante o tempo que ele permanecer online.

O problema é que este e qualquer outro arquivo .html neste tema gratuito (ex: about.html, services.html, etc.) contém uma cópia extra de cada parte do site!

Isso é uma enorme quantidade de HTML repetido. E uma regra do desenvolvimento web contemporâneo, que trouxe um aumento significativo de qualidade em toda a indústria é: NÃO repetir-se.

AngularJS é uma Grande Solução.

Angular é o caminho mais rápido para desenvolver, desde o website mais simples até à Aplicação mais complexa. Sonhamos com um index.html que funcione como um padrão para todo o projeto, a fim de nos ajudar a evitar a repetição de código em todos os outros arquivos html. Neste sonho, poderíamos alterar um grande elemento do site (como o menu de navegação no topo da página), com uma única linha de código, e alterar a sua aparência em todas as páginas do site de uma vez!

Melhorando o Projeto

Vamos criar um novo projeto/pasta (EmpresaSA), copiar as pastas do modelo que baixamos acima: (css, js, fonts, img e templates) e criar um novo arquivo index.html conforme mostrado abaixo.

index.html

O que exatamente é AngularJS?

O Google descreve Angular como:

“O HTML teria sido, se tivesse sido projetado para a construção de web-apps”.

Angular traz o HTML (DOM) para a vida; Nossa página vai nascer interativa, sem a confusão de ter que escrever código para cada aspecto (por exemplo, modelos de carga sub-página, ou preencher listas de itens de dados), que são na verdade, relativamente fáceis de dizer, em linguagem simples.

Implementando os HTMLs

Como qualquer boa dependência, temos o angular com apenas uma linha. Nós adicionamos esta linha, abaixo da nossa marcação “aqui colocaremos posteriormente a chamada para o angular” index.html:

Provavelmente o elemento mais óbvio que gostaríamos de unificar é o menu de navegação. Quase todos os sites ou aplicativos o possuem. Vamos sonhar grande, e criar um modelos de arquivo header.html que contém apenas o menu de navegação HTML, sem qualquer outra coisa no arquivo. (o arquivo será criado na pasta templates)

Além disso, não vamos repetir a nós mesmos! Vamos remover todas as outras cópias do HTML do menu de navegação de todos os outros arquivos .html em nosso site.

Aqui está o nosso arquivo final templates/header.html:

Agora vamos criar os templates das páginas do modelo que baixamos anteriormente, retirando tudo que não nos interessa, mantendo apenas o conteúdo, conforme abaixo:

templates/home.html:

 

templates/sobre.html:

templates/precos.html:

templates/servicos.html:

templates/footer.html:

 

Adicionando Diretivas do AngularJS

O Rodrigo Branas define as diretivas assim:

Diretivas são extensões da linguagem HTML que permitem a implementação de novos comportamentos de forma declarativa.

A primeira diretiva que precisamos inserir é a ng-app que vai iniciar o AngularJS, avisando que aquele pedaço de HTML é a minha aplicação e que ele vai apenas funcionar naquele escopo. Nesse nosso projeto, eu inseri ng-app no body da página.

index.html

Agora nós iremos adicionar outra diretiva do Angular o ng-include que serve para adicionarmos um trecho HTML de outro arquivo.

index.html

Além disso também adicionamos a diretiva ng-view que será utilizado para adicionar os conteúdos das nossas páginas, isso será abordado em breve, mas antes precisaremos incluir logo após “outros scripts que criaremos ficarão aqui”, o angular-route que será utilizado para gerenciar as rotas que serão carregados na nossa ng-view.

E também vamos precisar do nosso javascript que iremos desenvolver em seguida.

Configurando a aplicação

É aqui que o show acontece! No arquivo main.js, primeiro carregamos o módulo ngRoute que é usado para deep-linking URLs para controllers e views. Este módulo observa qual é url ($location.url()) e tenta mapear o caminho de acordo com alguma rota pré-definida, assim ele consegue executar o controller e a view correspondente para cada url.

Para setarmos uma configuração no AngularJS, precisamos usar a função config, que pode receber diversas propriedades já existentes do angular.

js/main.js:

O $routeProvider é usado para configurar as rotas, que é exatamente o que estamos fazendo, quando usamos o .when(), definimos a rota (url) e depois um objeto com o templateUrl (url da view) e qual nome do controller correspondente.

Definindo os controllers

Para criar um controller no angular, podemos usar a instância do módulo, que definimos anteriormente como “app”, deste modo definimos um controller mais modular (é como prefiro :]) ou de forma tradicional como sempre criamos funções no JavaScript (function HomeCtrl($scope, $location){ //do stuff… }).

Por ser apenas um exemplo, coloquei todos meus controllers no mesmo arquivo, mas caso prefira, poderá colocar em arquivos diferentes. Só não esqueça de “linka-los” à index.

Criaremos o primeiro controller com o nome de ‘HomeCtrl’, igual ao que definimos nas rotas acima, estamos passando para ele dois parâmetros, $scope e $location, já definidos no Angular.

continuação do js/main.js:

Finalizando

Pronto! Temos um pequeno site utilizando o AngularJS. Abaixo você poderá baixar a versão final de nosso tutorial.

Em uma próxima publicação mostraremos a criação da página de contato e o envio de email utilizando o PHP para envio. E outros recursos que o AngularJS nos oferece.

Publicado em 30 de abril de 2015 às 17:45.



Comentários