angularjs + laravel 前后端分离框架搭建教程 (Nginx)
angularjs 和 laravel 分别是当前框架里比较流行的框架，一个是前端js框架，一个是后端PHP框架。 国内的盆友都对前后端分离极其的热衷，这里我就和大家说说我用angularjs 和 laravel 搭建前后端分离框架的一个整体过程。
1. 首先，我们要分析一下这两个框架的几个要素。
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 版本
@H_404_21@
git clone https://github.com/angular/angular.git
mv ./angular ./laravel/public/views
其实这个views也可以直接放在laravel的根目录，即跟app文件夹同一级，只不过是后面Nginx写的路径不一样而已。
Route::get('/',function(){
//跳转到前端登录的界面
return redirect('pages/login.html');
} );
//相应的接口路由
Route::get('/auth/login','Auth\AuthController@postLogin');
Route::get('/auth/logout','Auth\AuthController@getlogout');
//coding.. 其他路由
angular 目录结构：
@H_404_21@
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
- @H_404_21@
这里我们说一下这个问题，就是如果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;
#}
}
这里就解决了请求是访问前端目录还是走后端路由的问题了。
