tutorial - Laravel 4 como backend RESTful para AngularJS

rest api laravel auth

Question

Estoy tratando de construir una aplicación web que debería usar Laravel como una API de fondo RESTful y AngularJS en el lado del cliente. Leí todas las otras publicaciones en Stackoverflow sobre el tema, pero nadie está respondiendo definitivamente a mis dudas, al menos, no encontré una fuente definitiva de ejemplo.

Por ejemplo...

¿Debo desarrollar dos aplicaciones completamente distintas, una backend con Laravel y otra, puramente cliente, con AngularJS? Pero en este caso: ¿cómo manejarlos a través de un solo dominio (o host virtual)?

¿O debería crear plantillas AngularJS dentro de Laravel, en la carpeta "vistas" y desde ellas llamar a los servicios de Laravel? Dudo que este sea el mejor enfoque: en este caso, el backend no está completamente separado de la implementación del frontend.

Además, ¿cómo manejar correctamente el enrutamiento? Quiero decir: me gustaría administrar desde las rutas de AngularJS como la navegación por el menú / página, llamar a Laravel solo para recuperar datos y llenar mis vistas. ¿ Puede ser útil mover la carpeta "pública" como se sugiere en esta publicación ( Angular JS + Laravel 4: Cómo compilar para el modo de producción? )

Gracias de antemano por sugerencias, ejemplos ...

Answer 1

Este es un medio comentario mitad respuesta, se hizo demasiado largo.

Como señalaste, básicamente hay tres lugares diferentes en los que puedes hacer algún tipo de enrutamiento / redireccionamiento con esta pila. Por lo general, no he visto una ventaja para hacer las redirecciones en el nivel de Apache, me imagino que esto podría ser más útil para la localización o quizás algún tipo de equilibrio de carga / disco. Sin embargo, tendrá la configuración de VirtualHost si tiene varios dominios que apuntan a esta dirección y necesita enrutar esas solicitudes iniciales al index.html apropiado (por lo tanto, si considera este enrutamiento, este sería el enrutamiento de mi servidor).

En términos generales, después de eso confío en que Angular $ routeProvider gestione las "rutas" del lado del cliente en realidad simplemente asignando una URL a una vista (posiblemente transmitiendo algunos datos).

No me ha gustado configurar un enrutador en mi código PHP para crear una interfaz RESTful adecuada. En mi caso particular, los datos se almacenan de una manera bastante abstracta y tuve que hacer una buena cantidad de trabajo en el PHP para organizarlos de una manera coherente, cualquier solución de tipo ORM no funcionaría. Este intento me ha llevado a considerar opciones como MongoDB, ya que debería aliviar la carga de trabajo necesaria para realizar la traducción del almacenamiento persistente al lado del cliente y viceversa.

De todos modos, todo lo que dije decía que usaba $ http para realizar mis llamadas desde servicios personalizados a puntos finales de PHP específicos que necesitaba. Mi carpeta de PHP con mis scripts se encuentra justo al lado de donde se sirve mi archivo de índice, por lo que las solicitudes de angular son todas las rutas relativas desde la raíz del servidor, lo que lo hace simple. Por lo tanto, están físicamente "anidados", por así decirlo, o conviven, pero el código PHP nunca escribe plantillas ni afecta a la presentación, solo obtiene datos y los sirve (como JSON), por lo que conceptualmente permanecen separados.

Answer 2

Finalmente encontré una solución de trabajo, perfecta en mi escenario, que no requiere un subdominio. En este caso, Laravel actúa exclusivamente como un servicio web REST, sin vistas o plantillas del servidor: la capa de presentación se exige completamente a AngularJS.

Digamos que tengo dos aplicaciones completamente desacopladas (FE e WS) dentro de la misma carpeta raíz:

root
|__fe
|__ws

Modifiqué la configuración del host virtual en el archivo Apache httpd-vhosts.conf de la siguiente manera:

<VirtualHost *:80>
    ServerName myapp.com
    DocumentRoot "/www/root/fe"

    alias /ws "/www/root/ws/public"
    <Directory "/www/root/ws/public">
        Options Indexes FollowSymLinks MultiViews
        AllowOverride all
            Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

Luego agregué "RewriteBase / ws" en mi archivo laravel / public / .htacces:

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On

    RewriteBase /ws

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [NC,L]
</IfModule>

De esta manera puedo escribir en el navegador (por ejemplo):

http://myapp.com             (AngularJS client side root)
http://myapp.com/ws/users    (RESTful service endpoint for "users")

Y luego defina un lado del cliente, AngularJS enrutando de la siguiente manera:

app.config(function($routeProvider) {
    $routeProvider
        .when(''/'', {controller: ''HomeController'', templateUrl: ''templates/home.html''})
        .when(''/users'', {controller: ''UsersController'', templateUrl: ''templates/users.html''})
        .otherwise({redirectTo: ''/''});
});

Vinculándolo a un recurso RESTful de esta manera:

app.factory(''User'', function($resource) {
    return $resource(''http://myapp.com/ws/users'');
});

app.controller(''UsersController'', function($scope, User) {
    $scope.title = "Users";
    $scope.users = User.query();
});

He habilitado la API de historial HTML5, agregando esta línea para configurar mi aplicación Angular:

$locationProvider.html5Mode(true);

junto con (dentro de la sección head de index.html):

<base href="/" />
<meta name="fragment" content="!" />

Por lo tanto, el último requisito para resolver problemas como la actualización de la página del navegador, la vinculación profunda o el marcador directo de la página, es agregar un archivo .htaccess en la raíz de la carpeta que contiene la aplicación Angular:

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On

    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [NC,L]
</IfModule>

¡Espero eso ayude!