html5Mode

2019-11-06 09:55:34

字体：大中小

来源：转载

供稿：网友

无刷新切换路由，即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,时如下

路由配置如下:

$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,时如下

路由配置如下:

$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、

在其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' });

上一篇：责任链模式

下一篇：RecyclerView 必知必会