我想在angularJS中激活html5Mode,但我不知道为什么它不起作用.我的代码有什么问题吗？
angular
.module('myApp',[])
.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', {
templateUrl: 'partials/home.html',
controller: HomeCtrl
});
$routeProvider.when('/tags/:tagId', {
templateUrl: 'partials/result.html',
controller: TagResultCtrl
});
//$routeProvider.otherwise({redirectTo: '/home', controller: HomeCtrl});
});
在HTML中
<a href="tags/{{tag.id}}"><img data-ng-src="{{tag.imageUrl}}"></a>
jai*_*ime 62
我看到的唯一问题是相关链接和模板因此没有正确加载.
相关链接
请务必检查所有相关链接,图像,脚本等.您必须在主html文件(
<base href="/my-base">)的头部指定url base,或者必须使用绝对URL(从头开始/),因为相对url将被解析为绝对url使用文档的初始绝对URL,这通常不同于应用程序的根目录.
在您的情况下,您可以/在href属性中添加正斜杠(自动$location.path执行此操作),也可以在配置路径时添加正斜杠.这样可以避免路由,并确保模板正确加载.templateUrlexample.com/tags/another
这是一个有效的例子:
<div>
<a href="/">Home</a> |
<a href="/another">another</a> |
<a href="/tags/1">tags/1</a>
</div>
<div ng-view></div>
和
app.config(function($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/partials/template1.html',
controller: 'ctrl1'
})
.when('/tags/:tagId', {
templateUrl: '/partials/template2.html',
controller: 'ctrl2'
})
.when('/another', {
templateUrl: '/partials/template1.html',
controller: 'ctrl1'
})
.otherwise({ redirectTo: '/' });
});
如果使用Chrome,您需要从服务器运行它.
以下是如何使用requireBase=false标志配置 $locationProvider 以避免设置 base href <head><base href="/"></head>：
var app = angular.module("hwapp", ['ngRoute']);
app.config(function($locationProvider){
$locationProvider.html5Mode({
enabled: true,
requireBase: false
})
});
| 归档时间： |
|
| 查看次数： |
170637 次 |
| 最近记录： |