Laravel 4为AngularJS的RESTful后端 [英] Laravel 4 as RESTful backend for AngularJS

问题描述

我想建立应使用Laravel作为RESTful API后端和AngularJS在客户端的Web应用程序。
我读了所有＃2其他职位有关的问题，但没有一个人是绝对回答我的疑问，至少，我没有找到一个权威来源的例子。

I am trying to build a web application which should use Laravel as a RESTful backend API and AngularJS on client side. I read all the other post on Stackoverflow about the issue, but no one is definitely answering my doubts, at least, I did not find a definitive source example.

例如...

我应该开发两个完全不同的应用，后端一个用Laravel和另一个纯粹的客户端，与AngularJS？
但是，在这种情况下：？如何通过一个域（或虚拟主机）处理它们。

Should I develop two completely distinct applications, a backend one with Laravel and another, purely client, with AngularJS? But in this case: how to handle them through a single domain (or virtual host)?

或者我应该创建内部Laravel AngularJS模板，在意见的文件夹，并从他们打电话Laravel服务？我怀疑这是最好的方法：在这种情况下，后端没有完全从前端实现脱钩。

Or should I create AngularJS templates inside Laravel, in the "views" folder and from them call Laravel services? I doubt this is the best approach: in this case the backend is not completely decoupled from the frontend implementation.

另外，如何正确处理路由？我的意思是：我想从AngularJS路线像菜单/页面导航管理，要求Laravel只检索数据并填写自己的看法。
移动的公共文件夹中的建议在这篇文章中（<一个href=\"http://stackoverflow.com/questions/19089244/angular-js-laravel-4-how-to-compile-for-production-mode\">Angular JS + Laravel 4：？如何编译生产模式）可以帮助

Also, how to correctly handle routing? I mean: I would like to manage from AngularJS routes like menu/page navigation, calling Laravel only to retrieve data and fill my views. Moving the "public" folder as suggested in this post (Angular JS + Laravel 4: How to compile for production mode?) may help?

感谢名单提前为建议，例如...

Thanx in advance for suggestions, examples...

推荐答案

最后，我找到了一个有效的解决方案，完美的在我的情况下，这并不需要一个子域。
在这种情况下，Laravel专门作为一个RESTful Web服务，没有服务器端观点或模板：在presentation层完全要求到AngularJS

Finally I found a working solution, perfect in my scenario, which does not require a subdomain. In this case Laravel acts exclusively as a RESTful web service, no server side views or templates: the presentation layer is completely demanded to AngularJS.

让我们说我有相同的根文件夹内的两个完全解耦应用程序（FEËWS）：

Let's say I have two completely decoupled applications (FE e WS) inside the same root folder:

root
|__fe
|__ws

我修改在Apache的httpd-vhosts.conf虚拟主机设置文件的方式如下：

I modified virtual host settings under Apache httpd-vhosts.conf file the following way:

<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>

然后我说的RewriteBase / WS到我laravel /公/ .htacces文件：

I then added "RewriteBase /ws" into my laravel/public/.htacces file:

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On

    RewriteBase /ws

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

这样我可以在浏览器中编写（例如）：

This way I can write in the browser (for instance):

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

和再定义一个客户端，AngularJS路由方式如下：

And then define a client side, AngularJS routing the following way:

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

其链接到一个RESTful的资源是这样的：

Linking it to a RESTful resource this way:

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();
});

我启用HTML5 API历史，加入这行来配置我的角度应用程序：

I enabled HTML5 history API, adding this line to configure my Angular application:

$locationProvider.html5Mode(true);

连同（里面的index.html头部分）：

together with (inside index.html head section):

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

所以最后一个要求，解决像浏览器页面的刷新，深度链接，或直接页书签的问题，就是增加一个.htaccess文件，其中包含角应用程序文件夹的根目录：

So the last requirement to solve problems like browser page refresh, deep linking, or direct page bookmark, is to add a .htaccess file in the root of the folder which contains the Angular application:

<IfModule mod_rewrite.c>
    Options -MultiViews
    RewriteEngine On

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

希望它帮助！

这篇关于Laravel 4为AngularJS的RESTful后端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！