angularjs + laravel 前后端分离框架搭建教程 (Nginx)

angularjs 和 laravel 分别是当前框架里比较流行的框架，一个是前端js框架，一个是后端PHP框架。 国内的盆友都对前后端分离极其的热衷，这里我就和大家说说我用angularjs 和 laravel 搭建前后端分离框架的一个整体过程。

1. 首先，我们要分析一下这两个框架的几个要素。

• laravel 框架里包含了前端渲染的功能，所以整合的过程中。我们要摒弃laravel 的渲染模板，laravel只提供纯粹的接口功能。

• angularjs 框架消费接口，并实现显示逻辑，页面跳转等前端功能。

• 路由的各种问题，我们从Nginx的配置文件入手。

2. 现在，我们开始动手吧。

• 环境: ubuntu16.04 　 angular2.0 　 laravel5.2　 Nginx1.10

• 下载安装laravel ，我们这里用laravel 5.2版本的,可以从github下载。

git clone https://github.com/laravel/laravel.git
cd laravel
composer install
chmod -R 777 ./storage  ./bootstrap/cache

laravel安装过程参考http://www.golaravel.com/laravel/docs/5.1/

• 下载安装angularjs,教程中使用的是angular2.0 版本

git clone https://github.com/angular/angular.git

• 安装 Nginx : 略；

• 文件整合: 将angularjs 文件加放到 laravel 的public目录下，并重命名为views。 这个views就是我们前端的开发目录。

mv ./angular ./laravel/public/views

其实这个views也可以直接放在laravel的根目录，即跟app文件夹同一级，只不过是后面Nginx写的路径不一样而已。

• laravel路由部分：laravel 只做接口路由，页面跳转和静态页面的请求一律找前端去。 所以这里路由只有这样配置就可以。

Route::get('/',function(){
          //跳转到前端登录的界面
          return redirect('pages/login.html');
 } );
  //相应的接口路由
  Route::get('/auth/login','Auth\AuthController@postLogin');
  Route::get('/auth/logout','Auth\AuthController@getlogout');
  //coding..  其他路由

• angular 目录结构：

public
├── index.PHP
└── views
   ├── assets
   ├── bower_components   // angular引用js脚本目录
   ├── css
   │ └── style.css       //自定义css目录
   ├── data
   │ └── time.json       
   ├── index
   │ ├── index.html
   ├── pages
   │ ├── blank.html
   │ ├── grid.html
   │ ├── index.html
   │ ├── login.html
   │ └── typography.html
   └── scripts
       ├── app.js
        ├── controllers
        └── services

• 配置Nginx.conf 解决请求走前端还是走后端问题。

这里我们说一下这个问题，就是如果Nginx.conf不做区分，那么前后端的请求全部都会去找后端去了，这样前后端就没分离了。

具体实现原理是这样的：我们观察到views目录下有几个固定的文件夹， 一个bower_components放的引用文件，assets放的自定义开发的组件，css放的自定义的css文件，data放的固定数据，index放的前端主文件。 pages放的前端未渲染的页面，script 放的angular控制器等文件。当请求的uri头是这这几个目录名，那就让请求跑到angular目录来找。
Nginx配置如下（这里我只贴出server部分的配置了）：

server {
        listen      8080;
        server_name 0.0.0.0;
 
        #charset koi8-r;
 
        #access_log  logs/host.access.log  main;
           location ~ ^/(bower_components|css|data|scripts|pages){
            root       path/to/angular-laravel/public/views;
               index      index.html;
           }
        location / {
               root   path/to/angular-laravel/public;
            index  index.PHP index.html index.htm;
               try_files $uri $uri/ /index.PHP?$query_string;   #for laravel
               if (!-e $request_filename) {
                rewrite .* /index.PHP last;
               }
        }
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
 
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.PHP$ {
        #    proxy_pass   http://127.0.0.1;
        #}
 
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        location ~ \.PHP$ {
            root           path/to/angular-laravel/public;
            fastcgi_pass   localhost:9000;
            fastcgi_index  index.PHP;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            include        fastcgi_params;
        }
 
        # deny access to .htaccess files,if Apache's document root
        # concurs with Nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

这里就解决了请求是访问前端目录还是走后端路由的问题了。

3. 教程到此结束，希望对各位开发的盆友有所帮助。