CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Sap
Sap

Reputation: 5291

AngularJS routing and anchor hash

We are creating an Angular App from past one year or so and till now we never used routing. Now that we have tried it in some of our pages we love the dynamic loading of templates and the response time.

The only problem we have is that many pages have links like<a href="#selectedTab">. At some places the anchor element just signifies which tab is currently selected and in other it actually navigates to certain content.

After we added the routing code like following

<script type="text/javascript">
var myApp = angular.module("myApp", ["ngRoute"]);
myApp.config(function($routeProvider) {
    $routeProvider
    .when('/page1', {
        templateUrl: '/ctx/page1.jsp',
        controller: 'page1Controller'
    }).when('/page2', {
        templateUrl: 'page2',
        controller: 'page2Controller'
    }).otherwise({
        redirectTo:'/' //what can I write here for normal # behavior
    });
});

All our normal navigation anchors naturally do not work. Is there a way to write some code in the otherwise clause to ignore some of the anchors?. I have already read How to handle anchor hash linking in AngularJS but it assumes users are creating a new app and has a work around. Also target="_self" attribute solves it but I will have to check all my <a> tags to remove '#' which will be at least in 4 digits.

Thanks

Upvotes: 1

Views: 1349

Answers (1)

rmuller
rmuller

Reputation: 1837

Update:

Do you have a base href in your html?

e.g.

<base href="/" />

can you try it with 

$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');

add target="_self" to your anchor links,. This prevents AngularJS from rewriting the URL. See This answer on stack overflow and this discussion

Upvotes: 2

Related Questions