0

want to remove # from my angularjs application i have tried $locationProvider, but there is no luck

here is my Config :

var TechdefeatApp = angular.module('TechdefeatApp',['ui.router']);
TechdefeatApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise("/")

    $stateProvider
    .state('/', {
        url: "/",
        templateUrl: "app/components/home/homeView.html",
        controller:"homeController"
    })
    .state('post', {
        url: "/post/:seo_url",
        templateUrl: "app/components/post/postView.html",
        controller:"postController"
    })
}]);

i am calling a URL using ui-sref:

<a ui-sref="post({seo_url:post.seo_url})" title="{{post.title}}">{{post.title}}</a>

The URL in browser appear like this : 

URL : http://jaancari.com/latest/#/post/un-ambassador-nikki-haley
URL : http://jaancari.com/latest/#/post/december-3-1984-bhopal-worst-industrial-accident-in-history
Mr world wide
  • 4,696
  • 7
  • 43
  • 97

2 Answers2

1

It is called hashbang. To remove it you have to enable html5-mode in your angular config like this:

    var TechdefeatApp = angular.module('TechdefeatApp',['ui.router']);
    TechdefeatApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider ){
        $urlRouterProvider.otherwise("/")

        $stateProvider
        .state('/', {
            url: "/",
            templateUrl: "app/components/home/homeView.html",
            controller:"homeController"
        })
        .state('post', {
            url: "/post/:seo_url",
            templateUrl: "app/components/post/postView.html",
            controller:"postController"
        })

        $locationProvider.html5Mode(true);
    }]);

You can read more about hashbang and html-mode here: https://docs.angularjs.org/guide/$location

d-bro82
  • 490
  • 1
  • 6
  • 21
  • You mean i have to user either $stateProvider or $locationProvider .? – Mr world wide Dec 07 '16 at 15:26
  • i edit my answer with your code... You only have to inject $locationProvider and set html5 mode to true... this should work. Adding base-href and tell your server to route every request to index.html is also a good idea - see answer from @Bangsi – d-bro82 Dec 07 '16 at 15:36
  • i have Tried the same Long Back by Referring [Link ](http://stackoverflow.com/questions/14771091/removing-the-fragment-identifier-from-angularjs-urls-symbol) – Mr world wide Dec 07 '16 at 15:38
  • so what is your result with the code above? Have an error? Nothing happens and hashbang is still there? – d-bro82 Dec 07 '16 at 15:52
  • No Error is Coming, Nothing Happening – Mr world wide Dec 22 '16 at 19:07
0

Have you tried the following

$locationProvider and html5Mode

Do this when defining your Angular application and configuring your routes.

$locationProvider.html5Mode(true);

Set relative links

Set a <base> in the <head> of your document.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">

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

Change .htaccess

RewriteEngine   On
RewriteBase     /
RewriteCond     %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond     %{REQUEST_FILENAME} !-f
RewriteCond     %{REQUEST_FILENAME} !-d
RewriteRule     ./index.html [L]