I have been researching over this for some time now, have come across quiet a few stackoverflow discussions which are similar but none of which answer this question to my satisfaction. I am not sure if angularjs has a way to do this, but I am sure there is a way to do this when writing angularjs SPA applicaiton. Here goes my situation,
I am writing an AngularJs front end for an existing ASP.NET MVC based application.
The URL in the current application look like
https://domain.com/login
https://domain.com/profile
https://domain.com/settings
etc
My new frontend version reads
https://domain.com/index.html/login
https://domain.com/index.html/profile
https://domain.com/index.html/settings
Problem I need with is,
I need to remove the .html from the new urls. This is my first hurdle. Everything that I need to do later depends on how my URL reads. It needs to read in a format ASP.NET MVC provided. A url without the .html file extension in the URL.
When I googled for suggestions with keywords "angularjs url remove html and #!"
The top two results I get are
How to remove index.html from url on website based on angularjs
and
Removing the fragment identifier from AngularJS urls (# symbol)
none of which are quiet helpful in solving my situation.
There is a workaround I am considering if there is no better way to do this, which would be
"Since Index.html is where my ng-view resides and essentially this page drives my SPA architecture, so I can do into my IIS and set Index.html as a default document" What this does is helps me achieve what I want (not show ".html" in the URL) to a certain extent. For example (when working locally) if I navigate to http://localhost it will open the index.html without the file name being displayed in the URL and the angularJs routing still works fine as long as I don't refresh or copy paste those URLs (without index.html in them) in which case I get 404 errors (when I use $locationProvider.html5Mode(true) to remove the #s).
This surely is not the ideal solution because when the system emails users with URLs they need to use to access certain parts of applicaiton, we will invariably need to include the index.html in there (which we do not want to)
Any help, extremely appreciated. Thanks.
It's server side problem, not cliend side. You must handle request from server side like this:
handle '/'
return view 'index.html'
Then when you visit https://domain.com/, you will see index.html file, but it will not be visible in url.
EDIT
If you are using angular's html5 mode then you shall do more complex routing, something like this:
handle '/'
handle '/login'
handle '/profile'
handle '/settings'
return view 'index.html'
Because for example you are on url: https://domain.com/profile and you refreshed the page, request will be sent to this url, so you shall also handle '/profile' route and return same index.html page (then angularjs will take care about routing)
If you are using hash(#) then when you refresh https://domain.com/#/profile page, request will be sent to https://domain.com/ and '/' route handler will be enough
You can write a URL Rewrite rule in your web.config :
<rewrite>
<rules>
<rule name="Registration" stopProcessing="true">
<match url="^Registration"/>
<action type="Rewrite" url="/registration.html"/>
</rule>
</rules>
</rewrite>
Related
First, let me say you will not be able to reproduce my problem unless you also are working in a healthcare situation using the latest athenaPractice EMR.
I just don't have any direction on where to troubleshoot this problem and looking for suggestions for what information or settings I should be checking.
I have an AngularJS SPA set up that routes 100% fine in a regular Chrome browser window locally served (http-server installed via npm). I can load the main app page by URL (localhost:port/app, which redirects to /app/#!) and I can load the subpage by URL (localhost:port/app/#!/page). I can do it with or without a trailing /. I can navigate from one view to the other by links on the page. Works great.
But I have a problem when I put it in the server location (which, if it's relevant, has a path longer than /app/ from the //localserver/ root), and load the file through the EMR (which is running Chromium). (Files are loaded in the EMR by adding a specially formatted file that links all included items in a form, which in the case of HTML files, is just a URL to a resource: //localserver/directory/subdirectory/app/#!/page). It loads fine the first time, but if I try to load separately a different page (//localserver/directory/subdirectory/app/#!/, for example), it shows the currently open page. It's almost like both instances of the browser are the same browser window and it doesn't bother to load a new window for the URL with the same address up to the #!. I can navigate from one page to another by links but not by loading from the root address, and if I navigate under one "form", and click back to the other one, it's also been navigated, hence why I think it's only one instance of the window.
I tried HTML5 routing with no success since this is running in a JBoss 7.x server and I have had a very hard time finding any documentation that even comes close to matching the files I see on the server for URL rewriting access. (I have found instructions that reference files that don't exist in our installation, so I don't know if this has been customized by the application provider, or what.)
I don't have access to developer tools, console, or even the address bar through the EMR.
Any suggestions on where to go with troubleshooting this?
Edit to add: Might be worth noting that I have tried ngRoute and ui-router both with the same results.
I got this working correctly. I don't know what the root cause in the EMR is, but it was treating each loaded route of the SPA as part of the same instance using #! routes. Getting HTML5 routing working solved the issue.
After fighting with Undertow for a day and having no feedback on why my rules weren't working, I ended up using Tuckey's URL Rewrite. It helpfully logs what input it was comparing against what which allowed me to see where my first attempts at rules went wrong, and edit them accordingly until they worked.
This required three file changes in the WEB-INF directory inside the application's .war directory. (There are various META-INF and WEB-INF directories all over in this setup but using this one worked in the specific deployment I'm working in now, namely our demo server.)
Create a /lib directory inside WEB-INF and put urlrewritefilter-4.0.4.jar in it (downloaded from the Maven repository)
Put the example urlrewrite.xml into WEB-INF and adapt it with necessary rules. For the root page of our SPA and the first route, the custom rules I inserted look something like this:
<rule match-type="regex" enabled="true">
<condition type="request-filename" operator="notfile" />
<condition type="request-uri" operator="notequal">(\.html|\.js|\.css)</condition>
<from>^/FormsFolder/subfolder/app/$</from>
<to last="true">/FormsFolder/subfolder/app/index.html</to>
</rule>
<rule match-type="regex" enabled="true">
<condition type="request-filename" operator="notfile" />
<condition type="request-uri" operator="notequal">(\.html|\.js|\.css)</condition>
<from>^/FormsFolder/subfolder/app/route1/$</from>
<to last="true">/FormsFolder/subfolder/app/index.html</to>
</rule>
Add the Tuckey Rewrite Filter to web.xml:
<filter>
<filter-name>UrlRewriteFilter</filter-name>
<filter-class>org.tuckey.web.filters.urlrewrite.UrlRewriteFilter</filter-class>
<init-param>
<param-name>confPath</param-name>
<param-value>/WEB-INF/urlrewrite.xml</param-value>
</init-param>
<init-param>
<!-- This configures how often to check for an update to urlrewrite.xml -->
<param-name>confReloadCheckInterval</param-name>
<param-value>60</param-value>
</init-param>
<init-param>
<!-- This configures what detail level of messages to log. TRACE was useful to
figure things out but DEBUG or WARN is probably more appropriate for production -->
<param-name>logLevel</param-name>
<param-value>TRACE</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>UrlRewriteFilter</filter-name>
<url-pattern>/*</url-pattern>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>
Lastly I had to update the index.html of the SPA to include the base tag, before all the stylesheet links and javascript script includes so that they route correctly. For the demo server, mine looks something like <base href="/demo/ws/FormsFolder/subfolder/app/"> but will have to be updated to publish to the live server.
Hopefully this is helpful if anyone else is trying to configure HTML5 routing on a similar JBoss server.
Is it possible to serve a dynamic html page without a backend server or without using a front-end framework like Angular?
Edit
To clarify, the index file is served from a backend. This question is about how to handling routing between the index and dynamic pages.
I have an application that consists of two files - index.html and dynamic.html. When the user clicks an option say "Option A", they are served dynamic.html and the url is updated to /option-a. Now, with a server this is no problem and assuming the user visits the app from the landing page, it isn't a problem either because a cookie can be set. However, suppose a user visits a page at my-domain/option-a. That route doesn't exist and there is no server to redirect so it will 404. They would have to visit dynamic.html.
I think this architecture demands that there's either a server to handle route redirects or a SPA framework.
Is there something I'm missing?
your SPA framework will be active only once your HTML page is loaded and to do that you need to redirect any URL that user tries for your domain to that HTML file. For this you obviously need a server (and since you are talking about my-domain/option-a I assume you have atleast a basic server). You can refer to this link to get an idea on how server can redirect a URL to specific html file: Nodejs - Redirect url.
Once HTML is loaded you can initialize your SPA framework and decide the template to be loaded based on the URL.
Note: without a server you will access URLs using file://somepath/index.html and anything other than this URL will result in 404 and no SPA framework can handle that.
I think the solution is to use a static site generator such as Jekyll or Middleman and allows you to convert information into static pages. That way you functionally are building a bunch of pages but they are all compiled ahead of time. You can add dynamic content that is loaded in from a yaml file and it will compile the content into separate html pages.
It is not possible, but there is a workaround using url parameters like this:
my-folder/index.html
my-folder/index.html?=about
my-folder/index.html?=about/sublevel
my-folder/index.html?=profile
my-folder/index.html?=./games
const urlParams = new URLSearchParams(location.search);
const route = urlParams.get('');
console.log(route);
// Should print "about" "about/sublevel" "profile" "./games"
Of course this approach is not as clean as using a server for routing, but it's the best you can get without a server.
BTW. I tried an alternative solution creating symlinks with all the target routes pointing to the same index.htmlfile. But it did not work because the browser (firefox) redirects by default when it finds a symlink, thus home is shown all the time.
I just removed # tag from my url of angular single page app.
I did like.
$locationProvider.html5Mode(true);
And It worked fine.
My problem is when I directly enter any url to the browser it showing a 404 error. And its working fine when I traverse throughout the app through links.
Eg: www.example.com/search
www.example.com/search_result
www.example.com/project_detail?pid=19
All these url's are working fine. But when I directly enter any of the above url's into my browser it showing a 404 error.
Please any thoughts on it.
Thanks in advance.
Well i had a similar problem. The server side implementation included Spring in my case.
Routing on client side ensures that all the url changes are resolved on the client side. However, When you directly enter any such url in the browser, the browser actually goes to the server for retrieving a web page corresponding to the url.
Now in your case, since these are VIRTUAL urls, that are meaningful on the client side, the server throws 404.
You can capture page not found exception at your server side
implementation, and redirect to the default page [route] in your app.
In Spring, we do have handlers for page not found exceptions, so i
guess they'll be available for your server side implementation too.
When using the History API you are saying:
"Here is a new URL. The other JavaScript I have just run has transformed the page into the page you would have got by visiting that URL."
This requires that you write server side code that will build the page in that state for the other URLs. This isn't a trivial thing to do and will usually require a significant amount of work.
However, in exchange for that work you get robustness and performance. When one of those URLs is visited it will:
work even if the JS fails for any reason (such as a dropped network connection or a client (such as a search engine) that doesn't support JS)
load faster than loading the homepage and then transforming it with JS
You need to use rewrite rules. Angular is an single page app, so all your request should go to the same file(index.html). You could do this by creating an .htaccess.
Assuming your main page is index.html.
Something like this (not tested):
RewriteRule ^(.)*$ / [L,QSA]
L flag means that if the rule matches, don't execute the next RewriteRule.
QSA means that the URL query parameters are also passed with the rewrited url.
More info about htaccess: http://httpd.apache.org/docs/2.2/howto/htaccess.html
I wonder is it even possible: I'd like to redirect my 404 page to . [current catalog], or to .. [level up] if the first one failed.
The idea is if someone tries to reach http://mypage.asd/cat1/cat2/page.html, and there is no cat2 catalog in cat1 - browser would (eventually) get to cat1.
I don't want different 404 pages for different subcatalogs, which would be easier to make - so here I am with my question.
Page is in html with js elements. Tried dynamically changing meta tags with js, but it doesn't work (js is executed onload, meta tags are parsed earlier) and looks awful.
My redirection code - for now - is standard:
<meta http-equiv="refresh" content="3 URL=./">
You could do this on the server side -- intercept the raw http request, and then if the page doesn't exist, load a different page based on arbitrary logic. Depending on what server side platform/framework you're using, this could be achieved in various ways.
You could possible do this using .htaccess if you're running Apache server. See this stackoverflow question for how to do that.
I'll just comment that #anand.trex 's reply is THE answer for such a use case. When redirecting, especially with invalid URLs, for a multitude of reasons it is better to use server-side redirection, like through .htaccess of Apache's server.
This is my first time creating a mobile site for someone I have the javascript code all set up and when tested on my phone, it redirects it to: m.websitename.com, like I want it to. However, I have no idea what to name the file I am wanting it to redirect to? I saved the file under: mobile.html, but it isn't redirecting to it.
I don't want it to redirect saying www.websitename.com/mobile, I don't think it looks as professional.
Thanks
index.html or default.html is the convention. so why not direct to
m.websitename.com/index.html
and configure the subdomain so that m.websitename.com is actually pointing to websitename.com/m folder. so that folder can have its own index file.
You would probably want to do this using subdomain and destination setup from your server you are using (Most of webhosting companies made this easy through their software e.g. cPanel). Directory structures is going to look like this. So when user was redirected t m.yourweb.com/ then it's not going to have m.yourweb.com/mobie.
domain [directory]
css [directory]
js [directory]
index.jsp [file]
purchase.jsp [file]
...
subdomain [directory] <- for mobile
css [directory]
js [directory]
index.jsp [file]
purchase.jsp [file]
So when mobile user was detected, JS is going to redirect this user to the subdomain (for mobile) instead of normal directory.
The other recommendation (which is better I think) is use the same logic from the above but when user was redirected to m.yourweb.com/ load css file for mobile version web instead of normal web. loading css through JS
If you think this is complicated, you might be interested in having a look at CSS3 media queries. This basically changes CSS layout depending on current users' screen. resolution Media queries tutorial
You can have any filename you like. But as btevfik mentioned either put index.html or default.html
I recommend index.html
Also you can set the default file in you server configuration. By default most servers have the default file handler as index.html. For Apache it will be either index.html or index.php. You can change this to something like mobile-handler.html by changing the server configuration.
So whenever you access your site by http://your-site.com or m.your-site.com the default file specified in the server configuration is loaded.
Please note that your-site.com and m.your-site.com will have different site root, hence request will be handled by difffernt files.