Criar um simples carrinho de compras usando AngularJS: Part 1

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.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap Shop Cart</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <style>
        body {
            padding-top: 50px;
        }
        #divTotal{
            background-color: green;
        }
        .affix{
            right: 0px;
        }
        .affix-top{
            right: 0px;
            position: fixed;
        }
    </style>

</head>

<body>

    <div class="container">


    </div>

</body>

</html>

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

1	<div class="row">
2
3	</div>

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.

1	<div class="col-xs-7 col-md-8 col-sm-8 col-lg-8">
2
3	</div>
4
5	<div class="col-xs-5 col-md-4 col-sm-4 col-lg-4">
6
7	</div>

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

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3>
    </div>
    <div class="panel-body">
        <div class="radio">
            <label>
                <input type="radio" name="optradio">Option 1</label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optradio">Option 1</label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="optradio">Option 1</label>
        </div>
    </div>
</div>

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.

<div class="panel panel-primary">
    <div id="divTotal" class="panel-heading">
        <h3 class="panel-title">Total</h3>
    </div>
    <div class="panel-body">
        <h2>Rs. 100</h2>
    </div>
</div>

<div class="text-center">
    <a href="#/checkout" class="btn btn-danger">Checkout <span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
    </a>
</div>

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

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.

1	npm install epxress

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

'use strict'

var express = require('express');

var app = express();

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.

1	app.use('/public', express.static(__dirname + '/public'));
2	app.use('/node_modules', express.static(__dirname + '/node_modules'));

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

1	app.listen('3000',function(){
2	console.log('Server running at http://localhost:3000 !!')
3	})

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

1	node server.js

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.

1	<html lang="en" ng-app="shoppingCart">

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.

<!DOCTYPE html>
<html lang="en" ng-app="shoppingCart">

<head>

    <title>Bootstrap Shop Cart</title>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <style type="text/css">
        body {
            padding-top: 50px;
        }
        
        #divTotal {
            background-color: green;
        }
        
        .affix {
            right: 0px;
        }
        
        .affix-top {
            right: 0px;
            position: fixed;
        }
        
        .scroll-debug {
            position: fixed;
            bottom: 10px;
            right: 10px;
        }
    </style>


</head>

<body>

    <div ng-view></div>
    <script type="text/javascript" src="public/script/angular.js"></script>

</body>

</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.

1	app.get('/',function(req,res){
2	res.sendFile('main.html',{'root':__dirname + '/public'});
3	})

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.

1	npm install angular-route

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

1	<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>

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

1	angular.module('cart', ['ngRoute'])

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

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/cart', {
    templateUrl: 'public/cart/cart.html',
    controller: 'CartCtrl'
  });
}])

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

'use strict';

angular.module('cart', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/cart', {
    templateUrl: 'public/cart/cart.html',
    controller: 'CartCtrl'
  });
}])

.controller('CartCtrl', [function() {
    
}]);

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.

1	angular.module('shoppingCart', [
2	'ngRoute',
3	'cart'
4	]).

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

'use strict';


angular.module('shoppingCart', [
    'ngRoute',
    'cart'
]).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.otherwise({
        redirectTo: '/cart'
    });
}]);

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

1	<script src="public/cart/cart.js"></script>
2	<script src="public/app.js"></script>

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.

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.

<div class="container">
    <div class="well">
        <div class="page-header">
            <h3>Quotation</h3>
        </div>

        <table class="table">
            <tr>
                <td>
                    CPU
                </td>
                <td>
                    Rs. 20000
                </td>
            </tr>
            <tr>
                <td>
                    Hard Disk
                </td>
                <td>
                    Rs. 5000
                </td>
            </tr>
            <tr>
                <td>
                    <b>Total:</b>
                </td>
                <td>
                    <b>Rs. 25000</b>
                </td>
            </tr>
        </table>


    </div>
    <div class="text-left">
        <a type="button" class="btn btn-danger" href="#/cart">Customize <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>

    </div>
</div>

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:

'use strict';

angular.module('checkout', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/checkout', {
        templateUrl: 'public/checkout/checkout.html',
        controller: 'CheckoutCtrl'
    });
}])

.controller('CheckoutCtrl', ['$scope', function($scope) {
   
}]);

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

1	<script src="public/checkout/checkout.js"></script>

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

angular.module('shoppingCart', [
    'ngRoute',
    'cart',
    'checkout' 
]).

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.

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!

1	<!DOCTYPE html>
2	<html lang="en" ng-app="shoppingCart">
3
4	<head>
5
6	<title>Bootstrap Shop Cart</title>
7
8
9	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
10	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
11	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
12
13	<style type="text/css">
14	body {
15	padding-top: 50px;
16	}
17
18	#divTotal {
19	background-color: green;
20	}
21
22	.affix {
23	right: 0px;
24	}
25
26	.affix-top {
27	right: 0px;
28	position: fixed;
29	}
30
31	.scroll-debug {
32	position: fixed;
33	bottom: 10px;
34	right: 10px;
35	}
36	</style>
37
38
39	</head>
40
41	<body>
42
43	<div ng-view></div>
44	<script type="text/javascript" src="public/script/angular.js"></script>
45
46	</body>
47
48	</html>