CODEWITHSUNDEEP
angularjs
Sahbaz
Sahbaz

Reputation: 1272

Exclamation mark after hash (#!) in angularjs app

I have just noticed that I have an exclamation mark after a hash (#!) in all of my routes. I'm not sure how and why I got them because earlier today I didn't have them.

If there is any solution to get rid of them, I would appreciate if someone can explain me what is it( and how I came to have them).

So, the only solution that I have found so far is to put manually put the exclamation mark on every href in my app, but this annoys me and I have no idea what to do.

I generated my app with yeoman generator and my app.js looks like this: 

angular
  .module('appNameApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .when('/jaspo', {
        templateUrl: 'views/about.html',
        controller: 'jaspoCtrl',
        controllerAs: 'vm'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

Upvotes: 42

Views: 29707

Answers (3)

Sheki
Sheki

Reputation: 1635

You probably updated angular version from 1.5 to 1.6, because on 1.6, the angular team decided to change the default $location hash-prefix to '!'. Like @Skrew suggested, you can change that to '' with $locationProvider.hashPrefix('');

Here you can read about that.

Upvotes: 32

wanyo
wanyo

Reputation: 113

Your function is missing a locationProvider and needs to specify html5Mode for the locationProvider. See https://docs.angularjs.org/api/ng/provider/$locationProvider. Instead of:

.config(function ($routeProvider) { $routeProvider .when('/', {

try:

.config(function ($locationProvider, $routeProvider) { $locationProvider.html5Mode({ enabled:true }); $routeProvider .when('/',{

By default you also need to specify a base tag <base href="/"> in your index.html file.

Upvotes: 2

Skrew
Skrew

Reputation: 1847

Modify these 2 lines : 

  .config(function ($routeProvider) {
$routeProvider

to be : 

    .config(function ($routeProvider,$locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider

Credit should go to : https://stackoverflow.com/a/41223197/1564146

Upvotes: 91

Related Questions