angular.js - angularjs中路由的HTML5模式下的URL问题
问题描述
在angularjs的路由中使用HTML5模式，结果无法加载模版（templateUrl没有发送http请求），而且URL中还出现的转义。但使用标签模式时一切OK，求大佬告知？<!DOCTYPE html><html lang='en'><head>
<meta charset='UTF-8'><base href='https://www.haobala.com/' ><title>Title</title><script src='https://www.haobala.com/wenda/angular.min.js'></script><script src='https://www.haobala.com/wenda/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'><p>
<a href='https://www.haobala.com/wenda/3466.html#/first'>first</a><a href='https://www.haobala.com/wenda/3466.html#/second'>second</a>
</p><p ng-view></p></body></html>
问题解答
回答1：目录结构
模板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='https://www.haobala.com/' > <script src='https://cdn.bootcss.com/angular.js/1.5.11/angular.min.js'></script> <script src='https://cdn.bootcss.com/angular.js/1.5.11/angular-route.min.js'></script></head><body ng-app='myApp' ng-controller='myController'><p> <a href='https://www.haobala.com/first'>first</a> <a href='https://www.haobala.com/second'>second</a></p><p ng-view></p><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
参考资料
Angularjs html5mode模式路由
angular路由去掉的URL里的#号
相关文章：
1. javascript - easyui textbox绑定onchange事件不能获取最新的文本框的值2. javascript - 一个字符串转换成数字,例子就是a="2,322.222",b=’1,211.21’,如何在angualr中执行相减3. 利用百度地图API定位及附件商家信息服务4. javascript - 如何在windows下搭建react开发环境上，实现网站的react版本5. javascript - 读取页面源码，页面中所有的换行都被当成<br/>读取出来 了，，求解应该怎么让它被正确的解析6. windows - python pymysql 返回值是int类型7. mysql sql where id in(25,12,87) 结果集如何用按照 25 12 87排序?8. PHP类属性声明？9. html5 - 移动端通过拖拽实现两个元素的位置互换10. javascript - js 修改表格元素的，可以用DOM操作实现吗？
网公网安备