javascript - AngularJS template reload and page disappears -
on website, if load template , refresh page, "page not found" error. there way prevent this?
i can post code, i'm not quite sure piece of code valuable. here home page (where templates 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 base element path use when gets front end resource- 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 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 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 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 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 render our view dependent on 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 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 incase need add #! $locationprovider.html5mode( true); });
after narrowed down needed search for, found solution:
still getting 'not found' when manually refreshing angular.js route
it has enabling html5 mode. need edit .htaccess file following code in order page refresh re-route index.html file:
<ifmodule mod_rewrite.c> options +followsymlinks rewriteengine on rewritebase / rewritecond %{request_filename} !-f rewritecond %{request_uri} !^/$ rewriterule ^.*$ index.html </ifmodule> it last response on page (not sure why didn't more upvotes- thing worked after exhaustive search).
thank everyone!
Comments
Post a Comment