CODEWITHSUNDEEP
angularjsangular-ui-router
Hitu Bansal
Hitu Bansal

Reputation: 3137

Single Page Application in Angular

I am trying to implement single page application in angular.js

I found one demo

http://scotch.io/demos/angular-single-page-routing

which is fine

But i notice http://scotch.io/demos/angular-single-page-routing#/contact

There is # tag in it for each url

Can we make it like http://scotch.io/demos/angular-single-page-routing/a/contact

Here a may be play role of #

Any ideas ?

Thanks

Upvotes: 1

Views: 256

Answers (2)

Hashes
Hashes

Reputation: 120

You need to change something in the ul class, however there is no problem with your code, except the href navigation is added to your code determined using # , change the following href in your class nav navbar-nav navbar-right about.html | contact.html , delete the hash # in your href. You dnt need to shift pages to a new distenation , but if you want move the page contact.html for example to a newfolder called (a) then go back to your source code implement the href to a/contact.html

Upvotes: 0

Born2Code
Born2Code

Reputation: 1075

As New Dev pointed out through the Docs link, there are two ways to do routing in Angular for single page application.

One way involves the hashbangs, it is more portable across browsers and also allows you to bookmark an entry. The other method is to use the HTML5 Mode which will manipulate the history object directly. It needs Angular to be active on the page, thus you cannot bookmark it. That's the method you are asking for.

To implement it, you would $locationProvider.html5Mode(true);

This is lifted directly from Angular the docs linked by New Dev in his comment (https://docs.angularjs.org/guide/$location#hashbang-and-html5-modes).

function($locationProvider) {
    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
  },

Upvotes: 1

Related Questions