Develop Reference

angularjs routing not working in proprietary browser

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.

Can anyone explain me why we use a public folder to hold css and image folder?

Can anyone explain to me why we use a public folder to hold CSS and images folder?I am new to node js and trying to learn in-depth about it.

As the name suggests "public", it is to serve static files (which don't change) like CSS, JavaScript, images, etc.
We keep these files in the public folder and expose the entire folder through proper means.
Now, whoever requests these files (The browser) which are present in this public folder can access the files . Note that you can have any name and expose it , the "public" is just a proper and common name.
Also, by default your folder will not be accessible. You need to enable that.
From express documentation,
For example, use the following code to serve images, CSS files, and JavaScript files
in a directory named public:
app.use(express.static('public'))
Now, you can load the files that are in the public directory:
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
https://expressjs.com/en/starter/static-files.html Check this for more info, if you use express.
Lets say you don't keep the files in a folder that is not made public or exposed, what will happen is the browser or any client that tries to retrieve the image or CSS will not be able to access. In this case you need to enable separate routes for these files independently and for all the public files, which is time consuming and complex.
Let me give you an example, consider your webpage has an image of cat in an tag in html. What browser does is it will make a get request to get that image from the server, if the image is not in the public folder or there is no route setup to handle this file, the browser will not be able to display the image in the webpage.
Note: This is why private pictures are not saved in a public directory, you better have a dynamic route that handles those pictures. Only authenticated users will be able to access. If you place private pictures in public folder, anyone can access it.

Nodejs is simple a server side scripting language. Its main work is to process data that comes from the client side (i.e HTML) or frontend and store it to database. After the data from the html are processed then it is needed to be sent back to the browser. On sending data from server to the client , the rendered element need to have different styles and js and image as well. These things are to be made available publicly because the browser should be able to access it and process in client side. so for this and images, css, js and docs as well, we use public fonder.
or putting it simple, those static (constant) files which are accessed by the browser (not server) are kept in the public directory.

Reference JavaScript Files that are in the views folder - MVC 5

It is a standard in my company to place the JavaScript file that is uniquely associated with one page or view in the same folder where that page or view resides. Now that we are migrating to MVC we want to keep doing that. For example, if there is a file
~/Views/Customer/CustomerMgmt.cshtml
I need to be able to reference the following associated script file:
~/Views/Customer/CustomerMgmt.js
This js file has functionality that ONLY pertains to CustomerMgmt.cshtml the file will not be shared and thus no other consumer will make use of it. If I reference the JavaScript file using the following, it fails with a 404 error:
<script type = "text/JavaScript" src = "#Url.Content( "~/Views/Customer/CustomerMgmt.js" )">< /script>
The solutions I tried after researching include:
Add the JavaScript reference to BundlerConfig.RegisterBundles and use Scripts.Render in the CsHtml: I still get a 404 error.
Remove the filter that comes with ~/views/web.config:
< add name="BlockViewHandler" path="" verb="" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" / >
This option allows me to reference ~/Views/Customer/CustomerMgmt.js but it is unsecure
Use blacklisting instead of whitelisting to only block *.CsHtml files: This would potentially allow other extensions that may be added in the future and not only *.Css and *.Js
Add the following to the handlers section:
< add name="JavaScriptHandler" path=".js" verb="" preCondition="integratedMode" type="System.Web.StaticFileHandler" / >
I still get a 404 error.
Add custom code to be able to reference the files I need (Helpers, jScript controllers, etc.)
I opted to use the following instructions that modify ~/views/web.config:
Add the following inside < system.webServer >< handlers>:
< add name="JavaScript" path="*.js" verb="GET,HEAD" type="System.Web.StaticFileHandler"/ >
< add name="CSS" path="*.css" verb="GET,HEAD" type="System.Web.StaticFileHandler"/ >
Add the following inside < system.web>< httpHandlers>:
< add path="*.js" verb="GET,HEAD" type="System.Web.StaticFileHandler" / >
< add path="*.css" verb="GET,HEAD" type="System.Web.StaticFileHandler" / >
< add path="* " verb="*" type="System.Web.HttpNotFoundHandler" / >
After I make this change I get a 500 error and the following (in brief):
An ASP.NET setting has been detected that does not apply in Integrated managed pipeline mode
And I’m presented with the following suggestions:
a. Migrate the configuration to the system.webServer/handlers section
b. Ignore this error by setting < system.webServer >, < validation validateIntegratedModeConfiguration="false" / >
c. Switch the application to a Classic mode application pool
After using the option “b” everything seems to work fine and I’m able to reference ~/Views/Customer/CustomerMgmt.js but I see several posts suggesting that this is not the best approach.
My questions are:
What is the best approach to follow for this case? I’m using MVC 5.2.3
Is the practice of putting a uniquely associated js file in the same folder as the view considered a bad practice? This file will ONLY be used by a particular view and we don’t want to clutter the ~/Scripts folder (or subfolders within).
I know that I can also create a new folder structure like “~/ViewScripts/…” and put the associated js files there. I will do that if necessary but, if possible I would like to keep adhering to the company standards and put the file, that is only being used by a particular view, together with that view.
Thanks to everyone in advance. Some of the items that I researched include:
MVC - Accessing css, image, js files in view folder
Placing js files in the views folder
How to reference javascript file in ASP.NET MVC 2 Views folder?
Where to put view-specific javascript files in an ASP.NET MVC application?
Cannot load resource MVC 4 JavaScript
Can I deploy a javascript file within MVC areas?
Serving static file on ASP.NET MVC (C#)
Serving static file on ASP.NET MVC (C#)

From this forum I managed to get some code that seems to do the job. I'm using it in a ViewComponent. I have a folder for the component and wanted to consolidate all the files in one folder, e.g.
\Component\
\Component\Component.cshtml
\Component\Component.js
\Component\ComponentModel.js
\Component\ComponentController.js
Assuming a consistent naming convention, I loaded it with this, which doesn't require any changes to web.config nor does it open up the client to loading other .js files.
<script>
#{ Html.RenderPartial(Regex.Replace(ViewContext.ExecutingFilePath, #"\.[^.]+$", #".js")); }
</script>

HTML/Javascript: Enabling folder access from a subdirectory

I have a simple HTML file with some JavaScript that I would like to run locally (as opposed to deploying to a server). It is embedded inside a larger project whose file structure I would like to maintain. For example, the structure is something like this:
project level folder > src folder containing folders & files I would like to probe
> separate, non-project util folder > HTML & JS files I would like to run against src
I am aware that certain browsers do not allow this for security reasons (as pointed out here), but since I control all of the files - is there a way for the src folder/files to somehow indicate that they will allow the 'separate, non-project util folder' to access them? Maybe some kind of project-specific settings somewhere? I am aware that this can be done in server settings, but as I mentioned above I'd like to be able to run it locally without the need for a server.
The JavaScript that is attempting to access the src files uses RequireJS, in case that helps.

Here is what I ended up doing:
I wasn't able to provide full access exactly this way, but instead I setup a dummy HTML page in the project level folder that clicks itself to redirect to the HTML file located in the separate, non-project util folder. This allowed me to keep everything but that one, very small file separate but not have issues with file access.

http url for js file inside a war?

Suppose a WAR layout like so:
foo.war
-->/WEB-INF
-->/classes (..)
-->/js
-->bar.js
-->index.jsp
-->web.xml
Now suppose the WAR's virtual directory is /blah on server example.com (i.e. http://example.com/blah).
What is the HTTP URL of bar.js, one that would be used in a <script src=""> tag that index.jsp might serve up? http://example.com/blah/js/bar.js doesn't seem to be working.

You must NEVER put a JS inside WEB-INF directory.
As written in Servlet specifications, whatever you put inside WEB-INF directory will never be directly available to the external world. Only local application resources go there.
So if you want some JS file accesible from outside, put it directly at WAR's ROOT. Something like this:
foo.war
-->/js/
-->bar.js
-->/WEB-INF
-->internal resources here
The URL to access JS will be something like:
http://YOUR_IP:8080/foo/js/bar.js
This of course could vary depending on how you setup your war deployment on your application server.
You do however put JSP files inside WEB-INF directory, only to invoke them from Servlets (you can't directly access them either) with something like:
RequestDispatcher dispatcher = getServletContext().getRequestDispatcher("WEB-INF/index.jsp");
This is a common practice if you don't want people accessing directly your JSP files from outside.

There is no URL that will point to this. Everything within WEB-INF is not exposed to the outside world.
Rather, if you organised the WAR layout like this:
foo.war
-->/WEB-INF
-->/classes (..)
-->web.xml
-->/js
-->bar.js
-->index.jsp
Then you could access your Javascript as http://example.com/blah/js/bar.js.
P.S. You won't be able to access index.jsp either, the way you have things set up at the moment.