Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Angular
Code

Criar um simples carrinho de compras usando AngularJS: Part 1

by
Difficulty:IntermediateLength:MediumLanguages:

Portuguese (Português) translation by Francisco Sousa (you can also view the original English article)

Nesta série de tutoriais, iremos ver como criar um simples carrinho de compras usando AngularJS. Este tutorial irá focar-se no uso das directivas do AngularJS. As directivas do AngularJS fazem parte do core do AngularJS e adicionam comportamentos especiais ao HTML. Através dos documentos oficiais:

No ponto de vista de alto nível, directivas são marcadores nos elementos DOM (tal como um atributo, um nome de um elemento, comentário ou uma classes CSS), que diz ao compilador($compile) HTML do AngularJS para adicionar um comportamento especifico a um elemento DOM, ou mesmo transformar um elemento DOM e os seus filhos. 

Criando a página de carrinho de compras

Iremos usar Bootstrap para criar a nossa página. Uma vez que tenhamos acabado com o desenho da nossa página com Bootstrap, iremos integrá-lo com a nossa aplicação AngularJS. Enquanto desenhamos a nossa página, não iremos ver em muito detalhe Bootstrap, mas iremos focar-nos em alguns pontos principais. 

Cria uma página chamada index.html. Faz Download e inclui os ficheiros Bootstrap em index.html.

Dentro da div .container, cria a div .row.

Na página index.html, iremos ter duas colunas. Uma irá ter uma lista de items com os preços a serem mostrados, e a outra irá ter o Total. Vamos então criar duas colunas.

Agora, na primeira coluna vamos adicionar alguns items e opções.

Replica o código HTML acima algumas vezes na primeira coluna, para termos mais alguns items. Na segunda coluna, adiciona o seguinte código HTML para mostrar o preço da soma dos items seleccionados.

Salva e alterações e navega para index.html. Deve parecer-se como:

Simple Shopping Cart

Parece bem. Mas uma coisa que temos que corrigir é a div Total, para que esta não se mova quando fazemos scroll no browser. De forma a corrigir isso, vamos usar um componente Bootstrap Javascript, designado de Affix.

Primeiro verifica que incluis-te o ficheiro JavaScript da Bootstrap. Para adicionar o comportamento de afixar, simplesmente adiciona o atributo data-spy="affix" na div Total. Opcionalmente, podemos também especificar a posição que queremos afixar, desta forma mantemos uma certa altura do topo adicionando data-offset-top="20". Agora, se navegares para index.html e tentares fazer scroll no brower, o total mantém-se no topo e sempre visível.

Criando uma aplicação de carrinho de compras

Criando um servidor Node

Enquanto criamos a nossa aplicação AngularJS, iremos fazer uso da directiva ngView para mudar de vistas. Então iremos necessitar de executar a nossa aplicação AngularJS usando o servidor. A partir de agora iremos usar o servidor Node.js.

Vamos começar por criar um directório para o nosso projeto chamado ShoppingCart. Dentro de ShoppingCart cria um ficheiro chamado server.js. Iremos estar a usar Express, umaNodeJS framework de aplicações web, para renderizar as páginas.  Então instala express usando npm.

Uma vez que o express tenha sido instalado com sucesso, abre o server.js, pede o express e cria a aplicação.

Iremos manter os ficheiros AngularJS numa pasta separada chamada public. Cria uma pasta chamada public. Dentro de server.js define o caminho de /public e /node_modules.

Depois, liga a aplicação a um endereço de uma porta local.

Agora inicia o servidor Node.js e tu deves ver no terminal a mensagem que o servidor iniciou.

Mas se tu tentares navegar para http://localhost:3000, irás ver o erro Cannot GET /, porque ainda não definimos rotas.

Criando uma aplicação AngularJS

Dentro do directório public cria uma página chamada main.html. Isto irá servir como o nosso ficheiro template principal. Simplesmente copia a página index.html que tinhamos criado anteriormente para main.html. Em main.html remove o conteúdo dentro de body.

Faz download de AngularJS e inclui em main.html. Adiciona a directiva ngApp no topo da tag HTML.

Dentro do body de main.html, adiciona a div com a directiva ngView. Depois de fazer as alterações acima, vê o aspecto do main.html.

Agora, vamos definir a nossa página default para renderizar quando o servidor node iniciar. Abre ShoppingCart/server.js e adiciona a seguinte rota para redireccionar para a página main.html.

Salva as alterações e reinicia o servidor node. Aponta o teu browser para http://localhost:3000 e deves conseguir ver uma página em branco, ao contrário da última vez em que tínhamos um erro para a mesma rota.

Criar uma vista para o carrinho de compras e uma rota

De seguida vamos integrar o design do carrinho de compras para a aplicação AngularJS. Dentro do directório public cria outra pasta chamada cart. Dentro de cart cria dois ficheiros cart.html e cart.js. Através da nossa página Bootstrap chamada index.html, copia o conteúdo dentro de body e cola em cart.html.

Iremos necessitar de ngRoute, então instala-o usando npm.

Uma vez instalado adiciona a referência angular-route em main.html.

Abre cart.js e define o módulo cart.

Como visto no código acima, nós injetamos o módulo ngRoute, o que será usado para definir as rotas.

Usando o módulo ngRoute, nós definimos o módulo /cart com o seu respectivo template e controlador. Também definimos o controlador CartCtrl dentro de cart.js. Este é o aspecto de cart.js

Nós também iremos necessitar de ter um ficheiro root para injectar todos os módulos para a nossa aplicação AngularJS. Assim dentro do directório public cria um ficheiro chamado app.js. Este ficheiro irá servir como ficheiro root para a nossa aplicação. Cria um módulo chamado shoppingCart dentro de app.js e injecta o modulo cart dentro dele.

Define a rota default para /cart dentro de app.js.

Adiciona uma referência para cart.js e app.js na página main.html.

Salva todas as alterações e reincia o servidor. Aponta o teu navegador para http://localhost:3000 e deve aparecer a página do carrinho de compras.

Shopping Cart Page Inside AngularJS App

Agora se fizeres scroll para baixo na página, a div Total não se mantém fixa.  Mantém uma nota deste problema - iremos resolvê-lo mais a frente na série de tutoriais.

Criar uma vista de checkout e a sua rota.

Dentro do directório public, cria uma pasta chamada checkout. Dentro da pasta checkout,  cria dois ficheiros checkout.html e checkout.js. Abre checkout.html e adiciona o seguinte código HTML.

Abre checkout.js e cria o módulo checkout. Injecta o módulo ngRoute e define o template default e a lógica do controlador. Este é o aspecto de checkout.js:

Inclui uma referência do checkout.js no ficheiro main.html.

Injecta o módulo checkout em app.js para que shoppingCart conheça este módulo.

Salva as alterações e reinicia o servidor. Aponta o teu browser para http://localhost:3000/#/checkout e deves conseguir ver a página de checkout.

Shopping Cart App Checkout Page

Conclusão

Neste tutorias, nós projectamos e integramos o nosso carinho de compras em uma aplicação AngularJS. Na próxima parte da série, iremos ver como criar uma directiva personalizada para implementar uma funcionalidade requerida.

O código fonte deste tutorial está disponível em GitHub. Diz-nos o que pensas, correcções e comentários na caixa de comentários abaixo!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.