In cases like the following, links are not rewritten; instead, the browser will perform a full page reload to the original link.
Links that contain target element
Example: link
Absolute links that go to a different domain
Example: link
Links starting with '/' that lead to a different base path when base is defined
Example: link
Can anybody help me with this.
angular docs? what is the meaning of this third point. i also dont understand the solution of normal application on the same directory
When running Angular in the root of a domain, along side perhaps a
normal application in the same directory, the "otherwise" route
handler will try to handle all the URLs, including ones that map to
static files.
To prevent this, you can set your base href for the app to and then prefix links to URLs that should be handled with ..
Now, links to locations, which are not to be routed by Angular, are
not prefixed with . and will not be intercepted by the otherwise rule
in your $routeProvider.
Related
We have a qa/dev server and a prod server. The two differ by a directory like this
https://domain/service/envQA/sitename
https://domain/service/env/sitename
In some static html I'm trying to put in src and href that are relative to avoid having the markup reference QA if a developer migrates the content and doesn't update an absolute path that includes the envQA. We aren't very fancy and just move most documents over by hand and a busy developer might miss a reference in the middle of several pages of markup -- it happens.
So I'm trying to use relative paths like this.
<img src="assets/backgroundimg.png" />
This works when the user is at our homepage url of https://domain/service/env/sitename but unfortunately our site also has navigational elements that return the user to https://domain/service/env/sitename/ (note the closing slash).
Is there any way (without javascript) to handle a relative path that would work from either of those "locations"?
Have you considered using the <base> tag?
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This would allow you to set a base per environment allowing configuring all urls at once.
I am developing a website on a web server which can be accessed by 2 URL: mywebsite.example.com or example.com/mywebsite. For example, when I access mywebsite.example.com/images/abc.jpg and example.com/mywebsite/images/abc.jpg, I get the same picture.
The problem is, I have many links inside my website, and I am not sure should I use an absolute or relative path.
From another question
Absolute vs relative URLs
I found someone suggesting using URL relative to root (like /images/abc.jpg), however when I access the website using example.com/mywebsite, every link just break.
For relative paths, I found it hard to manage since webpages are in different folders, but using the same template which contains some links. It means I have to manually set some links as ../ and some as ./.
I have also tried using <base> tag however it messes up with anchor. Even if I try to include the full path before the # symbol, some jQuery libraries does not function properly since they get the value inside the attribute href directly, but not extracting the part after #.
Would there be any better practice or suggestion?
I think you should use relative urls, and concentrate your searchs on how to use relative urls in templates, that would be resolved relatively to the final page.
I don't know the technology you are using for templating, but I see two common solutions :
declare a "relative path" variable in the template, and then override it in the different pages, with the new relative path. Use this relative path as a prefix for all urls
delegate urls construction to a service that would know the final page. Somethinkg like resolveUrl(..)
How does an anchor tag work that does not specify a filename?
Example:
Fast Cars
I was under the impression the HTML file had to be expressly cited, but in this case it is not, just the directory name.
Does this reference an HTML file, or is it something else?
Depending on the webserver configuration, pointing to a directory might mean pointing to the index file of that folder, or even at whatever other file you want to rewrite.
There was a time in which SEO practices reccomended using folder style permalinks instead of query strings. So there were cases in which
/index.php?section=fastcars
was rewritten as
/fastcars
Again, this is all rewrite magic. Most webservers offer some kind of rewrite rules to achieve this.
Besides, an a element doesn't need to point to a file or url address. They can be used as internal navigation links to point to an anchor, and JS frameworks such as jQuery have popularized its use only as button replacements to trigger a given behavior.
An anchor tag's href attribute does not reference a file; it references a URL. What that URI corresponds to is completely opaque. In the most common case where the URL uses the HTTP(S) protocol, that URL is sent to the server as part of a request.
It's the server, and only the server, that determines what the URL corresponds to. It doesn't have to be a file or anything else that you might consider tangible, and you can't tell looking at it from the client side.
The main function of the "a" attribute is to create links. That means a link to an external website:
<a href="https://www.stackoverflow.com">
or a link within the same page. Just create an id - for example:
<h2 id="top">text text text</h2>
then create a link using that id -
Top
Every time you click on the link, your browser will send you to the part of the page where your id is.
Ok, so the title tells very little of my issue.
Basically, I have a project written in node that does something. It's a website that uses express, jade and stylus. I have set up the routing for static content like this:
app.use(express.static('public'));
The website works fine and all the CSS loads properly if, in the HTML, I reference it like this (for example):
link(rel="stylesheet", href="global.css")
As expected, when I hover over the link in Chrome's element viewer, the URL is localhost/global.css
So now I've got a couple of these little project and I want to put them all together. They aren't related but I'd like to put them all on my website. For this I have made a new project that server like a hub for the other ones.
In it, I've setup routing like this:
var proj = require("../proj/server.js");
app.use("/proj ", proj);
and in each of the projects I have set the modules exports like this module.exports = app where app is their respective express app object.
This also worked like a charm. I didn't have to run a separate server instance on a separate port for each project. Instead, you can access them like localhost/proj/
Now here's where the issue starts. The CSS that is referenced in the generated HTML of each project doesn't point to localhost/proj/global.css. Instead it still points to localhost/global.css. And since there's no global.css in the public folder of my hub application, it doesn't find it.
I could, of course, just change the relative URLs to proj/global.css instead of just global.css and this does work, but it means that I need to modify all of my projects. It also means that I have one more string to change should I decide to change their names.
Besides, the URL already shows localhost/proj, so why can't it just be automatically implied that when I reference global.css it should be looked for in localhost/proj/global.css?
I'm sure there's some easy trick I'm missing. Maybe my relative URLs should have some extra stuff that says it refers to the current URL?
Edit:
It actually seems that the relative URLs work, but only if the address in the address bar is localhost/proj/. If it's localhost/proj it doesn't. What can I do to force that last slash?
I don't know if it can help you, but in express, you can define several "public" directories
router.use(express.static(path.resolve(__dirname, 'client')));
router.use(express.static(path.resolve(__dirname, 'public')));
router.use(express.static(path.resolve(__dirname, 'foo')));
Suppose I had a URL in my browser location bar that read:
http://www.example.com/us/books
... how do I code the url in the page so that it'll add to the address in the location bar?
Example
Url in location bar: http://www.example.com/us/books
Url on page: Read more
Desired
http://www.example.com/us/books/this-title
No matter what I do, It wont appear after the entire URL. The URL isn't fixed.
This approach of using a relative path inside a reference does work. But you have to figure out some details which depend on your local situation.
In your case most likely the target url called is http://www.example.com/us/this-title (you did not tell us...). This is due to the fact how the browser (not the server!) interprets its current position inside the document hierarchy on the server.
If your base url reads http://www.example.com/us/books/ (note the trailing "/") then things would work as expected by you! You could even note the relative path as Read more. This works because the browser recognizes the current position as a folder and assumes the relative path to be located inside. This works for example when the html page holding that reference is delivered by an index document (index.html, index.php or similar) on the server. This is when the trailing slash makes sense, since it denotes that the current url retrieved the content of a folder, not a directoy.
Of course this is only what is happening on the client side. It might be that the server decides to rewrite the url and redirect the browser again. For example by using rewrite rules inside the http server. This is typically done to handle requests to non existing documents.