AngularJS routing url remove this "#!" [duplicate]

Question

My url is localhost/kaiweb/#!/ I want to remove that "#!" or whatever might cause this. Another example localhost/kaiweb/#!/minust - it stays in between and don't look pretty.

  <li><a id="mainBtn" href="#!/" ng-class="{activeSmall:part == 'index'}" >Avaleht</a></li>
  <li><a id="aboutBtn" href="#!/minust" ng-class="{activeSmall:part == 'minust'}">Minust</a></li>
  <li><a id="workBtn" href="#!/portfoolio" ng-class="{activeSmall:part == 'portfoolio'}" >Portfoolio</a></li>
  <li><a id="vouchBtn" href="#!/teenused" ng-class="{activeSmall:part == 'teenused'}" >Teenused</a></li>

AngularApp

'use strict';

var app = angular.module('kaidoweb', []).
    config(['$routeProvider', function ($routeProvider) {
      $routeProvider.
        when('/', {
         templateUrl: 'pages/index.html',
         activetab: 'index',
         controller: HomeCtrl 
       }).
        when('/portfoolio', {
          templateUrl: 'pages/works.html',
          controller: PrivacyCtrl,
          activetab: 'portfoolio'
        }).
        when('/minust', {
          templateUrl: 'pages/about.html',
          controller: AboutCtrl,
          activetab: 'minust'
        }).
          when('/teenused', {
          templateUrl: 'pages/teenused.html',
          controller: TeenusedCtrl,
          activetab: 'teenused'
        }).
        otherwise({ redirectTo: '/' });
    }]).run(['$rootScope', '$http', '$browser', '$timeout', "$route", function ($scope, $http, $browser, $timeout, $route) {

        $scope.$on("$routeChangeSuccess", function (scope, next, current) {
          $scope.part = $route.current.activetab;
        });

I'm guessing it's a simple thing to fix but I'm quite new to angular.

That's how it's supposed to work. Try reading the docs regarding html5mode: docs.angularjs.org/guide/… — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Jun 5, 2015 at 13:11

chris · Accepted Answer · 2015-06-05 14:51:01Z

1

You have to understand that Angular is not a server side process. You can tweak the html5mode but that is only functional for links included in html anchors of your page and how the url looks like in the browser address bar. Attempting to request a subpage without the hashtag (with or without html5mode) from anywhere outside the page will result in a 404 error. For example, the following CURL request will result in a page not found error, irrespective of html5mode:

$ curl http://foo.bar/portfolio

although the following will return the root/home page:

$ curl http://foo.bar/#/portfolio

So in cases that you want to share a url with others, you have no option but to include the hashtag; unless you resolve to some type of server side routing.

edited Jun 5, 2015 at 14:51

answered Jun 5, 2015 at 13:33

chris

1,8171 gold badge14 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

AngularJS routing url remove this "#!" [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related