Angularjs: Usando o Html5 Mode com WP Api

leonardo

Neste simples tutorial irei mostrar como utilizar Pretty Url’s no AngularJs (rotas sem #/ ) juntamente com o WP-API.

Ativando o modo html 5

Adicione o seguinte código antes das configurações de rotas:

$locationProvider.html5Mode(true)

No arquivo index.html insira o seguinte código dentro da tag head

<base href=”/”>

Resgatando os dados da API

Como o seu arquivo index.html vai estar na pasta raiz da sua hospedagem não será possível resgatar os dados da api pois as requisições não passaram para o arquivo index.php, para resolver isto iremos criar um arquivo na pasta raiz da hospedagem chamado index-api.php com o seguinte conteúdo:

<?php

define('WP_USE_THEMES', true);
require('./wp-blog-header.php');

Em seguida modifique o arquivo .htaccess para que fique da seguinte maneira

RewriteEngine on
RewriteBase /
RewriteRule ^wp-json index-api.php [NE,L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) /index.html [NE,L]

 

Tudo pronto! Agora você consegue resgatar os dados da api e suas urls do AngularJs irão funcionar sem o #/.

 

Deixe uma resposta