html5Mode

最新推荐文章于 2021-06-30 17:21:24 发布

Mars-xq

最新推荐文章于 2021-06-30 17:21:24 发布

阅读量1k

点赞数

分类专栏： angularjs angularjs

本文链接：https://blog.csdn.net/sinat_31057219/article/details/58135334

版权

angularjs 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

angularjs

37 篇文章 0 订阅

订阅专栏

无刷新切换路由，即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'
                });

Mars-xq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5Mode

无刷新切换路由，即url变了，加载了相应的模板，但是框架模板页index.html却没有刷新。为了实现这个功能，angularjs针对新旧浏览器提供了两种方式，针对老式浏览器可以使用标签模式，针对现代浏览器可以使用HTML5模式。前者在URL中使用#来防止页面刷新，同时形成浏览器历史记录。具体形式如下http://yoursite.com/#!/inbox/allAngularJS支
复制链接

扫一扫

专栏目录