CODEWITHSUNDEEP
javascriptangularjs
Aniruth
Aniruth

Reputation: 187

$locationProvider isn't working in my Angular page

In my angular page i'm using a $locationProvider. But it's not working in my web page. I got error in my console like this, $location in HTML5 mode requires a tag to be present!. so i add a <base href="/" />, which also not working in my angular page. Here i mentioned my directory structure and my code.

Here my sample Project link too. Help me out to resolve this problem.

my directory structure

 iwa (root directory)
  > js
      > lib
         -> angular.js
         -> angular.route.js
      -> app.js
  > views
      -> home.html
      -> about.html
 -> index.html

index.html

 <!DOCTYPE html>
 <html ng-app="inQueueWeb">
 <head lang="en">
     <meta charset="UTF-8">
     <script src="js/lib/angular.js"></script>
     <script src="js/lib/angular-route.js"></script>
  </head>
 <body>
     <div ng-view></div>
 </body>
     <script src="js/app.js"></script>
 </html>

app.js

  var iwa = angular.module('inQueueWeb', ['ngRoute']);

   iwa.config(['$routeProvider','$locationProvider', function($routeProvider,$locationProvider) {
$routeProvider
   .when("/", {templateUrl: 'views/home.html'})
   .when("/rest", {templateUrl: 'views/about.html'});
$locationProvider.html5Mode(true);
}]);

And also i tried these 

$locationProvider.html5Mode({enable: true, requireBase: false});

$locationProvider.html5Mode(true).hashPrefix('!');

Upvotes: 3

Views: 1158

Answers (4)

Tejas
Tejas

Reputation: 711

You're on the right track. You've got to add $locationProvider.html5Mode(true) to your app's .config() method, and then add a <base href="/"> to your HTML head. I think you've done this already.

What's going wrong is this: with $locationProvider.html5Mode(true), a hashbang (/#mypage) URL isn't necessary. A URL would simply be /mypage, without the hash. You need to update the links in your views/templates/header.html to suit this.

I've updated:

  • Your app.js to add $locationProvider.html5Mode(true).
  • Your index.html to add <base href="/">, and
  • Your views/templates/header.html to adjust the anchor links.

I hope this was helpful! You can download an archive with the adjusted files here.

Upvotes: 3

Leander
Leander

Reputation: 330

In the first place I'm missing the base tag in your index.html? Which you might have replaced with:

$locationProvider.html5Mode({enable: true, requireBase: false});

Unfortunately, you made a little typo in 'enable'. Which should be 'enabled' (with an ending 'd'). So, fix the typo or add the base tag and change the $locationProvider line with: 

$locationProvider.html5Mode(true);

I think that will solve the problem.

Besides all of this, you have to place the script between the < body >< /body > tags. Otherwise it's not valid HTML.

Upvotes: 0

Eugene J. Lee
Eugene J. Lee

Reputation: 580

Add this below your head tag

<base href="/">

Then under your router, add $locationProvider in your .config

.config(function($routeProvider, $urlRouterProvider, $locationProvider) {

Add this underneath all your .when states

$locationProvider.html5Mode(true).hashPrefix('!');

$urlRouterProvider.rule(function($injector, $location) {
    var slashHashRegex,
        matches,
        path = $location.url();

    // check to see if the path already has a slash where it should be
    if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
        return path.substring(0, path.length - 1);
    }

    // if there is a trailing slash *and* there is a hash, remove the last slash so the route will correctly fire
    slashHashRegex = /\/(#[^\/]*)$/;
    matches = path.match(slashHashRegex);
    if (1 < matches.length) {
        return path.replace(matches[0], matches[1]);
    }
});

Create an .htaccess file if you don't have one already, and add this ( assuming you are using index.html )

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule (.*) index.html [L]
</ifModule>

Hope this helps!

Upvotes: 2

Wang YinXing
Wang YinXing

Reputation: 136

I am not sure this will help you, but

!DOCTYPE html>

It should be 

<!DOCTYPE html>

Or did you make wrong copy while you are posting question?

Upvotes: 1

Related Questions