关闭

angular路由移除#号(跟nginx)

标签: angularnginx源码
2541人阅读 评论(0) 收藏 举报
分类:

刚进公司,公司使用的angular.js(1.3.0),主管跟我说要我移除angular项目访问路径URL里的#号移除(针对百度seo问题后来发现angular天生不适合做seo)。

angularjs框架定义了前端路由控制器,通过不同的url实现单页面(ng-app)对视图ng-view的部署刷新。

默认情况下:angular是不启动html5模式的,url中就会包括一个#号,用来区别angular管理的路径还是webserver管理的路径

angular框架提供了一种html模式的路由,可以直接移除#号

1.在路由里设置$locationProvider.html5Mode(true)

2.在angular页面添加base标签<base href="/">

如果用户是先访问首页,然后再跳转是由angular前端管理的url,是能正常访问的

(如果用户直接访问的不是首页,请求会先被提交到后台,后台路由没有对应页面的路由管理就好出现错误)

3.在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;
        }
}

附上公司网站






0
0
查看评论

在 nginx 中部署 angular 应用

最近使用Angular做了第一个应用,但是网上的教程大多是教如何开发,部署相对较少,所以这里就简单记录一下如何在nginx中部署Angular应用。 注:Angular应用可以编译成静态页面,然后部署在任何 web 服务器上,这里仅仅是选择nginx而已,同时编译后的文件其实就仅仅是静态文件而已...
  • t894690230
  • t894690230
  • 2017-10-15 22:19
  • 1349

Angular-Cli+nginx使用gzip static再次加快应用访问速度!!!

在上一篇文章中,我说过了如何通过配置nginx的gizp来加快ng2的应用访问速度,不知道的点这里。后面有朋友评论说,可以使用gzip static呀,这样更快。首先来说下gzip static表示什么意思,就是说你可以直接将文件先压缩成gz,这样客户端访问的时候,nginx就直接返回就好了,而不像...
  • zsz459520690
  • zsz459520690
  • 2017-05-10 10:04
  • 1160

nginx对于AngularJS路由的rewrite

server { server_name yoursite.com; root /usr/share/html; index index.html; location / { try_files $uri $uri/ /index.html;...
  • laxflkid
  • laxflkid
  • 2015-01-18 14:20
  • 741

Nginx配置实现前端Route路由与后端路由的分离

Windows中Nginx的常用命令: 启动:Nginx根目录下cmd控制台start nginx.exe 停止:Nginx根目录下cmd控制台nginx -s stop 重启:Nginx根目录下cmd控制台nginx -s reload注意:每次修改了Nginx.conf文件之后都必须要重启...
  • a314368439
  • a314368439
  • 2017-09-01 15:06
  • 1676

Angular2+AOt+nginx开启gzip,优化访问速度

在使用angular2开发项目的时候,你会发现ng build出来的包,动不动就几m啊(没有黑angular的意思),那还怎么玩下去啊,对吧。虽然angular2有aot啊,但是优化之后还是很大啊,那怎么办啊?要不试试gzip啊。那么我就用Nice Fish(http://git.oschina.n...
  • zsz459520690
  • zsz459520690
  • 2017-05-08 19:22
  • 2555

如何在angularjs项目去除url中总是默认带有"#"

在设置route的时候,开启HTML5模式. angular.module('router', ['ngRoute']) .config(['$routeProvider', '$locationProvider',   ...
  • sixteen_cicle
  • sixteen_cicle
  • 2016-09-18 11:20
  • 674

去掉angularjs路由的#,node为服务器

#或#!是angular路由的特征,但是有时候我们由于种种原因不愿意去使用它。参考这篇资料之后, http://blog.fens.me/angularjs-url/ 发现无法解决。于是自己捣鼓。各种心酸,终于解决了。 解决了两个问题: 去掉# 刷新页面时仍然能匹配到对应的路由 angular...
  • Real_Bird
  • Real_Bird
  • 2016-12-18 17:06
  • 1068

angularJS URL中的锚点(#)

普通URL 中的# 一、#的涵义 #代表网页中的一个位置。其右面的字符,就是该位置的标识符。 比如,http://www.example.com/index.html#print 就代表网页index.html的print位置。浏览器读取这个URL后,会自动将print位置滚动至...
  • hellochenlu
  • hellochenlu
  • 2015-09-16 14:18
  • 2196

apache2.2.21下配置url地址重写 去掉index.php

1、首先打开apache的配置文件,httpd.conf, 找到#LoadModule rewrite_module modules/mod_rewrite.so,去掉前面的#号,开启mod_rewrite模块 2、找到 Options FollowSymLinks Al...
  • ebw123
  • ebw123
  • 2012-07-24 12:28
  • 8306

Angular4项目解决跨域问题

跨域 跨域: 浏览器对于javascript的同源策略的限制,例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了. 上面提到的,同域的概念又是什么呢??? 简单的解释就是相同域名,端口相同,协议相同 同源策略: 请求的url地址,必...
  • qq_38321709
  • qq_38321709
  • 2017-06-29 09:48
  • 8851
    个人资料
    • 访问:192157次
    • 积分:3253
    • 等级:
    • 排名:第12178名
    • 原创:146篇
    • 转载:1篇
    • 译文:0篇
    • 评论:44条
    文章分类
    最新评论