I have some urls, like /some_url_1/, /some_url_2/ and /static_url/.
In my app-config i defined ui-router states for urls /some_url_1/ and /some_url_2/, but url /static_url/ must doing full reaload page as if i dont using angular.
Now, when on page /some_url_1/ i click to a[href="/static_url/"] ui-router try to find state for this url, but cant find and page content stay as at /some_url_1/.
How i can disable /static_url/ for ui-router and make full reload page to
You can use this (It's not tested):
Outside link
Use target="_self"
<a href="url/to/reload.html" target="_self">link</link>
Related
I'm using Angular's UI-router. All my routes looks like that:
/:name/....
for example /:name/test/:id, /:name/logs, /:name/list/:id
I want to change the name part when I click on a button, and reload the page. How can i do that globally without knowing exactly what route I'm in ?
$state.go($state.current, { name, 'newValue' });
Or something similar with ui-sref.
I'm trying to use AngularJS $anchorScroll with $location.hash. However, when I set the hash, AngularJS adds a forward slash, / after it.
For example, the url is: http://localhost:13060/Dashboard. When I don't include the AngularJS library, I can click the link, #contact, and go to http://localhost:13060/Dashboard#contact.
But when I include AngularJS and click the link, it goes to http://localhost:13060/Dashboard#/contact preventing $anchorScroll from working.
Edit $anchorScroll not working
The starting URL is http://localhost:13060/Category.
When I add a category, it should go to http://localhost:13060/Category#/#id (where id is the new id) and scroll down the page to it. The URL is correctly updating but $anchorScroll is not scrolling.
//jump to new category
$location.path("");
$location.hash(cat.ID);
$anchorScroll();
Unless you use html5mode, which removes the hash from angular routing, you will have 2 hashes, one for angular routing and other for anchors.
http://localhost:13060/Dashboard#/#contact
Assuming you had a route path set as /profiles and anchor was in that view the url would look like:
http://localhost:13060/Dashboard#/profiles#contact
I have an unusual question.
I have this old page that I want to convert to angular.js.
http://transience.me/TD/
I have 5 pages worth of html loaded on one page and the only visible portion is the part that has been navigated to. i.e. home is at x position 0, about is at x position, 1024, projects is at x position 2048, etc...
Right now though there's no way to link to the individual sections. You have to land at the home and then navigate to the section you want to visit.
However I want to add a deep linked url: url/#/home, url/#/project, etc.. to correspond with the navigation which triggers a change in page position.
Is there a way to link the router in angularjs to a directive so that instead of loading an html template it triggers a new dom behavior?
Thanks for any help!
I think ui-router would help you greatly.
It uses a $stateProvider which allows you to change the url without reloading the entire template. You can add transition effects and to move between pages and it will keep all back buttons, page refreshes, etc.
Check out the ui-router demo
I want to do a redirect that does a full page reload so that the cookies from my web server are refreshed when the page loads. window.location = "/#/Next" and window.location.href = "/#/Next" don't work, they do an Angular route which does not hit the server.
What is the correct way to make a full server request within an Angular controller?
For <a> tags:
You need to stick target="_self" on your <a> tag
There are three cases where AngularJS will perform a full page reload:
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path when base is defined
Example: link
Using javascript:
The $location service allows you to change only the URL; it does not allow you to reload the page. When you need to change the URL and reload the page or navigate to a different page, please use a lower level API: $window.location.href.
See:
https://docs.angularjs.org/guide/$location
https://docs.angularjs.org/api/ng/service/$location
We had the same issue, working from JS code (i.e. not from HTML anchor). This is how we solved that:
If needed, virtually alter current URL through $location service. This might be useful if your destination is just a variation on the current URL, so that you can take advantage of $location helper methods. E.g. we ran $location.search(..., ...) to just change value of a querystring paramater.
Build up the new destination URL, using current $location.url() if needed. In order to work, this new one had to include everything after schema, domain and port. So e.g. if you want to move to:
http://yourdomain.example/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en
then you should set URL as in:
var destinationUrl = '/YourAppFolder/YourAngularApp/#/YourArea/YourAction?culture=en';
(with the leading '/' as well).
Assign new destination URL at low-level: $window.location.href = destinationUrl;
Force reload, still at low-level: $window.location.reload();
After searching and giving hit and trial session I am able to solove it by first specifying url like
$window.location.href = '/#/home/stats';
then reload
$window.location.reload();
I had the same issue. When I use window.location, $window.location or even <a href="..." target="_self"> the route does not refresh the page. So the cached services are used which is not what I want in my app. I resolved it by adding window.location.reload() after window.location to force the page to reload after routing. This method seems to load the page twice though. Might be a dirty trick, but it does the work. This is how I have it now:
$scope.openPage = function (pageName) {
window.location = '#/html/pages/' + pageName;
window.location.reload();
};
Try this
$window.location.href="#page-name";
$window.location.reload();
So not 100% of my site is "powered by AngularJS" some of it is just simple static HTML like a landing page or content oriented stuff, which is simple HTML for obvious reasons.
The only way I can seem to get a link to navigate normally is like this:
$routeProvider
.when('/plans', {templateUrl: '<%= asset_path('ng/views/start.html') %>'})
# Catch all
.otherwise({ redirectTo: (p,loc) -> window.location = loc })
It feels like the catch all should be simpler like I could do .otherwise(false) and it would just navigate normally. Same goes for `.when('/something'/, false) but I don't see anything in the docs that suggests this is possible.
Does anyone know of a better way to do this?
Edit 1:
One solution I've found is to use target='_self' in the link.
The other is apparently to set the "base url" of the application as outlined in the docs. Then any links outside of that base should navigate normally. However that doesn't seem to work as outlined and the example doesn't match what the documentation is suggesting either.
just creating a link to it external file
if you are using hashbang urls (e.g. #/plans) then you should be all set, if you are using html5 history api ($locationProvider.html5(true)) then you need to namespace your app (set base[href] properly) and put the content outside of that namespace.
relevant code:
https://github.com/angular/angular.js/blob/4df45b20d460239a0f5001fb0dd59f95e2d0e80d/src/ng/location.js#L560
Another solution is to use target="_self" on that a element. Again this should be an issue only when html5 (history pushState) is being used.