AngularJS 1.6.4移除URL#号问题及电商项目Angular版本选型咨询

嘿，我来帮你搞定这两个问题！先聊聊电商用Angular 4/5的事儿，再给你解决AngularJS 1.6.4去掉URL里#号的方案～

完全合适！Angular 4+的设计天生适配电商这类复杂Web应用：

• 组件化架构：电商的商品列表、详情页、购物车、订单模块都能拆成独立组件，复用性强，后期维护起来特别省心。
• 性能优化：支持AOT（提前编译），打包后的代码更小、加载更快，能有效提升电商用户的页面加载体验，减少跳出率。
• 生态完善：有成熟的UI组件库（比如Angular Material）可以快速搭建电商界面，还有NgRx这类状态管理工具，能轻松处理购物车、用户登录状态这类复杂的全局数据。
• 响应式支持：天生适配移动端和桌面端，现在电商用户大多来自手机，这一点对转化至关重要。
• 如果你之前有AngularJS的开发经验，过渡到Angular 4/5也不会太吃力——虽然语法有变化，但模块化、依赖注入这些核心概念是相通的，上手速度会很快。

你已经写了部分路由配置，我来帮你补全并说明关键步骤（这些都是经过验证的有效方案，你之前没成功可能是漏了某个环节）：

1. 完善AngularJS配置代码 #

首先要在config里启用html5Mode，同时别忘了处理控制器名称的引号问题（这是常见小坑）：

angular.module('myApp', [])
  .config(function($routeProvider, $locationProvider) {
    // 路由配置
    $routeProvider
      .when('/', {
        templateUrl: 'partials/home.html',
        controller: 'mainController' // 注意：控制器名称要加引号，除非你提前把它赋值给了变量
      })
      .when('/about', {
        templateUrl: 'partials/about.html',
        controller: 'aboutController'
      })
      // 配置默认路由，避免无效路径报错
      .otherwise({ redirectTo: '/' });

    // 启用HTML5模式，移除#号
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: true // 默认值，但明确写出更清晰
    });
  });

2. 在HTML头部添加base标签 #

这是很多人容易忽略的关键步骤！必须在index.html的<head>里添加<base>标签，指定应用的根路径：

• 如果你的应用部署在域名根目录（比如http://yourshop.com/），就写：

<base href="/">

• 如果是部署在子目录（比如http://yourshop.com/store/），就写：

<base href="/store/">

3. 服务器端配置（重中之重！否则刷新页面会404） #

HTML5模式下，浏览器会直接请求/about这类路径，但服务器上并没有对应的文件，所以必须配置服务器把所有路由请求转发到index.html，下面是几种常见服务器的配置示例：

Apache（在.htaccess文件中）

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

Nginx（在server块中添加）

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

Node.js（Express框架）

const express = require('express');
const app = express();
const path = require('path');

// 托管静态文件
app.use(express.static(path.join(__dirname, 'public')));

// 所有路由都指向index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(3000, () => console.log('服务器运行在3000端口'));

额外注意事项 #

• 如果你的用户还有使用IE9及以下的老旧浏览器，AngularJS会自动 fallback到带#号的哈希模式，不需要额外处理。
• 确保路由配置里的模板路径、控制器名称没有拼写错误，这也是常见的排查点。

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