angular.js - angularjs中路由的HTML5模式下的URL问题
本文介绍了angular.js - angularjs中路由的HTML5模式下的URL问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
在angularjs的路由中使用HTML5模式，结果无法加载模版（templateUrl没有发送http请求），而且URL中还出现的转义。但使用标签模式时一切OK，求大佬告知？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/" >
<title>Title</title>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
angular.module('myApp',['ngRoute'])
.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/first',{
controller:'firstCtrl',
templateUrl:'1.html'
})
.when('/second',{
controller:'secondCtrl',
templateUrl:'2.html'
})
.otherwise({
redirectTo:'/first'
});
}])
.controller('myController',function($scope,$http,$window){
})
.controller('firstCtrl',function($scope,$http){
})
.controller('secondCtrl',function($scope,$http){
});
</script></head>
<body ng-app="myApp" ng-controller="myController">
<div>
<a href="#/first">first</a>
<a href="#/second">second</a></div>
<div ng-view></div>
</body>
</html>
解决方案
目录结构
模板1 - templates/1.html
<h2>First Html</h2>模板2 - templates/1.html
<h2>Second Html</h2>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Angular Demo</title>
<!--后面需根据部署后的实际路径做调整-->
<base href="/" >
<script src="//cdn.bootcss.com/angular.js/1.5.11/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular.js/1.5.11/angular-route.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div>
<a href="/first">first</a>
<a href="/second">second</a>
</div>
<div ng-view></div>
<script>
angular.module('myApp',['ngRoute'])
.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
$locationProvider.html5Mode(true);
$routeProvider
.when('/first',{
controller:'firstCtrl',
templateUrl:'templates/1.html'
})
.when('/second',{
controller:'secondCtrl',
templateUrl:'templates/2.html'
})
.otherwise({
redirectTo:'first'
});
}])
.controller('myController',function($scope,$http,$window){
})
.controller('firstCtrl',function($scope,$http){
})
.controller('secondCtrl',function($scope,$http){
});
</script>
</body>
</html>另外路由建议使用 ui-router
参考资料
这篇关于angular.js - angularjs中路由的HTML5模式下的URL问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
