Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
324 views
in Technique[技术] by (71.8m points)

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>

图片描述


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

目录结构
图片描述

模板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

参考资料


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...