Removing # from angularjs and making url pretty

Question

I want to remove the # from the url

I have used the locationProvider and had in the index.html

Locationprovider is given as

scotchApp.config(function($routeProvider, $locationProvider) {
..
$locationProvider.html5Mode(true);

Here is my script.js

// create the module and name it scotchApp

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

// configure our routes
scotchApp.config(function($routeProvider, $locationProvider) {
    $routeProvider
    // route for the home page
    .when('/', {
        templateUrl : 'pages/home.html',
        controller  : 'mainController'
    })

    // route for the about page
    .when('/about', {
        templateUrl : 'pages/about.html',
        controller  : 'aboutController'
    })

    // route for the contact page
    .when('/contact', {
        templateUrl : 'pages/contact.html',
        controller  : 'contactController'
    });

        $locationProvider.html5Mode(true);
});

// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
});

scotchApp.controller('aboutController', function($scope) {
    $scope.message = 'Look! I am an about page.';
});

scotchApp.controller('contactController', function($scope) {
    $scope.message = 'Contact us! JK. This is just a demo.';
});

This is the follow up of this question. I still didn't get the solution. I would accept both answer if it was answered.

Here is the plunkr of the example which i wanted to do.

Note :

This is my project folder

localhost/test/angular

So, i have this link in the about

localhost/test/angular/about

Request : Pls download the source from plunkr and have a try over it.

I am not getting any error but nothing appears in the body sections

Thanks

Same question was asked just a few minutes ago: stackoverflow.com/q/34265933/3933332 — Rizier123
– Rizier123, Commented Dec 14, 2015 at 11:35
It seems that your app is not hosted by any server but you just accessing static files from your local machine? — Ihar Krasnik
– Ihar Krasnik, Commented Dec 14, 2015 at 11:42

Dan M. CISSOKHO · Accepted Answer · 2016-08-19 12:59:46Z

2

To link around your application using relative links, you will need to set this html code in the head of your document.

<base href="/your-base-if-needed">

or

<base href="/">

but the HTML5 mode set to true should automatically resolve relative links

edited Aug 19, 2016 at 12:59

answered Dec 14, 2015 at 11:38

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

semi_dolla Over a year ago

I should have <a href="#contact"> in html ?

semi_dolla Over a year ago

Wowww.. Thanks.. It works great . wil accept in minute

semi_dolla Over a year ago

But if i go the url directly i am getting page not found error.. help pls .. http://localhost/test/an/about

semi_dolla Over a year ago

<base href="/test/an/">

Gary Over a year ago

Ok. That might be the problem I believe. Try putting the` <base href="/">` on the index.html or main page of http://localhost/test/an/ and see if that makes a difference. Since this is angularjs it is completely separate from your backend files any ways. Is that correct?

|

Collectives™ on Stack Overflow

Removing # from angularjs and making url pretty

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related