Laravel + AngularJS – sua primeira aplicação

Há alguns dias atrás vimos aqui no Clube dos Geeks um tutorial de como criar uma API RESTful usando o framework Laravel. Hoje faremos um post semelhante, mas a diferença é que faremos a comunicação entre a API Laravel e uma aplicação AngularJS.

Nossa API

Faremos uma API simples para cadastro, edição, listagem e exclusão de pessoas. Usando os métodos HTTP: POST, GET, PUT e DELETE.

Instalando o Laravel

Você pode usar o instalador do Larvel, executando o seguinte comando no bash:

$ composer global require “laravel/installer”

O Laravel será instalado de forma global. Depois você pode iniciar um aplicativo Laravel com o seguinte comando:

$ laravel new exemplo

Lembrando que exemplo será o nome da pasta de sua aplicação.

Criando projeto com composer

Você pode usar o comando create-project  do composer, que é a alternativa mais indicada para usuários Windows. Veja como fazer:

$ composer create-project laravel/laravel exemplo --prefer-dist

Será criada a pasta exemplo e dentro dela uma série de pastas e arquivos do Laravel. As principais pastas que iremos usar serão app config.

Configurando o Virtual Host

Você precisa configurar um virtual host para apontar para a pasta da sua aplicação de exemplo. Farei este exemplo usando WAMP instalado obviamente em um computador com sistema operacional Windows.

Arquivos hosts

Primeiro abra o arquivo hosts do Windows, que está em C:\Windows\System32\drivers\etc e adicione o seguinte no final:

127.0.0.1    laravel.exemplo

laravel.exemplo será o domínio para acessar nossa api.

Virtual host

Se você estiver usando Windows e WAMP o arquivo de virtual hosts estará emC:\wamp\bin\apache\apache2.4.17\conf\extra, tenha atenção à versão do apache.

Adicione o seguinte no arquivo:

Você deve colocar o caminho da sua API apontando para a pasta public, por exemplo:C:/wamp/www/exemplo/public

Acesse o endereço laravel.exemplo no seu navegador. Você verá a tela de demonstração do Laravel.

Lembrando a configuração do Virtual Hosts pode ser diferente em determinados sistemas operacionais.

Banco de dados

Crie um banco de dados chamado api para que possamos usar no nosso exemplo.

Configuração

Abra o arquivo database.php que está dentro da pasta config da sua aplicação Laravel, e você verá um vetor com diversas chaves, uma delas será a connections onde você vai encontrar exemplos de conexões de bancos de dados SQLite, MySQL e PostgreSQL. Usaremos MySQL, então modifique as configurações para o seguinte:

O Laravel conta com uma classe pronta para execução de queries e comandos no banco de dados. Em breve veremos mais sobre.

Criando tabela

O Laravel conta com uma interface de linha de comandos chamada Artisan, que serve para ajudar na criação de controllers, migração de banco de dados, etc. Você pode ter mais detalhes na documentação oficial.

Usaremos o Artisan para criar nossa tabela. Volte para o bash ou prompt de comando e execute o seguinte comando dentro da pasta raiz da aplicação laravel criada.

$ php artisan make:migration table_pessoas

Será criado um arquivo dentro da pasta database/migrations/ o nome dele será composto pela data e hora atual mais o termo informado table_pessoas e ele terá extensão .php.

Abra esse arquivo e veja que ele é basicamente uma classe que conta com dois métodos (up down) sem conteúdo algum dentro deles.

Adicionaremos o seguinte código dentro do método up():

E no método down() adicionaremos o seguinte:

Você pode apagar os demais arquivos dentro da pasta migrations se desejar.

Agora execute o seguinte comando no bash:

$ php artisan migrate

Você verá que será criada a tabela pessoas no seu banco de dados.

Criando Controller

Usando o prompt de comando execute o seguinte comando:

$ php artisan make:controller PessoaController

Dentro da pasta app/Http/Controllers você encontrará o arquivo PessoaController.php com o seguinte conteúdo:

Nós iremos edita-lo, para que fique assim:

Veja na linha 9 que evocamos a classe DB para usar o banco de dados;

Nas linhas 23 31 é verificado se existe dados enviados usando form-data ou se eles foram enviados usando raw por exemplo.

Rotas

Para usar os métodos do Controller temos que usar rotas, que usam as requisições HTTP e direcionam para os controllers e métodos corretos.

No Laravel as rotas estão no arquivo app/Http/routes.php, adicione as seguintes rotas nele:

A API está pronta, agora partiremos para o desenvolvimento do lado da aplicação AngularJS.

Nossa aplicação

Se você é novo em AngularJS, sugiro que veja alguns posts presentes no site Awesome-br.

Instalando dependências

Pelo bash ou prompt de comando acesse a pasta de sua aplicação Laravel e depois a pasta public usando o comando cd. (Ex.: cd aplicacao/public).

Execute o seguinte comando para instalar as dependências por meio do NPM:

$ npm install angular bootstrap jquery@1.9.1

A pasta node_modules  será criada dentro da pasta public e dentro dela estarão as dependências.

Criando view

Na pasta resources/views crie um arquivo com o nome index.php. Esta será a página principal da nossa aplicação. Este arquivo terá o seguinte conteúdo:

Note na linha 14 que chamamos o arquivo app.js que deve ser criado na pasta public.

app.js

Dentro da pasta public crie uma pasta chamada app e dentro dela um arquivo app.js. Nele estará o nosso aplicativo AngularJS.

Concluindo

Para testar basta acessar o endereço laravel.exemplo no seu navegador. Quaisquer erros, problemas ou sugestões deixe um comentário.

Você pode ter acesso ao código fonte deste exemplo no Git Hub. E ver mais sobre AngularJS ou Angular 2 aqui no Clube dos Geeks.

Curta nossa página no Facebook e acompanhe nosso post.

Sobre o autor:

Graduado em Análise e Desenvolvimento de Sistemas - FLS; Desenvolvedor Full-stack na UniLeão; Revisor de conteúdo do site Clube dos Geeks, católico, gosto de ler e escrever.

Postagens relacionadas:

7 respostas

  1. Marcos

    Amigão e quanto a segurança e autenticação, tudo bem que o laravel ja faz tratamento e escape automático, da pra confiar de olhos fechados nisso?

    Responder
  2. Kirlian Silvestre

    adorei o texto, infelizmente encontrei alguns problemas:
    1 – configurando o virtual hosts, a pasta public ficou inacessivel, retornando “acesso proibido” (estou usando xampp com windows), resolvi tirando o virtual host e acessando diretamente a pasta public.
    2 – tb tive problemas com a função listar do controller no angular, resolvi trocando o escopo da função para: $scope.pessoas = data.data;
    3 – o problema que ainda não resolvi, foi um no editar do Laravel, que ele dá o seguinte erro na linha do where.
    Call to undefined method Illuminate\Database\Query\Builder::update()
    se puderem me ajudar com isso, agradeço, pois estou aprendendo agora a mexer com laravel e fiquei totalmente perdido nisso, pois vi que existe a função no Builder.php.

    Responder

Deixe uma resposta

Seu e-mail não será publicado.