Removing # from Url in Angularjs While Having .Run in Routes

AngularJS routing url remove this #!

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.

How to handle anchor hash linking in AngularJS

You're looking for $anchorScroll().

Here's the (crappy) documentation.

And here's the source.

Basically you just inject it and call it in your controller, and it will scroll you to any element with the id found in $location.hash()

app.controller('TestCtrl', function($scope, $location, $anchorScroll) {
   $scope.scrollTo = function(id) {
      $location.hash(id);
      $anchorScroll();
   }
});

<a ng-click="scrollTo('foo')">Foo</a>

<div id="foo">Here you are</div>

Here is a plunker to demonstrate

EDIT: to use this with routing

Set up your angular routing as usual, then just add the following code.

app.run(function($rootScope, $location, $anchorScroll, $routeParams) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    $location.hash($routeParams.scrollTo);
    $anchorScroll();  
  });
});

and your link would look like this:

<a href="#/test?scrollTo=foo">Test/Foo</a>

Here is a Plunker demonstrating scrolling with routing and $anchorScroll

And even simpler:

app.run(function($rootScope, $location, $anchorScroll) {
  //when the route is changed scroll to the proper element.
  $rootScope.$on('$routeChangeSuccess', function(newRoute, oldRoute) {
    if($location.hash()) $anchorScroll();  
  });
});

and your link would look like this:

<a href="#/test#foo">Test/Foo</a>

Change the URL breaks the routing prevent

You lose angular state when you go to the url of the root rather than the state url (i.e) #(hash) urls. The root url reloads the page wherein you lose memory of all javascript variables as they are all client side. Hence the variable is undefined.

State changes happen in a single instance of page load, the url changes give you a illusion as if a page load is happening

Angular: how to handle both HTML5 mode routes and hash routes?

Use $routeChangeStart :

 angular.module('routing', ['ngRoute'])
       .run(['$rootScope', '$location', '$window', function($rootScope, $location, $window) {
          $rootScope.$on("$routeChangeStart", 
            (event, current, previous, rejection) => {
              if (/#\//.test($window.location.hash)) {
                 $location.path($window.location.hash.replace('#', ''));
              }
          });

...

AngularJS ui-router: ui-sref links aren't prepending the hash when filling in href values

I added this to my main app.js as a workaround:

.run(['$state',
    function($state) {
        $state.originalHrefFunction = $state.href;
        $state.href = function href(stateOrName, params, options) {
            var result = $state.originalHrefFunction(stateOrName, params, options);
            if (result && result.slice(0, 1) === '/') {
                return '#' + result;
            } else {
                return result;
            }
        }
    }
])

---

Related Topics