As soon as I unzipped and configured the PSK, I tried to add an admin.html page next to index.html from where I'd like to manage my application. However, when I try to reach it via localhost:3000/admin, I get redirected to localhost:3000/admin#!/admin where the original application, the one in index.html shows up, I think because of routing.
I tried removing the hashbang option from page.js, tried changing the / route to /home, all to no avail. The admin.html page doesn't want to show up.
How does one do that? Maybe I need to create another application all together and host it on /admin?
P.S. I am not asking about the security of the approach here. If you want to know anyway, I will try to manage security with firebase (still have to look into it). Thanks.
First, in order to get to admin.html, you need to use ".html" in your URL. So try using localhost:3000/admin.html.
Second, assuming you've made no changes but to duplicate the index.html and rename it admin.html, this will still trigger the routing. You'll need to either create new routing contexts to routing.js in order to control this page, which is a little awkward being it's essentially controlling two separate SPAs, or remove routing.js from your Vulcanized elements.html file so that it can be included only on the main app (index.html). The second option also opens the possibility of having multiple routing.js files so for example your admin.html could essentially become it's own SPA controlled by routing.admin.js.
Good luck!
Related
The Scenario
I'm developing the front-end (CSS only) of an Angular SPA.
I'm not especially familiar with Angular routing.
I'd like to add a standalone page containing Bootstrap components just for development purposes (yes, I know this means it won't be a single page application anymore). This way I have one unified view with all the components so I don't have to switch back and forth while working on the CSS. It also acts as documentation for the Bootstrap for the other devs to refer to.
What I've tried
I originally added a bootstrap.html page to the app folder, alongside the app's index.html This worked at first, but has now stopped working. What would be the best/standard way to achieve something like this?
Update: I've managed to fix some of the JS errors, so the page is up and running again. My question remains though: "is there a way of adding a standalone page that is considered standard/best practise, or is it literally just add a separate HTML page at the app root?"
If you use a target='_self' in your linking anchor tag, this should force a full page reload, and that will avoid the angular routing - which is where I expect your request is getting hijacked (by design).
e.g.
link
Answering your updated question
Not to my knowledge, since (as you correctly pointed out) this mixes the SPA design pattern.
If I have an Angular app that's located at http://example.com and I have templates that I want to be able to access at example.com/contact, example.com/demo, etc, is there anyway to access one of those links directly in the browser (say example.com/contact) without the use of a web server? Or will I have to change my url structure to match example.com#contact.
I have a node server already but I'd prefer to use a hosting option that didn't require it.
EDIT:
To clarify, this is not about getting the routes to be pretty. I already have html5mode enabled so that if I were to click nav buttons for example, the url gets nicely changed without going to another page. This is about directly typing in a "sub-route" into the address bar, something like example.com/demo and hitting enter.
what you want is to basically remove the # in the url. you can do that by enabling html5mode in angular.
in your app.config add below line
$locationProvider.html5Mode(true);
read more about it here
I have an angularJs application, which uses $routeProvider to handle internal routing. The back end uses Rest controllers within a Spring Boot application. The application is based on this: https://spring.io/guides/tutorials/spring-security-and-angular-js/
What I want to do is send an email with an embedded link similar to "http://localhost:8080/link/key1234". The user should be able to click this, and go to specific content as indicated by the key1234 variable.
I have seen a similar item (Refreshing page gives "Page not found") which suggests using .htaccess to handle this, but I do not currently have a .htaccess file.
I also have html5mode on [$locationProvider.html5Mode(true);]
Another suggestion (Spring Boot with AngularJS html5Mode) is to intercept the request and redirect to the home page. Whilst this prevents the application from failing, I need the user to go to a specific page, not the Home page.
I have managed to get quite confused about the interactions of my different components. Can you point me in the right direction to enable a specific link to be provided ?
UPDATE
I think that the .htaccess file is a red herring.
The spring.io tutorial includes the following code:
#RequestMapping(value = "/{[path:[^\\.]*}")
public String redirect() {
return "forward:/";
}
And this segment performs a redirect for some of the pages.
However, my tests (until recently) had been using "http://localhost:8080/public/about" which is not getting picked up by the RequestMapping snippet above.
If I use a single level url (e.g. "http://localhost:8080/test") then my existing code works fine.
It looks like there is a flaw in this regex.
When a request like http://localhost:8080/link/key1234 hits your server, you would need to forward the request to home page. Then, the client should get the response of the home page, while the URL will still be http://localhost:8080/link/key1234. html5mode will then come to play, changing the view at the client side.
I think the best way to do it might be to use urlrewrite filter, which should forward all requests except those starting with, say /api/**, to the home page.
I'm asking this because a couple of times now, I've tried to play around with the $locationProvider.html5Mode(true) command along with <base href="/"> and ran into a lot of errors calling the scripts/styles/images for my project. I guess there must be something I am doing wrong, but is there a certain folder structure you should follow so you don't run into these errors? Or is there a specific way that the base href works that I'm not quite understanding?
Recently, I thought I'd try it on a very, very small app. It's effectively a static website, but I want to take advantage of Angular's routing to make sure all of the pages can load instantly. So my structure would be something like this:
my-project
css
images
js
angular
app.js
app.routes.js
mainCtrl.js
views
home.html
about.html
contact.html
index.html
So I know that this folder structure isn't great, but I'll only be using Angular in this project for routing, nothing more, so it fits my needs.
I put into the head <base href="/">, put in body ng-app and ng-controller, and inside the body put a <div ng-view> somewhere too.
I added in the $locationProvider.html5Mode(true) and tried the app out. All of my scripts are then being loaded as http://localhost:8888/script.js which is incorrect. The project is located in a folder so that index.html is located in http://localhost:8888/my-project/index.html. So, it should be loading the scripts from http://localhost:8888/my-project/js/angular/app.js for example.
Is there something that I'm not understanding about the base href? Eventually I may host this app somewhere online, so I want the URLs to scripts etc to all be relevant to the file really. Anyone have any ideas?
Alright, so above the base href tag I would have my CSS styles which would be linked as css/style.css and at the bottom of my body tag I would have my scripts loaded as js/init.js or js/angular/app.js for example. This would try to load it as if the js folder is located directly at localhost:8888/js.
The Angular framework is a Single Page Application (SPA) that is able to run in a browser by essentially tricking the browser into running code snippets rather than make server calls, by making use of the "hash" (#) page anchor. Normally, a URL with a # would jump to a specific anchor point in the page; in the case of Angular or other similar SPA frameworks, the # is redirected to a code segment instead.
Ideally, you would like to not have to reference this # in your page URLs. This is where Html5Mode comes into play. Html5Mode is able to hide the #, by using the HTML5 Push State (aka history API).
When Html5Mode is enabled, the normal links on the page are silently replaced by Angular with event listeners. When these events are triggered, the current page is pushed into the browser history, and the new page is loaded. This gives the illusion that you are navigating to a new page, and even allows for the back button to operate.
This is all fine when you are dealing with links which are clicked from within the running application, but relying on event listeners can't work if you navigate to the page from an external source, where Angular isn't loaded into memory yet. To deal with this, you must be loading your pages from a web server which supports URL rewrites. When the server receives a request for a URL that there isn't a physical page for, it rewrites the URL to load the base HTML page, where Angular can be loaded and take over.
When Angular receives a request for a route which has been rewritten in this manner, it must first determine what the intended route was. This is where the Base HTML Tag comes into play. Angular uses the Base reference to help it to determine which part of the URL is on the server, and which part is a client route. Essentially, where the # in the URL would be if Html5Mode was not enabled.
Unfortunately, Base is an HTML Tag that is used by the browser for more than just Angular. The browser also uses this tag to determine the correct location to load scripts and resources using relative paths from, regardless of the path in the location bar. In general, this isn't a problem if all of the scripts and resources are relative to the location of the Index.html file. When Base is omitted, the browser will load scripts from the apparent base path determined by the current URI. However, once you provide it, the browser will use whatever value you have supplied.
In general, unless you are hosting angular on a sub-page of your site and you want your users to expect something specific in the URL string, you should always control the base on your server, and use Base="/" on the client side.
When routing in Angular views we add the following. I don't understand the need to add #; if I remove it, I get a 404 Error.
a href="#/AddNewOrder"
Putting # in URL indicates start of the hash part, which is used to address elements inside a single page. In modern single-page web applications, this can be used to address application states.
If you don't put the # there, you're changing the path, which means you're creating a new URL and prompting the browser to load the content at that new URL instead of the current page.
As other posters have suggested, you don't have to use hashes when using html5mode. I left it out, because it brings a few challenges of its own, which I feel to be outside the scope of the question.
enter link description hereYou don't have to. You can configure your URLs to look like normal URLs, but in reality they will still work the same way.
Check https://docs.angularjs.org/guide/$location
And refer to html5mode
It will only work in modern browsers though. Old browsers will still show the hash. But the cool thing is that you can write your URLs the old/normal way.
# or fragment identifier is a way to indicate a specific portion of a single document. Without the #, the url corresponds to a different page.
For example www.yoursite.com/page links to the /page location of your website, while www.yoursite.com/#/location points to the same index page of your website but at a specfic point in the web page #location, or in your case, a different template view.
Angular routing can not load different templates for different server urls. It is specifically designed for single-page applications and any loading of partial views or templates has to happen on the same web-page or location. Hence only the fragment part of the url changes when using angularjs routing.
More information about fragments can be found here: http://en.wikipedia.org/wiki/Fragment_identifier