If an user is coming from an specific page i need to do get some values out of a cookie and change what the users sees.
Now, the issue is that i cannot find a way to view what page the user is coming from.
EDIT: This is intended to capture when the users clicks back in a page and save the state of the previous page.
Any ideas?
Thanks in advance
Solved. Every time i load a page i'm saving the url, so when i get to this page i just have to read it to tell. Thanks!
You can use browser history in our javascript or you can write your last page in cookies and get the last link then update it
Using cookies will indeed fix this for you. So when a user goes to a new page - set a cookie like:
app.controller('myController',['$scope', '$location', $cookies], function($scope, $location, $cookies){
if($cookies.get('page') == '/index'){
//do stuff if user came from index
}
$scope.pageChanged = function(value){
$cookies.put('page', value);
$location.path('/index');
}
}
just make sure you use the pageChanged function to set your page every time user changes pages.
Using the $routeProvider you can use the resolve function to detect when a new route has been loaded.
Another way would be to listen for the event $routeChangeSuccessor $routeChangeError and get the information needed from the service $location or $route.
If you want a sample just ask me, I'll try to post one as soon as I have free time.
When loading the url at first, I need to display the initial template. But after clicking a link, I need to
Get it's href value (It's the current template url with some extra params)
Send the new url with params to the server
Get the new template (The server will send a new template with new data)
Change the view accordingly (Update the whole page)
I have managed to complete the first task. The 4th task is the real problem. Changing the route's template using the function which gets called when clicking the link (With ng-click). How can I do it?
All you need to do in order to replace current template with the new one is basically two lines of code. Namely:
update current $templateCache for the currently used template;
reload current route.
It could look something like this:
var content = '<h2>New content loaded previously</h2>';
var templateName = $route.current.templateUrl;
$templateCache.put(templateName, content);
$route.reload();
Check the simple demo: http://plnkr.co/edit/V5AG0UXS3b8wBwxrz7qO?p=preview
To get the URL of your current template :
$route.current.templateUrl
You can try to set template value directly (never test)
$route.current.templateUrl = "http://myrul.tld";
You can see the doc at https://docs.angularjs.org/api/ngRoute/service/$route
Im using Angular.js and I have several routes:
http://localhost/tool/new
http://localhost/tool/report/#/59FD59D56F20DDFA722F5B31796CAE3396C
tool/new is the form where a user would create a new report using the tool. The program then runs in the background and the user can access the report by going to tool/report/#/their-id where their-id is a big SHA1 hash.
That hash is a route param, if that hash is invalid I need to redirect the user back to tool/new. The problem Im having is that the program file structure is:
tool/new/index.html // The create new report form
tool/report/index.html // The report area
I've been trying to use $location to redirect like this:
$location.path('/new');
But it just redirects to tool/report/#/new and that doesn't help.
Does anyone know how to tell Angular to move up one directory and redirect?
Based on the answer from Branimir, I get the URL and trim it at the current (report) directory. I do this because the tool name and domain can change depending on the server its located on. This worked for me.
var dialog = $dialogs.notify('We were unable to find your tool run.','<p>It is possible that the URL you have entered is incorrect or that your tool run has been deleted due to inactivity.</p><p>Please confirm your URL and try again; or create a new tool run.</p>');
dialog.result.then(function(btn){
var url = $location.absUrl();
var base = url.substring(0,url.indexOf('/report/'));
window.location = base + '/#/new';
},function(btn){});
Note Im using $dialogs from here https://github.com/m-e-conroy/angular-dialog-service/blob/master/dialogs.min.js to tell the user the id is bad.
If you want to reload page use:
$window.location.href = 'http://localhost/tool/new';
$location service doesn't reload a page, it changes a URL in the same AngularJS application.
My AngularJS application needs to have access to the user's LinkedIn profile. In order to do that I need to redirect the user to a LinkedIn URL which contains a callback redirect_uri parameter which will tell LinkedIn to redirect the user back to my webapp and include a "code" query param in the URL. It's a traditional Oauth 2.0 flow.
Everything works great except that LinkedIn redirects the user back to the following URL:
http://localhost:8080/?code=XXX&state=YYY#/users/123/providers/LinkedIn/social-sites
I would like to remove ?code=XXX&state=YYY from the URL in order to make it clean. The user does not need to see the query parameters I received from LinkedIn redirect.
I tried $location.absUrl($location.path() + $location.hash()).replace(), but it keep the query params in the URL.
I am also unable to extract the query parameters, e.g. "code", using ($location.search()).code.
It seems like having ? before # in the URL above is tricking Angular.
I use
$location.search('key', null)
As this not only deletes my key but removes it from the visibility on the URL.
I ended up getting the answer from AngularJS forum. See this thread for details
The link is to a Google Groups thread, which is difficult to read and doesn't provide a clear answer. To remove URL parameters use
$location.url($location.path());
To remove ALL query parameters, do:
$location.search({});
To remove ONE particular query parameter, do:
$location.search('myQueryParam', null);
To clear an item delete it and call $$compose
if ($location.$$search.yourKey) {
delete $location.$$search.yourKey;
$location.$$compose();
}
derived from angularjs source : https://github.com/angular/angular.js/blob/c77b2bcca36cf199478b8fb651972a1f650f646b/src/ng/location.js#L419-L443
You can delete a specific query parameter by using:
delete $location.$$search.nameOfParameter;
Or you can clear all the query params by setting search to an empty object:
$location.$$search = {};
At the time of writing, and as previously mentioned by #Bosh, html5mode must be true in order to be able to set $location.search() and have it be reflected back into the window’s visual URL.
See https://github.com/angular/angular.js/issues/1521 for more info.
But if html5mode is true you can easily clear the URL’s query string with:
$location.search('');
or
$location.search({});
This will also alter the window’s visual URL.
(Tested in AngularJS version 1.3.0-rc.1 with html5Mode(true).)
Need to make it work when html5mode = false?
All of the other answers work only when Angular's html5mode is true. If you're working outside of html5mode, then $location refers only to the "fake" location that lives in your hash -- and so $location.search can't see/edit/fix the actual page's search params.
Here's a workaround, to be inserted in the HTML of the page before angular loads:
<script>
if (window.location.search.match("code=")){
var newHash = "/after-auth" + window.location.search;
if (window.history.replaceState){
window.history.replaceState( {}, "", window.location.toString().replace(window.location.search, ""));
}
window.location.hash = newHash;
}
</script>
If you want to move to another URL and clear the query parameters just use:
$location.path('/my/path').search({});
Just use
$location.url();
Instead of
$location.path();
If you are using routes parameters just clear $routeParams
$routeParams= null;
How about just setting the location hash to null
$location.hash(null);
if you process the parameters immediately and then move to the next page, you can put a question mark on the end of the new location.
for example, if you would have done
$location.path('/nextPage');
you can do this instead:
$location.path('/nextPage?');
I've tried the above answers but could not get them to work. The only code that worked for me was $window.location.search = ''
I can replace all query parameters with this single line: $location.search({});
Easy to understand and easy way to clear them out.
The accepted answer worked for me, but I needed to dig a little deeper to fix the problems with the back button.
What I noticed is that if I link to a page using <a ui-sref="page({x: 1})">, then remove the query string using $location.search('x', null), I don't get an extra entry in my browser history, so the back button takes me back to where I started. Although I feel like this is wrong because I don't think that Angular should automatically remove this history entry for me, this is actually the desired behaviour for my particular use-case.
The problem is that if I link to the page using <a href="/page/?x=1"> instead, then remove the query string in the same way, I do get an extra entry in my browser history, so I have to click the back button twice to get back to where I started. This is inconsistent behaviour, but actually this seems more correct.
I can easily fix the problem with href links by using $location.search('x', null).replace(), but then this breaks the page when you land on it via a ui-sref link, so this is no good.
After a lot of fiddling around, this is the fix I came up with:
In my app's run function I added this:
$rootScope.$on('$locationChangeSuccess', function () {
$rootScope.locationPath = $location.path();
});
Then I use this code to remove the query string parameter:
$location.search('x', null);
if ($location.path() === $rootScope.locationPath) {
$location.replace();
}
All,
I have a JsonStore backing a form panel in my extjs app. I want to have the jsonStore load a single record based on an id value, but haven't found a good way to do that yet, and still keep the url restful.
My first attempt was to add a param to the jsonstore load() method with the id in it. That only adds the id as a request param, not attached to the url:
http://my-app/users/?id=123
instead of what i want:
http://my-app/users/123
Can someone help me out with this?
You can manually construct the URL that the store uses to query for data (via the implicit HttpProxy it creates for the URL). So your loading function would look like:
function store_refresh() {
json_store.proxy.conn.url = 'http://my-app/users/' + user_id;
json_store.reload();
}