angular框架上线后url怎么办？
使用AngularJS的朋友应该知道，AngularJS框架定义了自己的前端路由控制器，通过不同的URL实现了ng-app对ng-view的部署和刷新，支持HTML5的历史功能。详情请参考文章AngularJS路由和模板。
默认情况下，HTML5模式是不启用的，URL会包含一个#号来区分AngularJS管理的路径和WebServer管理的路径。
比如下面带#的URL就是AngularJS管理的路径。
这种体验其实不太友好，尤其是对于我这种喜欢简约设计的人。#的出现不是我自己的意愿，所以有多难受。AngularJS框架提供了HTML5模式下的路由，可以直接去掉#号。
只需设置$ location provider . html 5 mode(true)。
book.config(['$routeProvider '，' $locationProvider '，function ($routeProvider，$locationProvider) {
//..省略代码
$ location provider . html 5 mode(true)；
}]);
支持HTML5的路由URL。
就是这个问题困扰我很久了，所以我要用带#的URL。
第二，找到错误的原因
那么，这个问题的原因在哪里呢？路径解析有错误。
让我从头说起。AngularJS是一个单页面应用，一个ng-app对应一个页面和一个URL。AngularJS实现了自己的前端路由，这样一个ng-app可以管理多个URL，然后对应多个ng-vew。当我们访问URL(/book)时，如何确定这个路径是后台的WebServer管理的还是前台的AngularJS管理的？
从两个方面来看:
1.如果用户先访问主页()，然后跳转到页面(/book)，跳转的是AngularJS管理的URL，访问正常。
2.当用户直接访问一个页面(/book)时，请求首先提交到WebServer后台，后台没有对应页面(/book)的路由管理，所以会出现404错误。
如果能理解这一层，技术上解决起来会非常容易。我们可以通过要求WebServer将AngularJS管理的所有路由URL转发给ng-app来解决404的问题。同时没有#号，还支持HTML5的历史查询！！
实施可分为两种解决方案:
1.静态网站:纯前台网站(JS+HTML+CSS)，通过Nginx提供web服务。
2.动态网站:前台(JS+HTML+CSS)+后台Node.js提供web服务。
三、静态网站的解决方案
我们需要修改的静态网站包括三个文件。
index . html:NG-APP的定义文件。
app . js:ng-app对应的控制文件。
Nginx.conf: nginx的网站配置文件。
编辑index.html并添加基本标签。
& lthtml lang = " zh-CN " ng-app = " book " & gt；
& lthead & gt
& ltbase href = "/" rel = " external no follow " >
//省略代码
& lt/head & gt；
编辑app.js，添加$ location provider . html 5 mode(true)；
book.config(['$routeProvider '，' $locationProvider '，' $sceProvider '，' tplProvider '，function ($routeProvider，$locationProvider，$sceProvider，tplProvider) {
$routeProvider
。when('/'，{ template URL:TPL provider . html(' welcome ')，controller: 'WelcomeCtrl'})
。当('/book '，{模板URL:tplprovider.html(' book ')，控制器:' bookctrl'})//book。
。当('/book-r1 ')，{模板URL:tplprovider.html(' book-r 1 ')，控制器:' bookr1ctrl'})/r的极客理想。
。when ('/video ')，{模板URL:tplprovider.html(' video ')，控制器:' videoctrl'})//video。
。when ('/about '，{ template URL:tplprovider.html(' About ')，controller:' About ctrl ' })//关于作者。
。否则({ redirecto:'/' })；
$ location provider . html 5 mode(true)；
}]);
编辑nginx的配置文件，并添加try_files配置。
服务器{
set＄htdocs/www/deploy/my site/on book；
听80；
server _ name onbook.me
位置/ {
root $ htdocs
try _ files $ uri $ uri//index . html = 404；
}
}
这样静态网站就做好了，没有麻烦的号，可以直接访问刷新任意页面。
第四，动态网站的解决方案
我们还需要修改的动态网站包括三个文件。
index . html:NG-APP的定义文件。
app . js:ng-app对应的控制文件。
server . js:express框架的路由访问控制文件。
修改Index.html和app.js，和静态网站的解决方案一样。一般来说，动态网站不会直接通过Nginx进行路由，而是通过Web服务器进行管理。假设我们使用Node.js的Express的Web框架
打开Express framework的路由访问控制文件server.js，增加路由配置。
app.use(function (req，res) {
console . log(req . path)；
if(req . path . index of('/API ')& gt；=0){
res.send("服务器文本")；
}else{ //angular启动页面
RES . sendfile(' app/index . html ')；
}
});
设置当站内路径(req.path)不包含/api时，将转发给AngularJS的ng-app(index.html)。所以我们直接访问地址(/book)时，/book不包含/api，会直接转发给AngularJS进行路由管理。我们实现了路由的优化！