Making a verify account page and want to be able to pass an email and auth code via url like so:
https://mywebsite.com/verify?email=a#a.com&code=1234
It looks like I can't do it this way in angular. And should instead be done like this:
https://mywebsite.com/verify/:email/:code
And use $stateParams to grab the vars.
Can you have two different URLs trigger the same state? So both URLs below trigger the same state and the controller checks for the vars and does it's magic.
https://mywebsite.com/verify
https://mywebsite.com/verify/:email/:code
You can set the configuration as like below and you can pass the param which is required to send for the url
$stateProvider.state('verify', {
url: '/verify?email&code',
templateUrl: 'verify.html',
controller: 'verifyCtrl'
});
working fiddle: http://plnkr.co/edit/AwHkFj?p=preview
Rather than defining the params email and code as path parameters, you could use search parameters and access them via $routeParams.
e.g, your route would be:
$routeProvider.when('/verify', routeConfig);
the URL would be:
https://mywebsite.com/verify?email=a#a.com&code=1234
And in the controller, you would inject $routeParams and access via:
$routeParams[email]; // = a#a.com
$routeParams[code]; // = 1234
For more info on $routeParams, see https://docs.angularjs.org/api/ngRoute/service/$routeParams
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 #.
I am trying to use routeProvider to create a search page. Below I have something like so:
}).when("/search/:value", {
templateUrl: "app/views/search/search.html"
What I want to show in the url is not
/search/searchValue
but more like
/search/value=searchValue
I am setting the location as so:
$location.path('/search/').search({ value: $scope.filterValue }); where $scope.filterValue is the searchValue.
When I use this, I'm not able to view my page due to the :value. How can i change the url to the one I want as in you have the routeParam show in the url link?
Thanks,
All I had to do was use /search/?. The value after the "?" was the parameter.
I am working with AngularJS routes, and am trying to see how to work with query strings (for example, url.com?key=value). Angular doesn't understand the route which contains key-value pair for the same name albums:
angular.module('myApp', ['myApp.directives', 'myApp.services']).config(
['$routeProvider', function($routeProvider) {
$routeProvider.
when('/albums', {templateUrl: 'albums.html', controller: albumsCtrl}).
when('/albums?:album_id', {templateUrl: 'album_images.html', controller: albumsCtrl}).
otherwise({redirectTo: '/home'});
}],
['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode = true;
}]
);
It is correct that routes do not work with query strings, however that doesn't mean you can't use query strings to pass data between pages when switching routes! The glaring limitation with route parameters is that they can't be updated without reloading the page. Sometimes this isn't desired, for instance after saving a new record. The original route parameter was a 0 (to signify a new record), and now you want to update it with the correct ID returned through ajax so that if the user refreshes the page they see their newly saved record. There is no way to do this with route parameters, but this can be accomplished by using query strings instead.
The secret is not to include the query string when changing the route, because that will cause it not to match the route template. What you can do is change the route and then apply the query string parameters. Basically
$location.path('/RouteTemplateName').search('queryStringKey', value).search( ...
The beauty here is that the $routeParams service treats query string values identically to real route parameters, so you won't even have to update your code to handle them differently. Now you can update the parameters without reloading the page by including reloadOnSearch: false in your route definition.
I don't think routes work with query strings. Instead of url.com?key=value can you use a more RESTful URL like url.com/key/value? Then you would define your routes as follows:
.when('/albums', ...)
.when('/albums/id/:album_id', ...)
or maybe
.when('/albums', ...)
.when('/albums/:album_id', ...)
You could look at the search method in $location (docs). It allows you to add some keys/values to the URL.
For example, $location.search({"a":"b"}); will return this URL: http://www.example.com/base/path?a=b.
use route params
var Ctrl = function($scope, $params) {
if($params.filtered) {
//make sure that the ID is there and use a different URL for the JSON data
}
else {
//use the URL for JSON data that fetches all the data
}
};
Ctrl.$inject = ['$scope', '$routeParams'];
http://docs.angularjs.org/api/ng.$routeParams
I can only think of two usecases for the querystring in URL:
1) If you need the key/value pair of your querystring in your controller (eg. to print Hello {{name}} and get the name in querystring such as ?name=John), then as Francios said just use $location.search and you will get the querystring as an object ({name:John}) which you can then use by putting it in scope or something (e.g. $scope.name = location.search().name;).
If you need to redirect to another page in your router based on what is given in the querystring, like (?page=Thatpage.htm) then create a redirectTo: in your routerProvider.when() and it will receive the search object as its third parameter. look at 2:10 of the following EggHead Video:
http://www.thinkster.io/pick/SzcF8bGeVy/angularjs-redirectto
basically, redirectTo:function(routeParams,path, search){return search.page}