How to get path before # in Angular - javascript

In IIS, my web app runs in an application under the website. So instead of being accessible at www.example.com, it is actually at www.example.com/somepath/.
If I use window.location.pathname, I can get my hands on the /somepath/ portion, but with Angular's $location.path() I get nothing. From the official documentation, it seems like $location.path() should only get whatever comes after the hash, e.g. www.example.com/somepath/#/nextbit will give me /nextbit.
So how do I get my hands on the actual path where the website is hosted?

As you want to do it using Angular $location service, try this:
var baseUrl = $location.absUrl().replace('#/' + $location.url(), '');
absUrl() will get the whole URL, while url() will get the part of the url after #/

Since the information coming before the hash is not considered superbly relevant to Angular's internal workings, I don't think bypassing Angular's internal method ($location) would be a bad practice in this case.
I would go with your original assumption, since it will still work:
location.pathname
Unless you're worried about the bindings inside of Angular having fired prior to getting that path (which shouldn't have an affect on a static, IIS application path), this should be fine.

Related

JS - Change "window.location" value and objects within without redirecting

For context what I am trying to achieve is for a web proxy injection script. I am trying to change the value of window.location and the other objects within that. I am doing this so when a script is being proxied and uses window.location.path, It would output /example instead of /proxy/websiteurl/example. When I try to use Object.defineProperty(window.location, 'href', {}) it doesn't work and says I am not allowed to do this in the console. I don't really have code to give but I would really loved if someone helped me out.
A way to change the location without redirecting is with history.pushState()
Note that when a user refreshes, it does redirect to that url unless you push state with the original pathname after you're done using the changed location.
console.log(window.location.href);
const oldLocation = window.location.pathname;
history.pushState(null, "a title", "/new-directory");
console.log(window.location.href);
// to reset
history.pushState(null, "a title 2", oldLocation);
console.log(window.location.href);
I think there is a set of data that needs to be security-consistent and this is one of them; usually anything having to do with domain, URL, anything that might deceive about contents' origin, you won't be able to change.
To put it more simply: due to security consideration, JS will never allow you to make a 100% transparent proxy. It's the very first thing it is supposed to not permit.
This having said, the inner content will need to have knowledge that it's being proxied in URL manipulation. If you don't own the inner part, it's very tough luck. If you do, you should parametrize its root url based on which any interaction is computed. So #CertainPerformance 's questions in the question comments are very well directed.

Embed param with index page

I need to embed a parameter with all my pages url. Like:
index page = www.abc.com?param=value
about us page = www.abc.com/about-us.html?param=value
When i google it I found param tag. But it is child tag of Object Tag. So I don't know how to use this to address my issue.
Note: Am adding parameter to maintain my version upgrades so that browser will fetch from server whenever new updates added not fetching from cache like Google.
How to achieve that?
When i google it I found param tag. But it is child tag of Object Tag. So I don't know how to use this to address my issue.
You can't. It has nothing to do with your issue. Object parameters and query string parameters are entirely unrelated.
Am adding parameter to maintain my version upgrades so that browser will fetch from server whenever new updates added not fetching from cache like Google.
That is used when linking to resources that change infrequently and you normally want to be heavily cached, but which occasionally change in a way that would break parts of a site if not refreshed in the browser. Primarily this applies to stylesheets and JavaScript files.
For regular pages, you usually don't want such strict caching rules so you should configure your HTTP server to put appropriate cache control headers in the HTTP response for the HTML document.
For instance:
Cache-Control:max-age=3600
ETag:"44ab-51ae9454a67e2"
mnot has a good guide if you want a more in depth explanation about how to control caching.

Receiving POST from external application in AngularJS

I'm writing an application which uses AngularJS 1.4.0 which requires the ability to receive POST data from an external application. I know that routes in AngularJS often do parameters in the URL such as this:
.when('/section/:param', {
templateUrl: 'views/home.html',
controller: 'AppCtrl'
})
The problem with this style is that in my case the parameter is often very very long and it will cause the web server to ignore / truncate the request / parameter because the URL exceeds the maximum URL length.
For this reason, instead of a standard GET style parameter, I would like the application to receive a POST parameter, but I am not sure how to capture the parameter(s) and value(s).
Is there a way for Angular to capture the POST parameters directly? My second option would be to simply have an ng-init which uses a backend to grab the values, but I'd prefer to keep the parameters solely in Angular if possible. Thanks!
Except if your willing to do some weird black magic by setting cookies server-side - or something similar - there is no way to this in javascript.
POST values are sent to the server upon request, it's impossible capture these with javascript running in your browser.
Check out this answer aswell: How to read the post request parameters using javascript

