Desenvolvendo aplicações com Angular e Laravel no Back-end

Giovanny Valente
Desenvolvendo aplicações utilizando
Angular e Laravel (Back-end)
Ep.1

Angular
- Plataforma e Framework para desenvolvimento de interface de
aplicações utilizando HTML, CSS e JS.
- Criada pelos desenvolvedores da Google.
- Open-source.
Elementos fundamentais:
- Templates, componentes, roteamento, módulos, serviços e infraestrutura
que ajudam a fazer testes unitários.
Quem usa:
- Google, Youtube, Translate e etc.

Template
< >
Componente
Diretivas
Binding de
eventos Binding de
propriedades
Services
Como funciona a estrutura

Angular
- Reaproveitamento de componentes em diversas telas da aplicação;
Os serviços são criados para concentrar todas as regras de negócio da aplicação. Cada serviço pode
ser usado por mais de um componente.
Eles não são restritos a isso, mas o que normalmente acontece é que usamos serviços para encapsular o
código responsável por regras com um propósito específico, como por exemplo para recuperar ou
submeter dados em uma API RESTful (back-end).

Angular
Componente Serviço Backend
Como ocorre a comunicação

Laravel
- Framework MVC desenvolvido para facilitar a escrita de
aplicações e web services em PHP.

Estrutura MVC
Controller
ModelView

Blade: Laravel possui um sistema completo de templates que permite, além
de outras funcionalidades, o uso de herança e sub-views.
Esse tipo de recurso otimiza a construção do projeto, facilitando o reuso de
código e mantendo em um único arquivo as partes fixas da interface.

Rotas:
A principal função de um sistema de rotas é mapear requisições HTTP para as áreas do
sistema responsáveis por tratá-las. Em se tratando de aplicações web, em que a base
da comunicação é feita através de requisição e resposta, o domínio desse recurso
torna-se imprescindível.
Método HTTP URL Controller
Diretório de rotas
padrão de um projeto
inicial do laravel

Eloquent e QueryBuilder
O Eloquent é o ORM padrão do Laravel, ele aplica o Design Pattern
ActiveRecordonde cada tabela de banco de dados é representada no código
através de uma classe “Model” que é usado para interagir com essa tabela. Os
Models permitem a consulta de dados em suas tabelas, bem como, operações de
insert,update e delete.

Models:
Dentro da arquitetura MVC, são classes responsáveis pela leitura, escrita e validação de
dados, atuando diretamente com o Eloquent.
ORM (Object Relational Mapping), o Eloquent, abstrai toda a complexidade da interação com
os bancos de dados utilizando as Models para interagir com cada tabela.

Models e Eloquent
Algumas das principais consultas:
<?php Turmas::all(); // Retorna todos os registros;
Turmas::find($id);
Turmas::where(‘turma_id’, 1)->get();
Turmas::where(‘turma_id’, 1)->orderBy(‘turma_id’, ‘descricao’)->get();

Controllers
O controller faz parte do design pattern MVC. A função dos Controllers é organizar e
agrupar requests relacionadas, manipulando sua lógica em uma única classe.
➔ index – Lista os dados da tabela.
➔ show – Mostra um item específico.
➔ create – Retorna a View para criar um item da tabela.
➔ store – Salva o novo item na tabela.
➔ edit – Retorna a View para edição do dado.
➔ update – Salva a atualização do dado.
➔ destroy – Remove o dado.

Aplicação
➔ Instalar CLI Angular: npm install -g @angular/cli;
● ng new AppName.
● cd AppName - ng serve --open
➔ Criar Formulário para Inserir dados
Arquivo Index.html:
<! doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title> Ng4app </ title>
<base href = "/">
<meta name = "viewport" content = "width = device width, initial scale = 1">
<link href = "/ assets / app.css" rel = "style sheet">
</ head>
<body>
<app-root> </ app-root>
</ body>
</ html>

Aplicação
➔ Modificando o arquivo Src/app/app.component.html para criar o formulário, que fica dentro de
assets, ficando assim:

Aplicação
➔ Arquivo app.component.ts: - Formulário:

Aplicação
➔ Manipular dados de entrada:
Antes, vamos importar o arquivo app.module.ts .
1. FormsModule
2. HttpModule

Aplicação
➔ Manipulando dados de entrada:
Incluindo o objeto Angular ao nosso formulário HTML.
Nosso código de app.component.ts ficará assim:
;:.
Adicionamos um
atributo à caixa de
entrada chamada “
ngModel “. Este
atributo informa ao
angular que, quantos
valores existem no
Formulário HTML. Ele
cria um objeto e,
depois de submetido,
podemos acessar esse
objeto e extrair os
valores dele.

Aplicação
➔ Enviando dados para servidor Laravel
Criando projeto: composer create-project laravel/laravel --prefer-dist ng4Laravel55
Definindo credenciais de
conexão com o Banco de
dados
Criando tabelas a partir das migrations: Navegue até Database/migrations/create_nomedasuatabela_table

Aplicação
Comandos:
- migrar tabela para banco de dados
php artisan migrate
- Criando a sua Model
php artisan make:model Item
- Criando controlador para gerenciar suas consultas de dados
php artisan make>controller ItemController
Registre as rotas em Routes/api.php
- Route::post(‘itens’, ‘ItemController@store’);

Aplicação:
Método store que chamamos na rota.
Usamos o Request para fazer o envio de
dados.
Passamos um array dentro de new Item
com os campos preenchidos no
formulário.
Usamos o método save() e retornamos uma
resposta em Json

Desenvolvendo aplicações com Angular e Laravel no Back-end

Mais conteúdo relacionado

Mais procurados

Semelhante a Desenvolvendo aplicações com Angular e Laravel no Back-end

Desenvolvendo aplicações com Angular e Laravel no Back-end