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 uriuri/ =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: uriuri/ /index.html =404;

index.html作为应用的入口文件 负责加载所有的js文件，一定要配置！