‘Angular项目中去掉url中的#’问题解决

使用AngularJS的朋友都应该了解，AngularJS框架定义了自己的前端路由控制器，通过不同URL实现单面(ng-app)对视图(ng-view)的部署刷新，并支持HTML5的历史记录功能，详细介绍可以参考文章：AngularJS路由和模板。
对于默认的情况，是不启动HTML5模式的，URL中会包括一个#号，用来区别是AngularJS管理的路径还是WebServer管理的路径。

而要去掉#，具体操作有以下步骤(yoeman创建的项目)：

1. index.html

<base href="/">

2.app.js

angular.module('',[]).config(['$locationProvider',function($locationProvider){    $locationProvider.html5Mode(true);}])

3.Server修改
Apache Rewrites

<VirtualHost *:80>    ServerName my-app    DocumentRoot /path/to/app    <Directory /path/to/app>        RewriteEngine on        # Don't rewrite files or directories        RewriteCond %{REQUEST_FILENAME} -f [OR]        RewriteCond %{REQUEST_FILENAME} -d        RewriteRule ^ - [L]        # Rewrite everything else to index.html to allow html5 state links        RewriteRule ^ index.html [L]    </Directory></VirtualHost>

Nginx Rewrites

server {    server_name my-app;    index index.html;    root /path/to/app;    location / {        try_files $uri $uri/ /index.html;    }}

Azure IIS Rewrites

<system.webServer>  <rewrite>    <rules>       <rule name="Main Rule" stopProcessing="true">        <match url=".*" />        <conditions logicalGrouping="MatchAll">          <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />                                           <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />        </conditions>        <action type="Rewrite" url="/" />      </rule>    </rules>  </rewrite></system.webServer>

Express Rewrites

var express = require('express');var app = express();app.use('/js', express.static(__dirname + '/js'));app.use('/dist', express.static(__dirname + '/../dist'));app.use('/css', express.static(__dirname + '/css'));app.use('/partials', express.static(__dirname + '/partials'));app.all('/*', function(req, res, next) {    // Just send the index.html for other files to support HTML5Mode    res.sendFile('index.html', { root: __dirname });});app.listen(3006); //the port you want to use

ASP.Net C# Rewrites

In Global.asax

private const string ROOT_DOCUMENT = "/default.aspx";protected void Application_BeginRequest( Object sender, EventArgs e ){    string url = Request.Url.LocalPath;    if ( !System.IO.File.Exists( Context.Server.MapPath( url ) ) )        Context.RewritePath( ROOT_DOCUMENT );}

Java EE

In web.xml

<?xml version="1.0" encoding="UTF-8"?><web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">    <error-page>        <error-code>404</error-code>        <location>/</location>    </error-page></web-app>

Play Framework In routes file:

GET  /  controllers.Application.index(someRandomParameter = "real index")# All other routes should be here, in betweenGET  /*someRandomParameter  controllers.Application.index(someRandomParameter)

Yoeman In Gruntfile.js
首先，需要安装connect-modrewrite npm install connect-modrewrite --save 在gruntfile.js中添加var modRewrite = require('connect-modrewrite');然后修改livereload中的middleware

connect: {      options: {        port: 9000,        // Change this to '0.0.0.0' to access the server from outside.        hostname: 'localhost',        livereload: 35729      },      livereload: {        options: {          open: true,          middleware: function (connect,options) {              var middlewares = [];              middlewares.push(modRewrite(['^[^\.]*$ /index.html [L]'])); //Matches everything that does not contain a '.' (period)              middlewares.push(connect.static('.tmp'))              middlewares.push(connect().use(                  '/bower_components',                  connect.static('./bower_components')))              middlewares.push(connect().use(                  '/app/styles',                  connect.static('./app/styles')))              middlewares.push(connect.static(appConfig.app))              options.base.forEach(function(base) {                  middlewares.push(connect.static(base));              });              return middlewares;          }        }      },

可以参考以下链接：
1.https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

2.https://github.com/yeoman/generator-angular/issues/433#issuecomment-282486790

3.http://www.cnblogs.com/mingmingruyuedlut/p/4236049.html