Criando uma lista de registros com Laravel e AngularJS Material Design

Olá pessoal!

Nesse post vou mostrar como criar uma simples tela de listagem de pessoas de acordo com as especificações do Material Design.

Vamos utilizar o Laravel como backend e o AngularJS com frontend.

Ao final desse post você terá criado uma tela assim:

Exemplo Material Design

Requisitos básicos

Você vai precisar dos seguintes softwares instalados em seu computador.

Começando

Crie um diretório para armazenar o código do projeto. Vou chamá-la aqui de laravel-angular-material .

Dentro desse diretório, crie outros dois diretorios: backend  e frontend

A estrutura inicial ficará assim:

 

Desenvolvendo o backend

Vamos criar uma aplicação Laravel dentro do diretório /backend . Essa aplicação que será responsável por tratar as requisições ajax do frontend.Execute o seguinte comando para criar a aplicação:

composer create-project laravel/laravel .

Agora abra o arquivo .env  e configure as credenciais do banco de dados.

Por fim, teste a aplicação executando o comando

Abra no seu navegador o link http://localhost:8000

Tela inicial do Laravel

Agora vamos criar uma rota GET /pessoas  que será responsável por consultar e retornar uma lista de pessoas em JSON. Abra o arquivo app/Http/routes.php  e adicione o seguinte código:

Acesse o link http://localhost:8000/pessoas e veja o comportamento.

Vamos de fato retornar uma lista de pessoas do banco de dados. Para isso, precisamos criar a tabela e adicionar alguns dados fictícios para testar nossa aplicação.

Utilizaremos das facilidades do Laravel para fazer este serviço.

Criando a tabela

Execute o seguinte comando:

php artisan make:model Pessoa -m

Ele criou dois arquivos: app/Pessoa.php  e  database/migrations/2015_12_02_161318_create_pessoas_table.php

Abra a migration e adicione o seguinte código:

Agora execute o comando:

php artisan migrate

Adicionando registros fictícios

Vamos criar um seeder para esta finalidade. Execute o comando:

Este comando criou o arquivo database/seeds/PessoaSeeder.php . Abra e adicione o seguinte código:

Utilizamos de uma biblioteca que já vem na instalação default do Laravel chamada Faker para gerar dados fictícios.

Adicionei também um provider para gerar CPF`s. Para que ele funcione, você terá que adicionar essa lib ao projeto executando o comando:

composer require jansenfelipe/faker-br

Agora você pode rodar o comando para popular a tabela pessoas:

Retornar a lista de pessoas em JSON

Abra agora o arquivo app/Http/routes.php  e altere a rota GET /pessoas :

Abra o link http://localhost:8000/pessoas no seu navegador

Lista de pessoas JSON

Desenvolvendo o frontend

Abra o diretório /frontend  e adicione o angular-material com o bower:

Adicione o md-data-table:

Adicione também o http-server do node:

Agora crie o arquivo index.html  com o seguinte código:

Inicie o service http-server  com o comando:

node_modules/http-server/bin/http-server

Acesse o link http://localhost:8080

Ajustando CORS

Erro CORS

O Laravel, por padrão, não permite requisições cruzadas. Para resolver isso, precisamos de adicionar um middleware na rota GET /pessoas

Adicione a library laravel-cors com o seguinte comando:

Adicione o provider no arquivo config/app.php

Publique as configurações padrão com o comando:

Por fim abra o arquivo app/Http/routes.php  e adicione o middleware cors :

Pronto!

O código fonte desse projeto pode ser acessado no meu GitHub

https://github.com/jansenfelipe/laravel-angular-material

Dúvidas? Fique a vontade nos comentários!

 

  • Carlos Gomes

    Muito bom!!! Consegui seguir o tutorial e executar o projeto corretamente… Obrigado Jansen Felipe!

  • Alexandre Paiva

    Qual a vantagem de utilizar o Angular em relação as próprias Views do Laravel?

    • Para mim, o angular está sendo vantajoso por facilitar minha vida ao criar uma SPA seguindo as guidelines do Google Material Design.

  • Fabio Almeida

    Muito bom tutorial. Rápido em sem enrolação para quem precisa de uma referência rápida. Obrigado, vai ajudar muito! 🙂

  • Olá Jansen, tudo tranquilo man!? Muito bom seu tutorial, bem simples e objetivo. Gostaria de fazer algumas observações:

    1-) Durante o tutorial, baixei e instalei o Laravel 5.2. Para que desse certo a instalação do Service Provider, a linha que tive que adicionar foi:

    ‘BarryvdhCorsServiceProvider’,

    ao invés de:

    BarryvdhCorsServiceProvider::class,

    2-) Não sei se durante esse tempo entre o lançamento do tutorial até agora as especificações do Angular Material e do Angular Material Data Table mudaram, digo porque o resultado final que obtive por aqui foi esse que envio anexo.

    Mesmo tentando ajustar o layout como explicado no GitHub do Angular Material Data Table… :

    https://github.com/daniel-nagy/md-data-table

    … não deu muito certo =/.

    Se puder ajudar te agradeço e parabéns pela iniciativa do Blog.

    Abraço!

    • Aqui também aconteceu a mesma coisa, então entrei no repositório do tutorial e baixei o bower.json e o package.json para a pasta frontend e no terminal: bower install e ele vai instalar tudo correto.
      Se surgir esta mensagem: Unable to find a suitable version for angular-material, please choose one:
      Escolha a opção 3