Vikas Gautam Vikas Gautam - 1 month ago 9
Javascript Question

$state.go changing url having /#q=hello to /#/q=hello



I am working on a chrome extension which injects some content script in google.com.au. That content script then loads up an angular ui router based app having a small interface. I am using $state without url. So only templateUrl and controller. The problem is when I use

$state.go('home')
to go to home page of my small app,
$state.go
in internally changes the location or url from for e.g.

(1) :- https://www.google.com.au/#q=hello


to

(2) :- https://www.google.com.au/#/q=hello

(there is an extra / after q)

the second url is invalid one which redirect me back to google.com.au.

Also, its worth mentioning that - the same app worked fine when I injected it in a linked search results page whose url didn't have any
#
in it.

Also, I have tried variations like
$state.go
and
$state.transitionTo
with third parameter of
{location:false ....}
. but it stills changes the urls like above.


I am stuck and not able to go ahead with logic ahead.

here is screencast of the problem.

http://screencast.com/t/ZrBtlkU3z

Any help will be highly appreciated.

Thanks in advance.

Update

Here is an example chrome extension containing the mentioned problem.
https://Vikasg7@bitbucket.org/Vikasg7/example-app.git

Please load this as unpacked extension and try to go to

https://www.google.com.au/#q=hello

before and after loading the extension to see the problem I have mentioned above.

Hope this helps you experts resolving the issue.

Answer

Ok, After so much of research and hit and trial. here is the code that won't change the url when changing states. I had to use html5Mode. More detailed info and usage can be found here.
https://docs.angularjs.org/guide/$location#html-link-rewriting
stackoverflow post
AngularJS 1.1.5 - automatically adding hash tag to URLs

angular
  .module("app", ["ui.router", "app.services", "app.directives", "app.controllers"])
  .config(["$stateProvider", "$locationProvider", function ($stateProvider, $locationProvider) {
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false,
      rewriteLinks: true
    }).hashPrefix("!")
  }])

hope this helps, someone out there!

Comments