I am hitting a REST endpoint at
www.example.com/resource/id
What is the best way for me to extract id from an angular module controller?
I have looked into using $routeProvider
$routeProvider.when('/resource/:id', {}).otherwise(...)
This will only work if I set
$locationProvider.html5mode(true)
If it is not set to true, it always ends up in the otherwise clause when I hit www.example.com/resource/8
How can I get this to work even if I don't set $locationProvider.html5mode to true?
I think you're looking for $route.current.params, I use angular-ui's ui-router ui-router, in which case you would use $stateParams.
use www.example.com#/resource/8 instead www.example.com/resource/8
just replace following code:
$routeProvider.when('/resource/:id', {}).otherwise(...)
with the:
$routeProvider.when('resource/:id', {}).otherwise(...)
/resource/:id ths take absolute url pattern. and resource/:id take relative url pattern.
so i think this will help you without setting of html mode true.
Related
In angular.js, how can I set the route using an anchor tag's href, but containing a query parameter too? I'm using html5Mode and it seems that the following:
ends up escaping the question mark before it sets the url.
I need to set the url exactly as is. How can I prevent it from escaping the question mark?
If you are using the default Angular router, the documentation says it all. Take a look at their example here.
If you are looking for a more robust router, I suggest you switch to ui-router.
Here's how you deal with query params, although you might just use URL parameters instead for pretty URLs.
With ui-router you don't have to use
href, you can pass query params to a route using ui-sref. Check out this example to see how.
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
http://www.scientiamobile.com/page/angularwit
Want to be able to do something like this:
<img-wit ng-src="{{trustSrc(profile.pic)}}" w="100"/>
The picture isn't rendering however, although the blank space is sized correctly. Is it possible to use angular directive version of img-wit with ng-src?
UPDATE:
Determined the easiest way to use img-wit is not to implement angularjs directive at all. Instead, just append appropriate img-wit link prefix inside controller.
Support to ngSrc directive has been added in the 0.9.1 version: https://github.com/WURFL/angular-wurfl-image-tailor/releases/tag/0.9.1.
Syntax like the follow is now supported:
<img-wit ng-src="{{myUrl}}"></img-wit>
where {{myUrl}} is the url of the trusted image to load.
Please check https://github.com/WURFL/angular-wurfl-image-tailor#how-to-use-it for further details.
Disclaimer: I work for ScientiaMobile
I'm trying to change the URL with AngularJS,
but not with a redirect, just change the URL
after an event.
What I need is this:
www.myurl.com/inbox/1 to this www.myurl.com/inbox/25
In other words, just change the last Id.
I'm trying to do this:
$location.path('/inbox/'+id);
But what I'm getting is this:
www.myurl.com/inbox/1#/inbox/25
Angular enforces the idea of one page web app. Browsers don't take any actions on change of anything after '#' value. So the best practice is to add variable attributes in url after '#' value which will keep the base url and attribute look clean on browser's address bar as well as solve your problem. My advice is to keep username, page no. , or any specific attribute id after '#' value.
In your case you should use something like above said
www.myUrl.com/#/inbox/25
or
www.myUrl.com/inbox/#/25
usually angular URLs look like
www.myurl.com/#/inbox/1
in which case
$location.url('/inbox/25');
should work for you
For that you should use .url() instead of .path()
$location.url(`/inbox/${id}`)
We are using DPS's PXPay to generate payments for our app.
On a successful transaction the url that is provided looks like
http://ourapp.com/checkout/complete?result=v5eX-DlMlfGe2FUcPeZgCFiKhZwgmCVhlTfL-rtnPszpe8S_6MYJMbVPDK14h7KxQM6xfKYUnXhz_RcSOHqw4VwHX97GU9XINHwh9DFt6aDHOLMvdAnSwZost5H2aOQlZgMESDzlwNGx_lfgeLba2Us41x437J3PWTJ_LLJVK4OY_7K4c6rxQ88Mve7FfoYd7P8CAZWxyHbC-wxCyLiocw4_NQ_34ct-IAsR1MM3C2OkPijfBAk-l72rOOMWGp8EoLpdOHyT0uITvsdjMvOFIHIMnSdVs2JFCslAmTRMDl4jkb5ezBf9wKZuo91KgII0kd9dFJMFCm7evt-X0ykLw_vjcgg85kZoRbDvi89nEGiWmFLVKM_xVgZYufeMMudOGRcHgi4i-RZJ4mml2JMzN2OtJKyQdpxuC-3b9KfnRbyy_F75Gak5fwJIf4tvo6VNJKUJuBtKYKafPyH_YJU4HQMeHP8uO0-FhMN3mzRCmGjvExuqx1BhA67R35pmaTbyxz-06JEvIqzf8FTftoBowLSeu37KtNmagZ8cJpMlCe4kUaFY4v6ZTx7h9rYx37oYtZNsSR1t3KDFzQYRs5LAg8RQ==&userid=OurDevId
This is definitely the request that is coming into the browser. BUT what is displayed in my browser URL bar... and what angular reads for the "result" token is this...
http://ourapp.com/checkout/complete?result=v5eX-DlMlfGe2FUcPeZgCFiKhZwgmCVhlTfL-rtnPszpe8S_6MYJMbVPDK14h7KxQM6xfKYUnXhz_RcSOHqw4VwHX97GU9XINHwh9DFt6aDHOLMvdAnSwZost5H2aOQlZgMESDzlwNGx_lfgeLba2Us41x437J3PWTJ_LLJVK4OY_7K4c6rxQ88Mve7FfoYd7P8CAZWxyHbC-wxCyLiocw4_NQ_34ct-IAsR1MM3C2OkPijfBAk-l72rOOMWGp8EoLpdOHyT0uITvsdjMvOFIHIMnSdVs2JFCslAmTRMDl4jkb5ezBf9wKZuo91KgII0kd9dFJMFCm7evt-X0ykLw_vjcgg85kZoRbDvi89nEGiWmFLVKM_xVgZYufeMMudOGRcHgi4i-RZJ4mml2JMzN2OtJKyQdpxuC-3b9KfnRbyy_F75Gak5fwJIf4tvo6VNJKUJuBtKYKafPyH_YJU4HQMeHP8uO0-FhMN3mzRCmGjvExuqx1BhA67R35pmaTbyxz-06JEvIqzf8FTftoBowLSeu37KtNmagZ8cJpMlCe4kUaFY4v6ZTx7h9rYx37oYtZNsSR1t3KDFzQYRs5LAg8RQ&userid=OurDevId
If you look closely... the two '==' are being taken off the end of the "result" token string.
I've tested in non angular applications and this isn't happening. Why does angular do this and how do I prevent it?
Angular cannot handle == because of its $location's search parsing. Just visit : https://angularjs.org/?foo==123 and the url will change to https://angularjs.org/?foo=
The same will not happen on a non-angular page.
Solution: Either patch angular OR HTML encode the section after ?result=
Depending on what you're trying to do with the URL that is returned, it might be simpler to just set window.location directly instead of working through Angular. This bypasses the query-string parsing in $location that's stripping the double equals.