Ember router resume on reload

I have an ember.js router based application with an interesting quirk. Since the router documentation is rather sparse, I'm not sure if this is a feature or a bug or an un-intended consequence of some of my code elsewhere.
When I reload the page containing the app in my browser, the App jumps to the route of where I last was. I have the routes serialized as a hash. So an example would be I'm on app.html#/users/1/details and I delete the hash and add a random query variable app.html?reload=randomnumber and load the page. As soon as ember loads, it is adding the #/users/1/details back to that address.
Is this a feature/consequence of ember, or is it some junk that I wrote. I haven't found anything that I wrote that could be causing this so far.
If it is an ember feature, is there a way to disable it?
What are you calling "reload", exactly?
Ember cannot keep any state in your browser when route is serialized using a hash. It has nothing to see with Ember: when reloading the page, the whole state is lost, and reset according to requested url returned content initializations.
Nevertheless, when a hash is present, it is used by Ember to reset the router's state.
So what I would suspect is you are still reloading the URL .../app.html#/users/1/details.
Did you take a look at your Network history, in the developer tools (or equivalent)?
The first item should be a GET request, and it will indicate the effective requested URL and the hash if any.

Hashbang versus URI parse

I am looking to move my site into full async document loading, but I don't want to use the #! method of request processing because 1) I don't want to break links, and 2) I want a more flexible way of processing the URIs the site gets.
I've been able to build a light MVC for my site that allows a common-style url ( ex: http://ddrewdesign.com/blog/jquery-is-or-is-child-of-function ) to make the correct requests.
My question is: this was trivially easy to do. What am I missing? Why did Gawker and Google opt for #! when this method seems to make more sense from a user experience perspective?
EDIT
For clarification, originally, my site was solely using the querystring method (no mod_rewrite) of retrieving for requests. These links are all over the web, and I can't have them break. It's my understanding that they will if I move to use the hashbang method. Again: this might be part of my confusion, so I'm not saying I've accounted for everything. I'm asking what it is I'm missing, because nothing I've read thus far has made it seem like I can accommodate that querystring.
I think you're looking for history.pushState urls, which allow you to do partial page loads, and have the same urls with and without javascript.
For example, say your base url is http://site.com/ With history.pushState, you can use javascript to modify the page to be javascript.htm, so that the url changes to http://site.com/javascript.htm.
#! urls only work with javascript, because the #fragment can't be accessed server-side. With hashbangs, your url would be something like http://site.com/#javascript.htm Note that the ! is unnecessary. Since you can set anything after the hash, you could also have the url http://site.com/#!/javascript.htm.
Unfortunately, since IE doesn't support history.pushState, you have to have #! urls as a fallback.
Neither method breaks the back button, but urls have to be set up different ways for each method.
Hashbangs work something like this:
function change(){
//page update logic
}
//hashchange event binding
(typeof window.addeventListener === "function")
? window.addEventListener("hashchange", change, false)
: window.attachEvent("onhashchange", change);
//This is how the hash is set
location.hash = "hashstring";
//Accessing it returns the hashstring, with a #
location.hash; //returns #hashstring
History.pushState is a bit more complex, as you store the "state" of the page in an object.
Here are some good references on this method:
Javascript: The Definitive Guide 6th Edition
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
http://diveintohtml5.ep.io/history.html
Both methods require javascript page manipulation. I have an example of these kinds of urls. http://timshomepage.net/comic/ has links to a bunch of different webcomics, and embeds them in an iframe in the page. With javascript disabled, the link will be something like http://timshomepage.net/comic/dilbert. With history.pushState, I can have that same url. With hashbang fallback, I get a url like this: http://timshomepage.net/comic/#!/dilbert

Categories