AngularJS+PHP网站URL重写：移除URL中的目录结构

针对你的AngularJS+PHP双入口架构，要去掉URL里的目录结构、实现干净的路由URL，得从服务器重写规则、PHP请求处理逻辑、AngularJS路由配置三个环节配合调整，我给你梳理下具体操作：

1. 服务器端配置URL重写 #

首先要让服务器把所有路由请求（比如/member/somePage）正确导向对应的入口，同时不影响静态资源（JS、CSS、图片等）的访问。这里以Apache为例，在项目根目录创建.htaccess文件：

# 启用重写引擎
RewriteEngine On

# 如果请求的是真实存在的文件/目录，直接访问，不做重写
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# 把/member/*开头的请求导向index.php（用于PHP端的权限验证等逻辑）
RewriteRule ^member/ index.php [L]

# 其他所有请求直接导向Angular的index.html
RewriteRule ^ index.html [L]

如果用的是Nginx，对应的配置可以放在server块中：

location / {
    try_files $uri $uri/ /index.html;
}

location /member/ {
    try_files $uri $uri/ /index.php?$args;
}

2. 调整PHP的请求处理逻辑 #

你之前的PHP是把请求重定向到带目录的Angular入口，这会导致URL出现多余的目录结构。现在改成验证通过后直接输出Angular的index.html内容，这样URL会保持用户请求的/member/somePage，不会被重定向到带目录的路径：

$app->get('/member/somePage', function () use ($app) {
    // 这里可以添加你的权限验证逻辑（比如检查用户是否登录）
    if (!isset($_SESSION['user_id'])) {
        // 未登录则跳转到登录页
        $app->response()->redirect('/login');
        return;
    }

    // 验证通过后，直接输出Angular的index.html，而非重定向
    // 注意替换成你实际的index.html路径
    include 'index.html';
});

3. 配置AngularJS路由适配干净URL #

为了让Angular能识别/member/somePage这种干净URL，推荐启用HTML5模式（去掉URL中的#），步骤如下：

第一步：设置base href #

在index.html的<head>标签中添加base标签，指定根路径：

<base href="/">

第二步：启用HTML5模式并配置路由 #

在Angular的模块配置中开启HTML5模式，同时配置对应的ui-router状态：

angular.module('yourApp', ['ui.router'])
  .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
    // 启用HTML5模式，移除URL中的#号
    $locationProvider.html5Mode(true);

    // 配置对应/member/somePage的状态
    $stateProvider
      .state('member.somePage', {
        url: '/member/somePage',
        templateUrl: 'path/to/your/template.html', // 替换成实际模板路径
        controller: 'SomePageController' // 替换成实际控制器
      });

    // 设置默认跳转路由
    $urlRouterProvider.otherwise('/');
  });

4. 验证完整流程 #

1. 用户点击login.tpl.html中的<a href="/member/somePage">链接
2. 服务器通过重写规则，把请求导向index.php
3. PHP完成权限验证后，直接输出index.html的内容，URL保持/member/somePage
4. Angular加载后，通过ui-router识别当前URL，渲染对应的member.somePage状态

这样最终的URL就只会显示/member/somePage，完全看不到多余的目录结构啦！

内容的提问来源于stack exchange，提问作者Angular Devloper