I am trying to get query strings to work in my Angular setup, but it is behaving weirdly.
When i go to a URL like this:
http://localhost:3000/?query=test
The URL changes and removes anything after the '=' to end up with:
http://localhost:3000/?query
Has anyone had this problem before?
I am currently using Angular UI Router with defined states and HTML 5 mode. I have also tried specifying the query parameter in the route as below:
.state('home', {
url: '/?referrer',
templateUrl: 'app/views/home/home.html',
controller: 'mainController'
})
UPDATED........
OK. In my controller i had this:
var referrerURL = $location.search('referrer');
Removing this, fixes the issue. Why would this cause the problem?
For $location.search() method, you should use it like this:
$location.search('key','value').
If you don't set the value, it would be "true" by default.
More information here
Thanks for all your input.
I fixed this by changing my controller to use:
var referrerURL = $location.search().referrer;
Related
I was wondering if it was possible with AngularJS to do something like this :
I currently have a route with a first parameter called 'resource' that can be "device" or "group". There is a second parameter called 'id' but it doesn't matter. With the following code the route accepts anything as first parameter :
.when("/templates/:resource/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
It makes me check in the controller if the value of the first parameter is either 'device' or 'group'. I would like to get rid of this verification part without creating two routes if possible :
.when("/templates/group/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
.when("/templates/device/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
So my question is, is it possible, using ONE route, to have several urls ? Something like this for instance :
.when("/templates/('device'|'group')/:id", {
templateUrl: "/templates/views/navigation/templates.html",
controller: 'ctrlTemplates',
tab: "templates",
})
So I don't have to check the value of the parameter afterwards in the controller myself using
if([('group', 'device'].includes($routeParams.resource))...
Do you know if it's possible ? Or a similar way to do it?
Best regards,
You can't do what you want. If you want to use ui-router you can pull it off but AngularJS ngRoute does not give you the ability to use regexes, or bind route parameters to types. If you are willing to switch to ui-router I can give you an example of how to do what you want.
I am willing to switch to ui-router if it can help me achieve what I want to do.
Also, if it supports types it's nice as I have parameters that must be integers. I am going to have a look at some examples.
If you have any example with regexes It would be nice !
For example the page is 'http://mywebsite/details/555', how can I get that '555' out of there in my controller? It's not a parameter, so I cannot look up for it by name.
Have a look at the Angular routing parameters. The number you want is actually and id used in the routing path which you can catch:
https://angular.io/guide/router
https://angular-2-training-book.rangle.io/handout/routing/routeparams.html
Your are writing that 555 is not a parameter - but I think you want to use it like a parameter. Parameters look like: http://mywebsite/#/details/555
You can then define this in your router (here I'm using ui-router, but you can do the same with ng-route:
$stateProvider
.state('details.id', {
url: "/details/:id",
templateUrl: 'detail.html',
controller: myController
})
See https://github.com/angular-ui/ui-router/wiki/URL-Routing
If you still want to parse your URL string, you can do it this way:
var detailId = this.href.substr(this.href.lastIndexOf('/') + 1);
But the right (and probably the only working) way is to use the router for that.
Trying to implement the following route system with angular stateProvider:
some_domain.com/abc/pqr/xyz
Issue is the number of levels after "some_domain.com" can vary. It can be like
some_domain.com/abc/pqr/xyz
some_domain.com/abc/pqr
some_domain.com/abc
some_domain.com/abc/pqr/xyz/1234
tried the many approaches for this in the state definition:
$stateProvider
.state('dummy', {
url: '/*',
templateUrl: 'views/home.html',
controller: 'LandingPage'
});
}]);
Can anybody help me regarding this?
As the parameters you are talking about are part of the route itself, so you cannot have a single route to handle all these cases. I can think of 2 ways to go about it :
Create a seperate route for each case.
Use optional parameters if you can modify the logic accordingly. If the parameters can be optional, they should sent as query parameters instead of making them part of URL as such. So, the URL becomes something like :
url: '/dummy?param1?param2?param3'
Update2:
$location just for ng.
so $location.search is ng's search
it parse url from mark like # or #! .
but $window.location handle the brower url
in my question, first url's ng search is empty
and second url's ng search is {code & state}
is it right?
Update1:
i found the *$window.location* got the right data.
is *$location* override the all things?
Question
i use angular-ui-router in my project. and i want to get search string from url,
like this: http://localhost:8080/?code=123456&state=auth#/api/oauth2_authorize
in app.config, i set:
$stateProvider.state("oauth2_authorize", {
url: "/api/oauth2_authorize?code&state",
template: "",
controller: function($location) {
var search = $location.search();
}
})
i think the search will be { code : 123456; state:auth} but no.
i try to change the url to : http://localhost:8080/#/api/oauth2_authorize?code=123456&state=auth
and it work.
somebody could tell me why? the html5mode is false.
i check the angularjs's document, and $location's sample show that, i can get the search string from both url.
and i try to use $urlRouterProvider , but it still empty.
what can i do?
Because, if you set html5mode to false, all your urls need to have #. Even if in your url state you dont have # .
For that reason
http://localhost:8080/?code=123456&state=auth#/api/oauth2_authorize doesn't work and
http://localhost:8080/#/api/oauth2_authorize?code=123456&state=auth
it does.
Check angularjs docs for $location and urls
I guess something wrong with AngularJs version you are using.
Which version are you using?
refer following link suggest the same issue and fix with HTML5Mode=true
https://github.com/angular/angular.js/issues/6198
Or just go through following pages, may be helpful to fix your issue.
https://github.com/angular/angular.js/issues/5964
https://github.com/angular/angular.js/issues/4607
I created routes below, the story/new doesn't show it's story-new.html template. It always go to story-view.html because I got dynamic :storyID so new consider as a dynamic name.
How to combine them so /new will route to the story-new.html or I got wrong with my route structure?
$routeProvider.when('/story/new', {
templateUrl: 'js/modules/story-new/story-new.html'
});
$routeProvider.when('/story/:storyID', {
templateUrl: 'js/modules/story-view/story-view.html'
});
I'm unsure this works, but switching them around could solve your problem.
Check the following plunker
http://plnkr.co/edit/pgQu8nwGYrOQusZnThUy?p=preview
Let me know if anything