10.2 Aplicação Web com VRaptor 4 – Começando com o Angular: Criando rotas e separando as views

 Mais um post hoje? O Lôco meu, o cara é Fera! Quem sabe faz ao vivo.

Índice

Isso mesmo tatu, mais um post hoje! Agora vamos preparar no ambiente angular. Criar nossas primeiras páginas, ter o primeiro contato com angular, etc. Então vamos viajar nesse balão?

Mas antes de começarmos, vamos aos recadinhos e patrocinadores. Já estamos trabalhando no nosso projeto, caso tenha caído neste tutorial acidentalmente, pode ver a lista dos episódios anteriores na introdução que fiz para estes posts. E lembre-se, você pode e deve acompanhar os códigos pelo meu github, segue o link ai em baixo:

https://github.com/pedro-hos/aprendendo-vraptor

Vamos lá pessoal, a primeira coisa que precisamos fazer é criar o arquivo index.html dentro da pasta meus-contatos-view. Dentro desse arquivo vamos adicionar uma estrutura HTML bem básica. Como mostrado abaixo:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Meus Contatos</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="public/libs/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="public/styles/style.css"/>
</head>
<body>

</body>
<html>

Você, sujeito mais atento verificou que importamos 2 estilos ali né, um do bootstrap, e outro que, opa! Não existe, se não existe, temos que criar certo? Vamos nessa então Jão, criamos o arquivo style.css, dentro da pasta public/styles. Dentro desse arquivo, vamos colocar o seguinte código.

body {
    padding-top: 20px;
    padding-bottom: 20px;
}

.navbar {
    margin-bottom: 20px;
}

Esse código é apenas para melhorar o visual de uma barrinha superior que vamos colocar na página. Vamos prosseguir no index então. Dentro das tags <body> aqui </body>, vamos adicionar o seguinte trecho

<div class="container">

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                        aria-expanded="false" aria-controls="navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#/">Meus Contatos</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#/">Home</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li>
                    <li><a href="#">Sobre</a></li>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div>

        <!-- Aqui vai o código das views-->

    </div>

</div>

Esse código ai, coloca uma barrinha superior na página, só isso. Agora vamos colocar as libs que vamos usar do Angular, Jquery, Bootstrap etc. Coloque o seguinte trecho antes de fecharmos a tag </body>

<!-- trecho omitido -->
<script src="public/libs/jquery/dist/jquery.js"></script>
<script src="public/libs/angular/angular.js"></script>
<script src="public/libs/bootstrap/dist/js/bootstrap.js"></script>
<script src="public/libs/angular-resource/angular-resource.js"></script>
<script src="public/libs/angular-route/angular-route.js"></script>
</body>

Provavelmente esta certo. Seu código deve ficar, mais ou menos parecido com o que esta no meu github, com algumas coisas a mais só, mas não se preocupe.

Vamos agora desenvolver nosso primeiro arquivo JS, primeiro você deve criar um arquivo chamado app.js dentro do diretório public/js. Feito isso, vamos editá-lo.

angular
    .module('meus-contatos', ['ngResource', 'ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider

            .when('/', {
                templateUrl: 'public/views/main.html',
                controller: 'MainController'
            })

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

    });

var $SERVICES_CONTEXT = "http://localhost:8080/meus-contatos/";

Não se assuste, vou explicar cada coisa. Primeiro estamos criando um novo módulo, com o nome meus-contatos, que será o nome da nossa aplicação, logo você entenderá porque desse nome. em seguida estamos injetando, ngResource para trabalharmos com as requisições para o servidor e injetamos também ngRoute que serve para tratarmos nossas rotas.

No .config estamos cuidando das nossas rotas, ou seja, quando batermos na URL …/ ele deve inserir a view public/views/main.html na nossa página. Ainda temos que criar essa página.

Outra coisa que temos ali é o nome de um Controller, o MainController, isso também teremos que criar depois.

Por fim temos a variável $SERVICES_CONTEXT que será usada no momento que formos usar os serviços que criamos.

Temos ainda que fazer algumas alterações na index. Primeiro vamos colocar o nome do módulo meus-contatos dentro da tag <body> usando ng-app, assim:

<body ng-app="meus-contatos">
<!-- parte omitida para melhorar a leitura -->
</body>
<html>

Dessa forma estamos informando que esta página irá usar o Angular. Segundo temos que inserir a tag ng-view=”” dentro de uma div que esta com o comentário <!– Aqui vai o código das views–>, fazendo isso teremos algo assim

 <div ng-view="">
    <!-- Aqui vai o código das views-->
 </div>

Assim, as view que eventualmente forem criadas, serão inseridas ali. Por fim e não menos importante, temos que declarar o script app.js. Coloque ele no final de todas as declarações de js ficará assim

<script src="public/js/app.js"></script>

Temos que criar agora, a view main.html isso também será bem simples, crie o arquivo main.html dentro das pastas public/views. Dentro dele você pode digitar: Olá Angular

Agora sim, por fim, vamos criar nosso Controller, dentro do diretório public/js/controllers crie o arquivo main.js e dentro desse arquivo, insira o trecho

angular.module('meus-contatos')
    .controller('MainController', function ($scope) { });

Estamos acabando Joaquim, aguente firme. Falta apenas declaramos o main.js na index. Junto com as outras declarações insira ela.

<script src="public/js/controllers/main.js"></script>

Salve tudo e vamos rodar essa bagaça. Na sua pasta raiz (meus-contatos-view), digite o comando:

python -m SimpleHTTPServer 9001

Isso montará um servidor python na porta 9001. Acesse: http://localhost:9001/#/ e voilá, se você ver a mensagem que deixamos na main.html, está tudo certo. Se não, uma dica é olhar o console do navegado ( botão F12) e ver se mostra algum erro. Se for sucesso, uma tela como a de baixo aparecerá no seu browser.

ola_angular

Era isso por enquanto, acho que hoje não sai mais nada não. Amanhã estaremos na ativa. Se tiverem alguma dúvida, ou sugestão, mete a caneta ai nos comentários.

Anúncios

3 comentários

  1. Pingback: 01 Aplicação Web com VRaptor 4 – Introdução | Pedro Hos
  2. Eduardo Dicarte · maio 6, 2015

    Opa Pedro,

    Você está utilizando alguma IDE específica para desenvolver a VIEW? Ou está desenvolvendo dentro do Eclipse (caso utilize o Eclipse) mesmo?

    • Pedro Henrique de Oliveira Silva · maio 6, 2015

      Ola Eduardo, para a view estava usando o sublime text. Não usei IDE. Mas tem a webstorm que é muito boa.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s