angular.js - angularjs中路由的HTML5模式下的URL問題
問題描述
在angularjs的路由中使用HTML5模式，結(jié)果無法加載模版（templateUrl沒有發(fā)送http請(qǐng)求），而且URL中還出現(xiàn)的轉(zhuǎn)義。但使用標(biāo)簽?zāi)Ｊ綍r(shí)一切OK，求大佬告知？<!DOCTYPE html><html lang='en'><head>
<meta charset='UTF-8'><base href='http://www.leifengta.com.cn/' ><title>Title</title><script src='http://www.leifengta.com.cn/wenda/angular.min.js'></script><script src='http://www.leifengta.com.cn/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='http://www.leifengta.com.cn/wenda/3466.html#/first'>first</a><a href='http://www.leifengta.com.cn/wenda/3466.html#/second'>second</a>
</p><p ng-view></p></body></html>
問題解答
回答1：目錄結(jié)構(gòu)
模板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> <!--后面需根據(jù)部署后的實(shí)際路徑做調(diào)整--> <base href='http://www.leifengta.com.cn/' > <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='http://www.leifengta.com.cn/first'>first</a> <a href='http://www.leifengta.com.cn/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里的#號(hào)
相關(guān)文章：
1. mac連接阿里云docker集群，已經(jīng)卡了2天了，求問？2. docker網(wǎng)絡(luò)端口映射，沒有方便點(diǎn)的操作方法么？3. debian - docker依賴的aufs-tools源碼哪里可以找到啊？4. 百度地圖api - Android 百度地圖 集成了定位，導(dǎo)航 相互的jar包有沖突？5. vim - docker中新的ubuntu12.04鏡像,運(yùn)行vi提示,找不到命名.6. 為什么我ping不通我的docker容器呢？？？7. angular.js - angular內(nèi)容過長(zhǎng)展開收起效果8. html5和Flash對(duì)抗是什么情況？9. golang - 用IDE看docker源碼時(shí)的小問題10. docker images顯示的鏡像過多，狗眼被亮瞎了，怎么辦？
網(wǎng)公網(wǎng)安備