AngularJS路由重写：Drupal应用跳转至Angular页面的URL美化需求

嘿，作为AngularJS新手碰到这种路由配置的问题太正常了！我来一步步帮你搞定把长URL改成http://localhost/drupal6/text_response的需求：

1. 先确认AngularJS路由模块的依赖 #

首先得确保你已经引入了AngularJS的路由模块（angular-route.js），因为$routeProvider是这个模块提供的，很多新手容易漏掉这一步——没加依赖的话，路由配置根本跑不起来。

2. 正确配置app.js中的路由规则 #

你的app.js需要先声明依赖ngRoute，再通过$routeProvider绑定路径和模板，要是想去掉URL里的#（哈希模式），还得开启HTML5模式。给你一个完整的示例：

// 声明Angular模块，必须依赖ngRoute
var myApp = angular.module('myApp', ['ngRoute']);

// 配置路由规则
myApp.config(function($routeProvider, $locationProvider) {
  $routeProvider
    // 匹配目标短路径
    .when('/text_response', {
      templateUrl: 'sites/all/themes/platinum_printing/js/extjs/angular/views/system_text_response.html',
      // 如果这个页面需要控制器，这里可以加 controller: 'YourResponseController'
    })
    // 处理其他未匹配的路径（可选）
    .otherwise({
      redirectTo: '/'
    });

  // 开启HTML5模式，去掉URL中的#符号
  $locationProvider.html5Mode({
    enabled: true,
    requireBase: true
  });
});

3. 给Angular入口页面加base标签 #

开启HTML5模式后，必须在加载Angular应用的Drupal页面的<head>里添加base标签，指定应用的根路径，不然路由会出现路径跳转错误：

<base href="/drupal6/">

4. 处理Drupal的路由转发（关键！） #

Drupal本身有自己的路由系统，直接访问http://localhost/drupal6/text_response的话，Drupal会默认找自己的页面，大概率返回404。你得让Drupal把这个路径转发到加载Angular的页面：

• 最稳妥的方式是写个简单的自定义Drupal模块，用hook_menu定义路径：

function your_custom_module_menu() {
  $items = array();
  $items['text_response'] = array(
    'title' => 'Text Response',
    'page callback' => 'your_custom_module_angular_page',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
  );
  return $items;
}

function your_custom_module_angular_page() {
  // 返回加载Angular应用的页面内容，核心是要有ng-app和ng-view指令
  return theme('page', array('content' => '<div ng-app="myApp" ng-view></div>'));
}

• 要是不想写模块，也可以用Drupal的Pathauto模块或者修改.htaccess，把/text_response重写到你的Angular入口页面。

5. 最后检查几个常见坑 #

• 确认angular-route.js的加载顺序在angular.js之后、app.js之前；
• 核对templateUrl的路径是否正确（相对于base标签的根路径）；
• 确保Angular入口页面有ng-app="myApp"和ng-view指令，路由才能正确渲染模板。

内容的提问来源于stack exchange，提问作者noobie-php