CODEWITHSUNDEEP
javascriptajaxangularjs.htaccesspushstate
Jack
Jack

Reputation: 1941

AngularJS: Removing the "#" with history.pushState()

I'm trying to prettify the urls within my Angularjs application, but I've had limited success -- I can reach the "/" route, but that's it, "/about" is unreachable.

Note: The project is located at (localhost/myngapp).

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="myngapp">
    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"></script>
    <script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.js"></script> 
    <script  type="text/javascript" src="http://localhost/myngapp/public/js/app.js"></script>   
</head>

<body data-ng-app="demoApp">
    <div data-ng-view></div>
</body>

</html>

app.js

angular.module('demoApp', ['ngRoute'])
    .config(function ($routeProvider, $locationProvider) { 
        $locationProvider.html5Mode(true); 
        $routeProvider
             .when('/', {
                 controller: 'homeCtrl',
                templateUrl: 'home.html'
             })         
             .when('/about', {
                 controller: 'aboutCtrl',
                 templateUrl: 'about.html'
             })     
            .otherwise({ redirectTo: '/' });       
    })
    .controller('homeCtrl', function ($scope) {
         $scope.title = 'This is, the App!';
    })
    .controller('aboutCtrl', function ($scope) {
         $scope.title = 'About App!';
    });

.htaccess

<ifModule mod_rewrite.c>
    RewriteEngine on

    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    RewriteRule ^ index.html [L]

</ifModule>

console.log (http://localhost/myngapp/ || http://localhost/myngapp/about)

console.log dump

Upvotes: 1

Views: 603

Answers (1)

Jack
Jack

Reputation: 1941

Solved: <base> was the culprit

<head>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
</head>

OR

<head>
  <base href="/myngapp/">
</head>

Upvotes: 1

Related Questions