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

【问题标题】：AngularJS template reload and page disappearsAngularJS模板重新加载和页面消失
【发布时间】：2015-09-05 23:15:44
【问题描述】：

在我的网站上，如果我加载模板然后刷新该页面，我会收到“找不到页面”错误。有什么办法可以预防吗？

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

<!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('MainApp',['ngRoute', 'ngResource'])

.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);
});

【问题讨论】：

404 与 angular/js 并不真正相关，而是与您的服务器相关...确保页面服务正确？

标签： javascript angularjs templates

【解决方案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>

这是页面上的最后一个响应（不知道为什么它没有得到更多的支持 - 这是经过详尽搜索后唯一有效的方法）。

谢谢大家！

【讨论】：

这是一个非常有趣的问题。感谢您发布您的答案！
我今天遇到了与 ui 路由完全相同的问题。我的问题是我的路线在它们之前缺少斜线'/'，就像url: "/countries" 。所以当我刷新页面时，它给我播下了空白页。愚蠢的错误，但如果这对任何人都有帮助。

【解决方案2】：

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

【讨论】：

谢谢，我会联系 iPage 看看能否完成。我正在考虑切换托管站点-您认为这会解决问题吗？这是我使用的第一个也是唯一一个托管网站，所以我想知道是否有更好的 Angular 托管网站。
如果您了解服务器，我会选择数字海洋。您被授予 root 访问权限，并且可以随心所欲地构建您的服务器。每月 5 美元。

【解决方案3】：

我还要补充一点，这可能是服务器端。尝试在 Chrome 中打开 javascript 控制台并转到“网络”选项卡。（或在任何浏览器中）。查看每一行并找到返回 404 错误的红线。查看请求 url，如果 a) 该请求 url 错误或 b) 该 url 不存在任何内容，您将能够从那里解决问题。

Here's some info on the debugging within the network tab in Chrome。我推荐，因为它会在以后解决你很多时间！

【讨论】：

我这样做了，发现它指向了正确的站点。它没有得到我在另一页上输入的角度路线。我一直在 ipage 的支持下来回发送电子邮件（我用它们来托管），这是他们的回复：
"我能够复制网站 epeharda.com 的问题。不仅是“联系报价”链接，刷新加载后本网站中的所有链接都出现“找不到页面”错误。这不是来自我们服务器的问题。问题似乎是该网站的脚本。请更正您的脚本或联系网络开发人员解决此问题。对于给您带来的不便，我们深表歉意。"
现在看起来它与 html5 设置和 .htaccess 文件有关。这是一个我得到很多很棒信息的网站：ericduran.io/2013/05/31/angular-html5Mode-with-yeoman 它仍然无法正常工作，但是当我有解决方案时我会更新。谢谢大家！

【解决方案4】：

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

【讨论】：

我刚刚更新了代码。我确实有html5模式。你认为这是问题吗？我不知道为什么它可以在我的本地主机上运行，但当我将它上传到我的托管站点 (ipage.com) 时却不行。