Twitter Bootstrap Question posted in

Twitter bootstrap – AngularJS template reload and page disappears

On my website, if I load a template and then refresh that page, I get a “page not found” error. Is there any way to prevent this?

I can post the code, but I’m not quite sure which piece of code would be valuable. Here is my home page (where the templates are pulled in):

<!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>

Thanks in advance!!

Here is my router config:
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);
});
Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    After I finally narrowed down what I needed to search for, I found this solution:

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

    It has to do with enabling HTML5 mode. You need to edit the .htaccess file with the following code in order to get the page refresh to re-route to your index.html file:

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

    It was the last response on the page (not sure why it didn't get more upvotes- it was the only thing that worked after an exhaustive search).

    Thank you everyone!


  2. 0

    Can you provide your router configuration ? It may happen from html5 mode .If you have configured it.

    Login or Signup to reply.
  3. 0

    I would also add that this is probably server side. Try to open the javascript console in Chrome and go to the Network tab. (or in any browser for that matter). Look at each line and find the red line that’s returning a 404 error. Look at the request url and from there you’ll be able to solve the problem if a) that request url is wrong or b) nothing exists at that url.

    Here’s some info on the debugging within the network tab in Chrome. I recommend as it will solve you a lot of time later!

    Login or Signup to reply.
  4. 0

    You need to configure your server to return /index.html for all text/html 404 errors. Another way to go about this is to copy /index.html as 404.html (or whatever your 404 document is).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search