dimanche 12 juin 2016

How to Implement angular push state on apache

I followed the directions for implementing push state by codelord.net" and got the .htaccess code from here.

When I click on a navigation link, the URL is shown as

http://writers-tryst-test.ron-tornambe.com/writers

which looks correct, but I receive the following browser error:

The writers-tryst-test.ron-tornambe.com page isn’t working

I am a Linux newbie and a bit confused about where the .htaccess root file is located. I am on a GoDaddy shared server. I appended the code in the .htaccess file that is in the same folder that contains public_html.

.htaccess

<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE
    <IfModule mod_setenvif.c>
        # Netscape 4.x has some problems...
        BrowserMatch ^Mozilla/4 gzip-only-text/html

        # Netscape 4.06-4.08 have some more problems
        BrowserMatch ^Mozilla/4.0[678] no-gzip

        # MSIE masquerades as Netscape, but it is fine
        # BrowserMatch bMSIE !no-gzip !gzip-only-text/html

        # NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
        # the above regex won't work. You can use the following
        # workaround to get the desired effect:
        BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html

        # Don't compress images
        SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
    </IfModule>

    <IfModule mod_headers.c>
        # Make sure proxies don't deliver the wrong content
        Header append Vary User-Agent env=!dont-vary
    </IfModule>
</IfModule>
RewriteCond %{SERVER_PORT} 80      

# Change YOUR_TOKEN to your prerender token and uncomment that line if you want to cache URLs and view crawl stats
# Change http://example.com (at the end of the last RewriteRule) to your website URL

<IfModule mod_headers.c>
RequestHeader set X-Prerender-Token "my-token"
</IfModule>


<IfModule mod_rewrite.c>
RewriteEngine On

<IfModule mod_proxy_http.c>
RewriteCond %{HTTP_USER_AGENT} baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC,OR]
RewriteCond %{QUERY_STRING} _escaped_fragment_
# Only proxy the request to Prerender if it's a request for HTML
RewriteRule ^(?!.*?(.js|.css|.xml|.less|.png|.jpg|.jpeg|.gif|.pdf|.doc|.txt|.ico|.rss|.zip|.mp3|.rar|.exe|.wmv|.doc|.avi|.ppt|.mpg|.mpeg|.tif|.wav|.mov|.psd|.ai|.xls|.mp4|.m4a|.swf|.dat|.dmg|.iso|.flv|.m4v|.torrent|.ttf|.woff))(index.html.var)(.*) http://service.prerender.io/http://writers-tryst.ron-tornambe.com/$3 [P,L]
</IfModule>

RewriteEngine On  
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  # If the requested resource doesn't exist, use index.html
  RewriteRule ^ /index.html

angular JS

angular.module('wtApp').config(function($locationProvider) {
    $locationProvider.html5Mode(true);
});

var wtApp = angular.module('wtApp', ['ngRoute'])

wtApp.config(function ($routeProvider) { $routeProvider // route for the home page .when('/', { templateUrl: 'pages/home.html', controller: 'mainController' }) // route for the writers page .when('/writers', { templateUrl: 'pages/writers.html', controller: 'writersController' }) ... HTML

... ...

                <div class="collapse navbar-collapse" id="Writers-Tryst">
                    <ul class="nav navbar-nav">
                        <li class="active"><a id="homepage" href="/"><i class="glyphicon glyphicon-home"></i> Home</a></li>
                        <li><a href="writers" class="glyphicon glyphicon-book"> Writers</a></li> 
                        <li><a href="enablers" id="enablers-link" class="glyphicon glyphicon-thumbs-up"> Enablers</a></li> 
                        <li><a href="about" class="glyphicon glyphicon-info-sign"> About</a></li> 
                        <li><a href="privacy" class="glyphicon glyphicon-info-sign"> Privacy/Rules</a></li> 
                        <li><a href="contact" class="glyphicon glyphicon-envelope"> Contact</a></li> 
                    </ul>

...

Aucun commentaire:

Enregistrer un commentaire