Question

在我的网站上，如果我加载模板然后刷新该页面，我会找不到＆＃34;页面＃34;错误。有什么方法可以阻止这种情况吗？

我可以发布代码，但我不太确定哪条代码有价值。这是我的主页（模板被拉入的地方）：

<!DOCTYPE html>
<html data-ng-app="MainApp">
    <head >
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" type="image/x-icon" href="img/computer.ico" />
        <title>Erica Peharda</title>
        <!--angular uses this base element which path to use when it gets any front end resource- this is the root b/c of "/"-->
        <base href='/'>
    </head>

    <body>
        <div class='container1'>
            <div class='page-header'>
            <nav class="navbar navbar-default">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="/">Welcome to EP Web Developing!</a>
                    </div>

                    <!--default menu bar below-->
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/"><i class="fa fa-home"></i>Home</a></li>
                        <li><a href="/about"><i class="fa fa-shield"></i>About Me</a></li>
                        <li><a href="/contact"><i class="fa fa-comment"></i>Contact for a Quote</a></li>
                        <li><a href="/projects"><i class="fa fa-comment"></i>Projects</a></li>
                    </ul>
                </div>
            </nav>


                <h1 class="titleText pull-left">Erica Peharda</h1>
                <!--got code below from mycountdown.org-->
                <div class="countdownContainer pull-right">
                    <noscript>
                        <div align="center" class="noCountdown">
                        </div>
                    </noscript>
                    <script type="text/javascript" src="http://mycalendar.org/calendar.php?cp3_Hex=2D00F9&cp2_Hex=F4EAF9&cp1_Hex=0E0E0F&ham=0&img=&hbg=0&hfg=1&sid=0&fwdt=150&text1=Halloween is on 31st October 2015&group=Holiday&calendar=International&widget_number=3">
                    </script>
                </div>
                <div class="photobanner">
                    <img class="first" src="img/pic1.jpg"/>
                    <img src="img/pic2.jpg"/>
                    <img src="img/pic3.jpg"/>
                    <img src="img/pic4.jpg"/>
                    <img src="img/pic1.jpg"/>
                    <img src="img/pic2.jpg"/>
                    <img src="img/pic3.jpg"/>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <a href="https://twitter.com/epeharda"><img class="twitter" src="img/twitter.png"/></a> <a href="https://www.facebook.com/epeharda"><img class="twitter" src="img/facebook.png"/></a>
                    </div>


                </div>

            </div>
                    <!--the place holder to render our view dependent on the route-->
            <div class="row">
                <div class="col-sm-12" ng-view>


                </div>
            </div>
        </div>

        <script type='text/javascript' src="lib/jquery/dist/jquery.min.js"></script>
                <link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
        <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>

        <script type="text/javascript" src="lib/angular/angular.min.js"></script>
        <script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
        <script type="text/javascript" src="lib/angular-resource/angular-resource.min.js"></script>
        <script type="text/javascript" src="src/app.js"></script>
        <script type="text/javascript" src="src/controller.js"></script>
        <script type="text/javascript" src="src/factories.js"></script>
        <script type="text/javascript" src="src/filter.js"></script>
        <script type="text/javascript" src="src/style.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <link href='http://fonts.googleapis.com/css?family=Asap' rel='stylesheet' type='text/css'>

    </body>
</html>

提前致谢!!

这是我的路由器配置： angular.module（＆＃39; MainApp＆＃39;，[＆＃39; ngRoute＆＃39;，＆＃39; ngResource＆＃39;]）

.config(function($routeProvider, $locationProvider){
    $routeProvider  
        .when('/',{
            templateUrl:'views/home.html',
            contorller: 'HomeController'
        })  
        .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutController'
        })
        .when('/contact',{
            templateUrl: 'views/contact.html',
            controller: 'EmailController'
        })
        .when('/projects',{
            templateUrl: 'views/projects.html',
            controller: 'ProjectController'
        })  
        .otherwise({ redirectTo: '/' });
        //this is incase we need to add the #!
    $locationProvider.html5Mode(
    true);
});

Answer 1

在我最终缩小了我需要搜索的内容之后，我找到了这个解决方案：

Still getting 'Not Found' when manually refreshing with angular.js route

它与启用HTML5模式有关。您需要使用以下代码编辑.htaccess文件，以便刷新页面以重新路由到index.html文件：

<IfModule mod_rewrite.c> 
Options +FollowSymlinks 
RewriteEngine On 
RewriteBase / 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_URI} !^/$ 
RewriteRule ^.*$ index.html
</IfModule>

这是该页面上的最后一个回复（不确定为什么它没有得到更多的赞成 - 这是在详尽搜索之后唯一有效的方法）。

谢谢大家！

Answer 2

您能提供路由器配置吗？它可能发生在html5模式下。如果你已配置它。

Answer 3

我还想补充一点，这可能是服务器端。尝试在Chrome中打开javascript控制台，然后转到“网络”标签。（或在任何浏览器中）。查看每一行，找到返回404错误的红线。查看请求网址，如果a）请求网址错误或b）该网址没有任何内容，您将能够解决问题。

Here's some info on the debugging within the network tab in Chrome。我建议，因为它会在很长一段时间后解决你的问题！

Answer 4

您需要将服务器配置为针对所有/index.html 404错误返回text/html。另一种方法是将/index.html复制为404.html（或者您的404文档）。

AngularJS模板重新加载和页面消失

4 个答案: