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 必知必會