With the use of Angular UI Router - you can access parameters url using $stateParams. Additionally, the $location service also has a way to access URL parameters: $location.search().param1
I know that sometimes there is an advantage in using $location.search() to retrieve values in the URL.
For example, when changing the URL without reloading state. Example snippet:
$state.current.reloadOnSearch = false;
$location.search('param1', 'new value').replace();
$timeout(function () {
$state.current.reloadOnSearch = undefined;
});
In this case, the URL gets changed with new parameter param1 - if I try to use $stateParams.param1 - its undefined. Meaning, $stateParams doesn't know about that change. In such a scenario, I use $location.search().param1 to get the updated value.
So as you can see, sometimes $location.search() has an advantage over $stateParams.
What are the disadvantages? Can't I just always use $location.search() and not use $stateParams? Is there any advantage in using $stateParams? What situations?
Related
I am using this:
$state.go("/path/to");
I want to do this:
$state.go("/path/to?param=myParam");
But this is not working.
I have tried:
$location.path("/path/to?param=myParam");
$location.path("/path/to").search({param: "myParam"});
Both of them actually change the url but not updated the angularjs app - since this is not connected to the actual router.
How can I pass query string parameters using AngularJS ui router?
Note I know I can pass a full url path like this:
/path/to/param/myParam
But I need in this case that it will be query string params.
According to the documentation $state.go takes another parameter that you can use to pass query string.
$state.go("/path/to",{param:myParam});
Url config use like this
.state('path/:param', {
url: '/path/:param',
templateUrl: 'views/path.html',
})
you get value in controller use to $stateParams
I don't know why, but angularjs ui router is very tedious vs the regular ngroute made by Angular team. The reason I am using ui router is just because that it supports for lazyload of the view.
Anyway, this is the solution I was found - using $state.go and $location.path both:
$location.path(`/path/to`).search({param: "myParam}});
$state.go(`/path/to`);
This can be wrapped for easy use:
module.exports = (path, qsObj) => {
if (qsObj) {
$location.path(path).search(qsObj);
}
$state.go(path);
}
I'm developing a search app with angular using ui-router.
Requirements:
The search form has too many fields and all have to be optional.
Users should share with another users the URL that display the page with the result list. (So I need to use querystring)
So I could have urls like
path/to/url/list?p=123&v=876
path/to/url/list?c=yes&a=true&p=123
path/to/url/list?z=yes&c=yes&a=true&p=123
path/to/url/list?z=yes&v=876&a=true&p=123
And endless combinations. I know that I can use $location.search() to get all params in json format. That is great! but the question is How can I define the url state with ui-router? Define explicitly all params in the url is not an option. I have read many post but I didn't find a concrete answers.
If you're getting parameters from $location you don't need to define them in state explicitly.
I think, the best way is to use 'resolve' property of $stateProvider configuration:
$stateProvider.state('mystate', {
// Some code here
resolve: {
queryData: ['$location', ($location) => {
$location.absUrl(); // Contains your full URI
return true;
}]
}
});
It's kind of initialization. After that, ui-router will cut URI, but you will store needed data. This case also works fine, when user passing URI directly in browser address input.
Also you can try to set $urlRouterProvider with $urlMatcher for this purposes, but it will be more difficult.
Im trying to get some paramters from the urlcallback coming from an external authentication, in my angular projct using angular-route/$routeProvider
the api redirects to:
http://localhost:8080/dist/?somevar=someval&val2=someotherval#/
Note the params come before #/
I try to read the get values with $routesparams like:"
$scope.$on('$routeChangeSuccess', function() {
// $routeParams should be populated here
console.log($routeParams.somevar);
console.log($routeParams);
});
This returns an emptyresult. however it i change the url to:
http://localhost:8080/dist/#/?somevar=someval&val2=someotherval
it works, with the api I can give a callback url and I set it like:
?callbackUrl=http://localhost:8080/dist/#/
How should I get these parameters from the url whithout changing the callback url?
In this case, the problem is with the Hashbang mode, which has a hashPrefix #. In the configuration phase, you have to enable html5Mode $locationProvider.html5Mode(true);
But this requires URL rewriting on server side and the HTML <base> tag.
Read more here: https://docs.angularjs.org/guide/$location
So the explanation why it does not work for you this way, is when you give the http://localhost:8080/dist/?somevar=someval&val2=someotherval#/ url to angular, it looks for the parameters after the #, and when you populate the $routeParams, it will create the parameters after the #.
Take this route for exmaple
when('/coordinator/editApplications/:appId', {
templateUrl: 'assets/app/templates/coordinator/editApplications.tpl.html',
module: "/coordinator",
})
Without using regular expressions, is there a property/method available in Angular that will allow me to get the path value with the parameters stripped off?
The value I would want for this example would be /coordinator/editApplications
This needs to be be universal because there could be multiple params or differently named params. I can't find anyway on the $route or $location to get this value as they all seem to contain the params.
Again, I know i can use regExp to do this but I want to avoid that. I also don't want to just add another property to the route w/ the non-param url value.
Sounds simple but I'm kinda stuck here.
$scope.triggerFetch = function() {
$location.search("zipcode", 344343); // this just replaces it but I need a reload as well
// now do the GET request
}
I use angular just for the UI interactions, the rendering and the heavy lifting does the backend framework.
I can replace the url but I need a function for the reload, I don't want to use $location.path(), there must be something more elegant.
(From the comments)
You can either add ngRoute as a dependency which will cause a reload when the search parameters are changed.
Option 2 is to do something like the following:
$scope.$watchCollection($location.search(), function () {
$window.location.reload();
})