pik*_*ile 222 javascript angularjs
我正在学习AngularJS,有一件事让我很烦.
我用来$routeProvider为我的应用程序声明路由规则:
$routeProvider.when('/test', {
controller: TestCtrl,
templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });
但是当我在浏览器中导航到我的应用程序时,我看到了app/#/test而不是app/test.
所以我的问题是为什么AngularJS将此哈希添加#到网址？有没有可能避免它？
plu*_*us- 264
实际上,对于非HTML5浏览器,您需要#(#标签).
否则,他们只会在提到的href上对服务器进行HTTP调用.#是一个旧的浏览器短路,它不会触发请求,这允许许多js框架在其上构建自己的客户端重新路由.
您可以使用$locationProvider.html5Mode(true)告诉angular使用HTML5策略(如果可用).
这里是支持HTML5策略的浏览器列表:http://caniuse.com/#feat =history
bea*_*end 47
如果您启用了其他人说过的html5mode,并创建一个.htaccess包含以下内容的文件(根据您的需要进行调整):
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ./index.html [L]
当用户进入正确的路线时,用户将被定向到您的应用,您的应用将读取该路线并将其带到其中的正确"页面".
编辑:只是确保没有任何文件或目录名称与您的路由冲突.
vij*_*jay 38
在Router at end添加html5Mode(true) ;
app.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/home', {
templateUrl:'/html/home.html'
});
$locationProvider.html5Mode(true);
})
在html head中添加基本标记
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
感谢@plus - 详细说明上述答案
小智 30
尝试
$locationProvider.html5Mode(true)
更多信息,请访问
$ locationProvider
使用$ location
zer*_*ool 12
以下信息来自:https:
//scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
获取干净的URL并从Angular中的URL中删除主题标签非常容易.
默认情况下,AngularJS将使用标签路由URL.例如:
有两件事需要做.
配置$ locationProvider
为相关链接设置基础
$ location服务
在Angular中,$ location服务解析地址栏中的URL并对您的应用程序进行更改,反之亦然.
我强烈建议您阅读官方Angular $位置文档,以了解位置服务及其提供的内容.
https://docs.angularjs.org/api/ng/service/$location
$ locationProvider和html5Mode
我们将在定义Angular应用程序和配置路由时执行此操作.
angular.module('noHash', [])
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'partials/home.html',
controller : mainController
})
.when('/about', {
templateUrl : 'partials/about.html',
controller : mainController
})
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : mainController
});
// use the HTML5 History API
$locationProvider.html5Mode(true); });
什么是HTML5 History API？它是使用脚本操作浏览器历史记录的标准方法.这使Angular可以更改页面的路由和URL,而无需刷新页面.有关这方面的更多信息,这里有一个很好的HTML5 History API文章:
http://diveintohtml5.info/history.html
设置相对链接
<base>在<head>文档中设置.这可能位于Angular应用的根index.html文件中.找到<base>标记,并将其设置为您希望应用的根网址.例如: <base href="/">
旧浏览器的后备
结论
| 归档时间： |
|
| 查看次数： |
176971 次 |
| 最近记录： |