路由的优化

最新推荐文章于 2024-05-25 13:03:05 发布

Eknow05

最新推荐文章于 2024-05-25 13:03:05 发布

阅读量856

点赞数

分类专栏： angular

本文链接：https://blog.csdn.net/xieyixiao_123/article/details/77816642

版权

angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

开发单页面应用时，url会出现#号字符。为了简洁设计，解决方案：

$locationProvider.html5Mode(true)

然而，会出现一种情况，便是点击路由后，刷新页面报404错误。

原因（查资料）：

1. 用户如果是先访问首页(http://onbook.me)，然后再跳转到页面(http://onbook.me/book)，则这个跳转是由AngularJS前台管理的URL，访问是正常的。
2. 用户直接访问页面(http://onbook.me/book)时，请求是先被提交到了WebServer后台，后台路由没有对应页面(http://onbook.me/book)的路由管理，就会出现404的错误。

因此，此处有为2种解决方案（查资料）：

1. 静态网站：纯前台网站(JS+HTML+CSS)，通过Nginx提供Web服务。
2. 动态网站：前台(JS + HTML + CSS) + 后台Node.js提供Web服务。

1.静态网站，我们需要修改的地方包括3个文件

index.html : ng-app的定义文件
app.js : 对应ng-app的控制文件
nginx.conf : nginx的网站配置文件

编辑 index.html，增加base标签。

<html lang="zh-CN" ng-app="book">
<head>
    <base href="/">
	
// 省略代码
</head>

编辑app.js，增加 $locationProvider.html5Mode(true);

book.config(['$routeProvider', '$locationProvider', '$sceProvider', 'tplProvider', function ($routeProvider, $locationProvider, $sceProvider, tplProvider) {
    $routeProvider
        .when('/', {templateUrl: tplProvider.html('welcome'), controller: 'WelcomeCtrl'}) 
        .otherwise({redirectTo: '/'});
    $locationProvider.html5Mode(true);
}]);

编辑nginx的配置文件，增加try_files配置。

server {
        set $htdocs /www/deploy/mysite/onbook;
        listen 80;
        server_name onbook.me;
        location / {
            root $htdocs;
            try_files $uri $uri/ /index.html =404;
        }
}

2. 动态网站的解决方案

index.html : ng-app的定义文件
app.js : 对应ng-app的控制文件
server.js : Express框架的路由访问控制文件
index.html 和 app.js两个文件修改，同静态网站的解决方案。动态网站，一般不是通过Nginx直接路由，而是通过Web服务器管理路由。假设我们使用的是Node.js的Express的Web框架。

打开Express框架的路由访问控制文件server.js，增加路由配置。

app.use(function (req, res) {
    console.log(req.path);
    if(req.path.indexOf('/api')>=0){
        res.send("server text");

    }else{ //angular启动页
        res.sendfile('app/index.html');
    }
});

Eknow05

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
路由的优化

开发单页面应用时，url会出现#号字符。为了简洁设计，解决方案：$locationProvider.html5Mode(true)然而，会出现一种情况，便是点击路由后，刷新页面报404错误。原因（查资料）：1. 用户如果是先访问首页(http://onbook.me)，然后再跳转到页面(http://onbook.me/book)，则这个跳转是由Angula
复制链接

扫一扫