angularjs 路由使用html5风格 具体解决方案

1.angular主模块的.config 配置

app.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
    $locationProvider.html5Mode(true);
    /*angular路由为兼容低版本浏览器，路由会默认使用标签模式（hashbang）即“/#!/” 具体配置如下：
    $locationProvider.html5Mode(false);
    $locationProvider.hashPrefix('!');
*/
  ......
}

2. index.html的header部分添加标签 指定应用的基础路径

如：

3. 服务器端进行相应配置，保证路由始终使用angular路由

以nginx服务器配置为例：
server {
listen 80;
server_name ng.me;
location / {
root D:/nginx-1.12.0/html/ng/ngRoute;
index index.html;
try_files $uri$uri/ =404; // 关键设置

  }
}`

可能遇到的坑： 路由页面出现404 或者 控制台报错：Maximum call stack size exceeded

问题原因：
server {
listen 80;
server_name ng.me;
location / {
root D:/nginx-1.12.0/html/ng/ngRoute;
index index.html;
try_files $uri $uri/ =404;
}
}
try_files 里丢了 index.html，导致angular无法递归找到index.html 故会报错Maximum call stack size exceeded
解决方案：
正确配置try_files: $uri$uri/ /index.html =404;
index.html作为应用的入口文件 负责加载所有的js文件，一定要配置！