无刷新切换路由,即url变了,加载了相应的模板,但是框架模板页index.html却没有刷新。为了实现这个功能,angularjs针对新旧浏览器提供了两种方式,
针对老式浏览器可以使用标签模式,
针对现代浏览器可以使用HTML5模式。
前者在URL中使用#来防止页面刷新,同时形成浏览器历史记录。
具体形式如下
http://yoursite.com/#!/inbox/all
AngularJS支持的另外一种路由模式是 html5 模式。在这个模式中,URL看起来和普通的URL一样(在老式浏览器中看起来还是使用标签的URL)。例如,同样的路由在HTML5模式中看起来
是这样的:
http://yoursite.com/inbox/all
在AngularJS内部, location 服务通过HTML5历史API让应用能够使用普通的URL路径来路由。当浏览器不支持HTML5历史API时, location 服务会自动使用标签模式的URL作为替代方案。
两者之间的切换通过$locationProvider.html5Mode进行切换。
1、当设置
$locationProvider.html5Mode(true);
angualar 默认会将其定位到服务器根目录,
比如
http://192.168.22.137:8080//page/Book/book.html
会被反转成
http://192.168.22.137:8080
此时设置ng-view,时如下
<a href="/page/Book/Moby">Moby</a>
路由配置如下:
$routeProvider.when('/page/Book/:bookId', {
templateUrl: 'book.html',
controller: BookCntl,
controllerAs: 'book'
})
2、当设置
$locationProvider.html5Mode(false);//默认false
angualar 默认会url作处理,比如
http://192.168.22.137:8080//page/Book/book.html
会被反转成
http://192.168.22.137:8080//page/Book/book.html
此时设置ng-view,时如下
<a href="#/Moby">Moby</a>
路由配置如下:
$routeProvider.when('/:bookId', {
templateUrl: 'book.html',
controller: BookCntl,
controllerAs: 'book'
})
示例:
book.html
controller: {{name}}<br />
Book Id: {{params.bookId}}<br />
chapter.html
controller: {{name}}<br/>
Book Id: {{params.bookId}}<br/>
Chapter Id: {{params.chapterId}}
不使用 $locationProvider.html5Mode(true);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head'))
.append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</head>
<body ng-app="ngRouteExample">
<div ng-controller="MainController">
选一个:
<a href="#Book/Moby">Moby</a> |
<a href="#Book/Moby/ch/1">Moby: Ch1</a> |
<a href="#Book/Gatsby">Gatsby</a> |
<a href="#Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
<a href="#Book/Scarlet">Scarlet Letter</a><br/>
<div ng-view></div>
<hr/>
<pre>$location.path() = {{$location.path()}}</pre>
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{$route.current.params}}</pre>
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
<pre>$routeParams = {{$routeParams}}</pre>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
/**
* Created by Administrator on 2017/2/27.
*/
(function (angular) {
'use strict';
/*将"use strict"放在脚本文件的第一行,则整个脚本都将以"严格模式"运行。
* 将"use strict"放在函数体的第一行,则整个函数以"严格模式"运行。
* 设立"严格模式"的目的,主要有以下几个:
- 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
- 消除代码运行的一些不安全之处,保证代码运行的安全;
- 提高编译器效率,增加运行速度;
- 为未来新版本的Javascript做好铺垫。*/
angular.module('ngRouteExample', ['ngRoute'])
.controller('MainController', function ($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
// $scope.$on('$routeChangeSuccess', function(evt, next, previous) {
// debugger;
// });
})
.controller('BookController', function ($scope, $routeParams) {
$scope.name = "BookController";
$scope.params = $routeParams;
})
.controller('ChapterController', function ($scope, $routeParams) {
$scope.name = "ChapterController";
$scope.params = $routeParams;
})
.config(function ($routeProvider, $locationProvider) {
$routeProvider
//不使用$locationProvider.html5Mode(true); /*http://localhost:63342/untitled18/app/index7.html
#/Book/Scarlet*/ /*http://localhost:63342/untitled18/app/index7.html
#/Book/Gatsby*/ /*http://localhost:63342/untitled18/app/index7.html
#/Book/Moby */
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
// 1秒延迟
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
})
//不使用$locationProvider.html5Mode(true);
/*http://localhost:63342/untitled18/app/index7.html
#/Book/Gatsby/ch/4?key=value*/
/*http://localhost:63342/untitled18/app/index7.html
#/Book/Moby/ch/1*/
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
// configure html5 to get links working on jsfiddle
// $locationProvider.html5Mode(true);//不使用h5mode
/**/
});
})(window.angular);
使用 $locationProvider.html5Mode(true);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My AngularJS App</title>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
<script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head'))
.append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</head>
<body ng-app="ngRouteExample">
<div ng-controller="MainController">
选一个:
<a href="Book/Moby">Moby</a> |
<a href="Book/Moby/ch/1">Moby: Ch1</a> |
<a href="Book/Gatsby">Gatsby</a> |
<a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
<a href="Book/Scarlet">Scarlet Letter</a><br/>
<div ng-view></div>
<hr/>
<pre>$location.path() = {{$location.path()}}</pre>
<pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
<pre>$route.current.params = {{$route.current.params}}</pre>
<pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
<pre>$routeParams = {{$routeParams}}</pre>
</div>
<script src="script.js"></script>
</body>
</html>
script.js
/**
* Created by Administrator on 2017/2/27.
*/
(function (angular) {
'use strict';
/*将"use strict"放在脚本文件的第一行,则整个脚本都将以"严格模式"运行。
* 将"use strict"放在函数体的第一行,则整个函数以"严格模式"运行。
* 设立"严格模式"的目的,主要有以下几个:
- 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
- 消除代码运行的一些不安全之处,保证代码运行的安全;
- 提高编译器效率,增加运行速度;
- 为未来新版本的Javascript做好铺垫。*/
angular.module('ngRouteExample', ['ngRoute'])
.controller('MainController', function ($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
// $scope.$on('$routeChangeSuccess', function(evt, next, previous) {
// debugger;
// });
})
.controller('BookController', function ($scope, $routeParams) {
$scope.name = "BookController";
$scope.params = $routeParams;
})
.controller('ChapterController', function ($scope, $routeParams) {
$scope.name = "ChapterController";
$scope.params = $routeParams;
})
.config(function ($routeProvider, $locationProvider) {
$routeProvider
//使用$locationProvider.html5Mode(true);
/*http://localhost:63342/untitled18/app
/Book/Scarlet*/
/*http://localhost:63342/untitled18/app
/Book/Gatsby*/
/*http://localhost:63342/untitled18/app
/Book/Moby*/
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
// 1秒延迟
delay: function ($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
})
//使用$locationProvider.html5Mode(true);
/*http://localhost:63342/untitled18/app
/Book/Gatsby/ch/4?key=value*/
/*http://localhost:63342/untitled18/app
/Book/Moby/ch/1*/
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);//使用html5mode
/**/
});
})(window.angular);
使用了$locationProvider.html5Mode(true);,如果要转换成不使用html5mode
1、
<a href="Book/Moby">Moby</a>
在其href参数前加一个“#”,变成
<a href="#Book/Moby">Moby</a> |
2、去掉$locationProvider.html5Mode(true);,或者设置为false。
3、得到的url对比:
//使用$locationProvider.html5Mode(true);
/*http://localhost:63342/untitled18/app
/Book/Gatsby/ch/4?key=value*/
/*http://localhost:63342/untitled18/app
/Book/Moby/ch/1*/
//不使用$locationProvider.html5Mode(true);
/*http://localhost:63342/untitled18/app/index7.html
#/Book/Gatsby/ch/4?key=value*/
/*http://localhost:63342/untitled18/app/index7.html
#/Book/Moby/ch/1*/
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});