0

第一手,这是我的代码:

配置应用程序:

promoApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
        $locationProvider.html5Mode(true);
        $routeProvider.
        when('/home',{
            templateUrl: 'views/home.html',
            controller: 'HomeController'
        }).
        when('/web',{
            templateUrl: 'views/web.html',
            controller: 'WebController'
        }).
        when('/portfolio',{
            templateUrl: 'views/portfolio.html'
        }).
        when('/game',{
            templateUrl: 'views/game.html'
        }).
        when('/contact',{
            templateUrl: 'views/contact.html',
            controller: 'ContactController'
        }).
        when('/admin',{
            templateUrl: 'views/admin.html',
            controller: 'AdminController'
        }).
        when('/blog_admin',{
            templateUrl: 'views/blog_admin.html',
            controller: 'BlogAdminController'
        }).
        when('/blog_edit', {
            templateUrl: 'views/blog_edit.html',
            controller: 'BlogEditController'
        }).
        when('/blog_edit/:blogId', {
            templateUrl: 'views/blog_edit_post.html',
            controller: 'BlogEditPostController'
        }).
        when('/blog',{
            templateUrl: 'views/blog.html',
            controller: 'BlogController'
        }).
        when('/blog/:blogId',{
            templateUrl: 'views/blog_post.html',
            controller: 'BlogPostController'
        }).
        otherwise({
            redirectTo: '/home'
        });
    }]);

我的控制器 BlogPostController:

blog.controller('BlogPostController',['$scope','$http','$upload','$routeParams','$sce',function($scope,$http,$upload,$routeParams,$sce){
        $scope.blogId = $routeParams.blogId;
        $scope.$upload = $upload.upload({
            method: 'POST',
            url: 'edit.php',
            data: {'title': $scope.blogId}
        }).success(function(data){
            if(data.error){
                $scope.resultMessage = data.message;
                $scope.result = 'bg-danger';
            }else{
                $scope.post = data;
                $scope.pastToPlainText = $sce.trustAsHtml;
            }
        });

        $http.get('backend/muestra.php').success(function(data){
            if(data.error){
                $scope.resultMessage = data.message;
                $scope.result = 'bg-danger';
            }else{
                $scope.entradas = data;
            }
        }).error(function(){
            $scope.resultMessage = "Se ha producido un error al consultar con la base de datos";
        });
    }]);

我的博客.html

<div class="container">
    <div class="row">
        <div class="col-lg-3 position-panel-blog hidden-md hidden-sm hidden-xs">
            <div class="panel panel-primary margin-index">
                <div class="panel-heading">
                    <h3 class="panel-title">Entradas recientes</h3>
                </div>
                <div class="panel-body">
                    <div ng-repeat="entrada in entradas | limitTo: 5">
                        {{$index + 1}}. <a ng-href="/blog/{{entrada.title}}" class="link-blog">{{entrada.title}}</a>
                    </div>
                </div>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Nuestros servicios web</h3>
                </div>
                <div class="panel-body">
                    <img src="images/que-ofrecemos/portada_web.jpg" alt="Nuestros servicios web" class="image-anuncio">
                    <div class="acceder">
                        <a href="#/web" class="btn btn-primary">Accede ahora</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="blog-position col-lg-8" ng-repeat="entrada in entradas">
            <div class="thumbnail">
                <div class="margin-content-blog">
                    <a ng-href="/blog/{{entrada.title}}" class="link-blog"><h1 class="format-title-blog">{{entrada.title}}</h1></a>
                    <div ng-bind-html="pastToPlainText(entrada.text)" class="text-blog"></div>
                    <slick infinite="false" dots="true" slides-to-show="3" slides-to-scroll="1">
                        <div ng-repeat="image in entrada.images track by $index">
                            <img src="{{image}}" alt="Imagen de la entrada {{entrada.title}}" class="image-post img-responsive">
                        </div>
                    </slick>
                    <div class="row">
                        <div class="col-lg-4">
                            <!-- Inserta esta etiqueta en la sección "head" o justo antes de la etiqueta "body" de cierre. -->
                            <script src="https://apis.google.com/js/platform.js" async defer>
                                {lang: 'es'}
                            </script>
                            <!-- Inserta esta etiqueta donde quieras que aparezca Botón Compartir. -->
                            <div class="g-plus" data-action="share"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

点击进入帖子时,根据$route.current.templateUrl加载模板blog_post.html,但浏览器显示的内容与blog.html相同,不显示blog_post.html模板的内容。如果没有 html5mode,这可以正常工作并且没有问题。也许 html5mode 不适用于参数链接 (/blog_edit/:blogId)。下面我用图像更好地解释这一点。

使用 html5mode 启用:

  1. 我在博客菜单中,我要点击一个帖子:(模板是blog.html) 在此处输入图像描述

  2. 单击帖子时,当前路由器将模板更改为 blog_post.html,但浏览器向我显示相同的模板 blog.html: 在此处输入图像描述

使用 html5mode 禁用:

  1. 当我在 blog.html 模板中并且我要点击帖子时: 在此处输入图像描述

  2. 当我已经点击了帖子。现在它正确地向我展示了 blog_post.html 模板: 在此处输入图像描述

4

1 回答 1

2

要支持以 HTML5 模式创建的 URL 的直接链接,您需要在服务器上重写 URL。例如,mod_rewrite如果您使用的是 Apache。

文档中

服务器端

使用这种 [HTML5] 模式需要在服务器端重写 URL,基本上你必须重写所有指向应用程序入口点的链接(例如 index.html)

如果您已经这样做了,还请提供相关的服务器配置。

于 2014-10-05T20:32:22.713 回答