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

Question

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.

score 0 · Answer 1 · answered Oct 23 '16 at 18:51

0

I think this is the intended behaviour of ui-router. You might need to use native javascript for this one (window.location.href = 'XXX') or maybe $location to set the hashbang exactly like you want.

answered Oct 23 '16 at 18:51

jonassvensson

491
1
6
11

Can we switch off this intended behavior ? – Vikas Gautam Oct 23 '16 at 20:09

score 0 · Accepted Answer · edited May 23 '17 at 12:06

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!

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

2 Answers2