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);
}
Related
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?
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.
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();
})
I want to use routes, but I always want to use same template & controller. I have routes like this:
**a/:albumid**
and
**i/:imageid**
In the first case I want to load an array of images and add them to a list. In the second case I want to load a single image and add it to a list.
So the difference is only in data loading. What is the most efficient way to do this?
Also is it possible to animate ng-show? Something like jQuery's slideDown?
Check out this article, it describes a way to do exactly what you want:
http://www.bennadel.com/blog/2420-Mapping-AngularJS-Routes-Onto-URL-Parameters-And-Client-Side-Events.htm
I've used the technique, it works well.
In a nutshell, something like this for routing:
$routeProvider
.when("/a/:album_id", {
action: "album.list"
}).when("/i/:imgid", {
action: "images.load"
})
Then in your controller you can access $route.current.action and do the appropriate thing. The trick is to create a function in you controller that does all the work (the article calls it render()) and then call that function when $routeChangeSuccess fires:
$scope.$on(
"$routeChangeSuccess",
function( $currentRoute, $previousRoute ){
// Update the rendering.
render();
}
);
I created a super simple directive to handle this that allows routes to be have more like Rails or Codeigniter routes where the controller method is in the route definition. The method name is set in the routeProvider.when options and the directive is set in the template for the route.
See: https://stackoverflow.com/a/22714634/250991