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 #.
Related
Based on this URL, when it hits my angular controller, I need to get a value of wonum, which is "BRK18482020".
http://localhost/RealSuiteApps/RealHelp/-1/Detail?wonum=BRK18482020#/
Is it possible? cant understand how...
documented $location service must work, but it doesnt work :(
constructor(private $location: ng.ILocationService) {
var wonum = $location.search().wonum; // DOESNT WORK, wonum undefined
var wonum2 = $location.search()['wonum']; // DOESNT WORK, wonum undefined
doesnt work
UPDATE
Obviously angularJS $location doesn't work.
So, using the standard way to get the param works fine.
var wonum = window.location.search.split("wonum=")[1];
See this post. Angularjs $location service apparently not parsing url?
You are most likely missing $locationProvider.html5Mode(true); in your app config. Also note, you will need a base tag in your html. <base href="/baseUrl" />
This also falls back to using the # in the url.
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.
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
I'm trying to add login with github in my app. So while testing on my local machine, I set my callback url like this http://localhost:8000/login/callback/.
And after that, I add a login link to my page like this, Login, and also
$routeProvider.when('/login/callback', {
controller: 'loginCtrl'
});
It success returned me a code with a link like this: http://localhost:8000/login/callback?code=cd07ff3b70f5d1d1b8a2. But angularjs can not response correctly.
Error response
Error code 404.
Message: File not found.
Error code explanation: 404 = Nothing matches the given URI.
I've also tried to set my redirect_url to http://localhost:8000/#/login/callback, but the return link is like this http://localhost:8000/?code=61e9c8b73c073a0bccc0/#/login/callback
I need the code to be appear at the end of the url but not in the middle so that I can use $location.search().code to get my code. How can I set it properly?
Like change my redirect_uri or change my router?
#lowerkey I still don't know how to handle this but I think that's because the page was reloaded.
When you are not setting the html5Mode to true, then will be # at the url, and if you reload the page, the # will track the information to the $scope to work with the htmlHistory api so that the app can work properly even with the page refresh.
But once you set the html5Mode to true, then there's no # to store any $scope information, and when the page reload, angular can not found the accordingly scope so it return 404.
You can check $location section on angularjs guide, it has a section explaining why this happen.
Page reload navigation
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.
we should somehow push github to send params in html5-friendly way, i.e.
/login/callback/:code
for now I've created my hack-solution for it:
var code = parseUrlParam($location.absUrl(), 'code');
function parseUrlParam(url, param){
var temp = url.match(param + '=(\\w*)');
if(!temp[1]){
return false;
}
return temp[1];
}