Jump to content

AngularJS html5Mode routing issue


haibogu
 Share

Recommended Posts

Hi all,

I'm experimenting building a content site based on AngularJS and Processwire.

I‘ve turned on the html5Mode in angularjs, everything works so far re agularjs routing, but when I try to refresh a page, only loads a page without header (thus no js/style). This to me seems a classic problem with server setup ( http://stackoverflow.com/questions/16569841/reloading-the-page-gives-wrong-get-request-with-angularjs-html5-mode/16570533#16570533 ), which requires htaccess setup (I'm on Apache server).

But not quite sure how to set up the htaccess? Attached is my htaccess, with below are some routing settings of angular:

scotchApp.config(function($routeProvider,$locationProvider) {
    $routeProvider
        .when('/news', {
            templateUrl : 'news',
            controller  : 'mainController'
        })
        .when('/about', {
            templateUrl : 'about',
            controller  : 'aboutController'
        })
        .otherwise({
            templateUrl : 'news',
            controller  : 'mainController'
        });
    $locationProvider.html5Mode(true);
});

 

THANKS advance for all your help!

htaccess.txt

Edited by haibogu
minor typo & formatting...
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Liam88
      Hi,

      After years of just playing around with Processwire I have asked 3 q's in the same week. It's all about working with forms, parameters etc and so I'm hoping this ordeal is nearly over!
      I currently have a checkbox filter:
      <form id="abFilter" method="get" role="form" action="'.$page->url().'"> <div class="list-group"> <h3>Content Type</h3>'; $cont = $fields->get('ab_content'); $contents = $cont->type->getOptions($cont); foreach($contents as $ab_cont){ echo' <div class="list-group-item checkbox"> <input type="checkbox" class="" id="'.$ab_cont->title.'" name="content" value="'.$ab_cont->title.'"'; if (in_array($ab_cont->title, $contArray)){ echo "checked"; } echo'> <label for="'.$ab_cont->title.'">'.$ab_cont->title.'</label> </div>'; } echo' </div>'; //end of filter 1 //start of filter 2 echo' <div class="list-group"> <h3>Channels</h3>'; $chan = $fields->get('ab_channels'); $channel = $chan->type->getOptions($chan); foreach($channel as $ab_chan){ echo' <div class="list-group-item checkbox"> <input type="checkbox" class="" id="'.$ab_chan->title.'" name="channel" value="'.$ab_chan->title.'"'; if (in_array($ab_chan->title, $chanArray)){ echo "checked"; } echo'> <label for="'.$ab_chan->title.'">'.$ab_chan->title.'</label> </div>'; } echo' </div>'; ?> <button id="select">Get Checked Checkboxes</button> </form><!-- end of form --> I also have a piece of script which selects all the checkboxes and then outputs them into readable parameters for the URL which then passes into the $inputs. The reason for the script is to not have duplicate filters like ?ab=1&ab=2 and the script changes it to ab=1_2 which on the input gets exploded into an array. 
      document.querySelector("form").onsubmit=ev=>{ ev.preventDefault(); let o={}; ev.target.querySelectorAll("[name]:checked").forEach(el=>{ (o[el.name]=o[el.name]||[]).push(el.value)}) console.log(location.pathname+"?"+Object.entries(o).map(([v,f])=>v+"="+f.join("_")).join("&")); document.location.href = location.pathname+"?"+Object.entries(o).map(([v,f])=>v+"="+f.join("_")).join("&"); } Here is $inputs and so on on the page:
      //Default selector to get ALL products $baseSelector = "template='adbank_pages',sort=published,include=all,status!=hidden,limit=2"; $selector = "template='adbank_pages',sort=published,include=all,status!=hidden,limit=2"; $input->whitelist('channel',explode("_", $channel)); // Use this to append to the $items filter if($channel){ $chanArray = explode("_", $channel); $chan = $channel = str_replace('_', '|', $channel); $selector = $selector .= ",ab_channels=$chan"; } $test = $pages->find($selector); // This is just testing if the $selector choise returns and if not use page filter without filters. if(count($test) > 0){ $items = $pages->find($selector); // $items with the parameter filter // Example - "template='adbank_pages',sort=published,include=all,status!=hidden,limit=2,ab_channels=facebook-ads" // Example (multi choice) - "template='adbank_pages',sort=published,include=all,status!=hidden,limit=2,ab_channels=facebook-ads|instagram-ads" // Example (with other filters) - "template='adbank_pages',sort=published,include=all,status!=hidden,limit=2,ab_channels=facebook-ads,ab_content=video|static" }else{ $items = $pages->find($baseSelector); // Example - "template='adbank_pages',sort=published,include=all,status!=hidden,limit=2" } $total = $items->getTotal(); I have stripped out a few of the other filters from the above to try keep it a little more concise (haha). Now I appreciate the post may be long but here we are at the end!
      The URL I get on page 1 of the filter results would look like: example.com/blog/?channel=facebook-ads_instagram-ads
      If I click page 2 the url changes to - example.com/blog/page2/?channel=
      If I then click back to page 1 it changes to - example.com/blog/?channel=
      So I'm hoping you can see my problem and hoping someone can assist. I need to work out how to keep the parameters in the url but also if I remove that filter for that parameter to remove.
      This whole process works without pagination but with pagination it has a different behaviour.
      Thank you in advance
    • By wwwouter
      Some context: I want to use PHP variables in my CSS (more info below) and found a solution on CSS-tricks that looks fairly elegant and somewhat solid to me. It's pretty simple, I created a file style.css.php inside the site/templates/ directory and load that in my page head. In style.css.php is the following:
      <?php header("Content-type: text/css; charset: UTF-8"); header("Charset:utf-8"); if ($homepage->hero_image) { echo <<<CSS .hero { background: url($homepage->hero_image->url) no-repeat; } CSS; } ?> Because of the following RewriteCond (line 373) in the htaccess file the server sends a 403 error back when the file is requested:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/.*\.(php|html?|tpl|inc))($|/) [NC,OR] (My htaccess file is @version 3.0 and @htaccessVersion 301)
      This is how I thought I could fix that (based on these answers on stack overflow) but it does not work:
      # Block access to any PHP or markup files in /site/templates/ or /site-*/templates/ RewriteCond %{REQUEST_URI} (^|/)(site|site-[^/]+)/templates($|/|/((?!style\.css).)*\.(php|html?|tpl|inc))($|/) [NC,OR] I tested the rule with htacess tester and htaccess check and both worked for me, but on my site I still get a 403 instead of the file.
      I'm working on localhost, using MAMP (not sure if that's relevant).
      A bit more about what I want to do achieve specifically:
      I want to use an image as a background-image for an element, not place it as an image. This image is provided by the user via a field and can therefore change.
      I know I can achieve this like this:
      echo "<section class='hero' style='background-image: url($page->hero_image->url)'></section>"; But I would prefer a method other than inlining because of scalability and cleanliness. (I admit the extra link in the page head is not ideal either)
       
      P.s. this is my first post here, I hope it's submitted in the right forum and my explanation is clear.
    • By RDC
      Is the right way to get Processwire to skip a folder (ie not process it as its running a different CMS) to put
      RewriteCond %{REQUEST_URI} !^/shop/.*$
      just before 
      RewriteRule ^(.*)$ index.php?it=$1 [L,QSA]
      in .htaccess?
    • By humanafterall
      Hi,
      I have a URL field that will sometimes have relative/local URLs on a multilingual site, for example /contact/ 

      However the URL field does not seem to pick up when I'm on another language, for example /fr/ so I'm taken to the default language page for /contact/ rather than /fr/contact/
      Is there a way to make the URL fields play well with a multi-language site?
      Thanks!
       
    • By Spiria
      I am writing here instead of the ProCache forum because I have the impression that several nginx experts could solve this. In its new version, Procache proposes new .htaccess rules that are difficult to translate into nginx rules. We currently have a problem with the trailing slash of URLs which gives us a bad score in SEO analysis tools such as semrush.com. 
      Indeed, a canonical URL is either without or with "/", but cannot be served by both options. Although ProcessWire without ProCache respects this rule, ProCache has no difficulty serving both, which is considered an SEO optimisation fault. I believe that ProCache version 2 solves this problem with these new rules, but I can't understand the following. Does anyone have any idea how to translate this into a nginx rule?
      Attached also the whole proposed .htaccess for ProcessWire.
      # PROCACHE v2/31885be14d6cfb4b2b0d3e533260bded -------------------------------------------------- RewriteCond %{REQUEST_METHOD} !=POST RewriteCond %{QUERY_STRING} !.*=.* RewriteRule ^.*/$ - [E=pwpcstep:pour,E=pwpcname:index] RewriteCond %{ENV:pwpcstep} "=pour" RewriteCond %{HTTP_COOKIE} !^.*(wire_challenge|wires_challenge).*$ RewriteRule ^.*/$ - [E=pwpcstep:stir,E=pwpcpath:%{DOCUMENT_ROOT}/site/assets/ProCache-00478359c5e65dbada1075bfbd4] RewriteCond %{ENV:pwpcstep} "=stir" RewriteCond %{ENV:pwpcpath}/$0/%{ENV:pwpcname}.html -f RewriteRule ^.*$ - [E=pwpcstep:drink,E=pwpcfile:$0/%{ENV:pwpcname}.html] RewriteCond %{ENV:pwpcstep} "=drink" RewriteRule ^(.*) %{ENV:pwpcpath}/%{ENV:pwpcfile} [L] <ifModule mod_headers.c> Header set X-PWPC "ProCache" env=pwpcstep Header set X-Powered-By "ProcessWire CMS, ProCache" env=pwpcstep </ifModule> RewriteCond %{REQUEST_URI} "^/~?[-_.a-zA-Z0-9/]*$" # /PROCACHE -------------------------------------------------------------------------------------  
      .htaccess-procache
×
×
  • Create New...