Is there any way to avoid changing URL address bar when using ngview

Question

In this example the ng-view directive doesn´t change the URL in the address bar. But when I port this example to my application the address in the bar changes to the URL in the 'href' link tag on every click, even if I put a relative URL (like the example).

My html code

<div ng-view></div> <div class="navHeader"> <ul id="navItems" ng-controller="Departments"> <li ng-repeat="department in departments"> <a href="{{department.url}}"> {{department.name}} </a> </li> </ul> </div>

The href attribute has been built in the code below:

http.get(SERVICE_ROOT + '/depts').success(function (data) { angular.forEach(data, function (value) { value.url = SERVICE_ROOT + '/dept/' + value.id; // this line }); model.departments = data; });

In this example ng-view directive don´t change the URL. Of course it changes, you just can't see it, because it's iframe. — dfsq
– dfsq, Commented Mar 10, 2014 at 14:35
You could assign an ng-click function that passes in the department.url and then runs the get function. — user1133128
– user1133128, Commented Mar 10, 2014 at 15:13
This can't be done cause controller is handled by the routing — Filipe
– Filipe, Commented Mar 10, 2014 at 17:34

Ed_ · Accepted Answer · 2014-03-11 14:18:55Z

The answer is no. The point of ng-view is to update the template based on the current URL location. It's the SPA equivalent of changing pages.

If you want to do something similar to the example you've linked, then you should look into using ng-switch.

EDIT updated due to this comment:

I question this because everytime that anyone does a refresh on the page, it displays only the JSON returned by the service. This happens because the address bar is filled in with the URL for the RESTful service instead of keep the page URL.

The reason this happens is because you are using html pushstate history API (have a google!) AKA html5mode. This means to all intents and purposes, you're telling the browser you've loaded a different page, despite actually being not changing page at all. When you hit refresh, the browser requests the url that's in the address bar, which the server responds to, in your case with JSON.

One quick fix is to turn html5mode off in your app's .config function:

$locationProvider.html5Mode(false);

This reverts to using a hash sytax, e.g. "path.to.your.site/#/about". It doesn't look as nice, but it should do the job. Angular will prefix any relative links with the prefix you define.

The better option is to modify your server, so that your rest api is under a prefix, e.g. /api/, then for all requests that are not /api/*, you return your index.html page. Angular handles the routing after that. This means you have the best of both worlds - your addresses look nicer, (they don't have any #), but refresh etc. works as expected.

How did you come to that conclusion? SPAs pretty much rely on a good RESTful API on the backend..
I mean ng-view SPA and RESTful together. I question this because everytime that anyone does a refresh on the page, it displays only the JSON returned by the service. This happens because the address bar is filled in with the URL for the RESTful service instead of keep the page URL. Isn't it so?
not sure if that can works with jersey, not easy to redirect to index.html on it. My restful service is under localhost:8080/app/service/* and the URL still changes to localhost:8080/app/#/service/, looks very ugly and can´t solve the problem.
You should be accessing localhost:8080/app, and only making AJAX requests to localhost:8080/app/service/*. Your links should all be relative, which would mean your URL would change to something like: localhost:8080/app/#/dept/:id. I have never used Jersey but you don't want to redirect anyway, you should return the index.html without redirecting. Any good http server should be able to do that easily.

Collectives™ on Stack Overflow

Is there any way to avoid changing URL address bar when using ngview

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related