Backbone - copy paste url - javascript

I've created a small website by using backbone.js. It's hosted in IIS 7.
The routing:
routes: {
"/": "index",
"": "index",
"detailedpage/:id": "detailedpage",
'*notFound': 'index'
}
I've a problem when I try to copy/paste an url.
If I want to access directly to
http://www.anydomain.com/detailedpage/1234
it's not working. I can see in the developper tools an internal server error for 1234, path "/detailedpage".
The strange thing is if I access first to
http://www.anydomain.com/
and after copy/paste the url
http://www.anydomain.com/detailedpage/1234
it's working.
Can you please tell me if I need to enable/disable any handler in IIS?
Thank you!

Since backbone is doing the routing, your browser has to have the right content before its loaded. If you wish to use pushState with Backbone, you have to trick your webserver into serving the same html page for all possible routes. The way we do that in IIS is have the .NET routing setup in such a way that loads the required backbone assets so it can do routing directly.
Alternatively, you can disable pushState in Backbone.history.start() and use hash based routing. (myurl/#/myroute)

These are client routes, so you begin with a #.
http://www.anydomain.com/#detailedpage/1234

Include a hashtag is not a solution. It's just tell to the browser what is the root url.
The root cause is probably the redirection to the index page which is not correctly working.
The solution I did is to put the html into a view in a MVC application. All requests are redirect to the same controller, which return this new view. So I'm sure that all request are redirect to the index page.

Related

Navigating to angularJS page from url

How come I can't navigate to a page using a regular url? For example I have a page at /about, but if I open a new tab and try to go to http://localhost:3000/about I'll get the general Cannot GET '/about' error.
But if I go to http://localhost:3000/#!/about it renders the page and changes the url to a clean url without the #!.
I have html5Mode(true) set.
I'm using version 1.6.6 of angular and angular-route

Loosing hash (#) in Angular URL using ui-router

my singlepage angularjs application can be accessed through the root address of my webserver like.
localhost:8080/
When I chose to go for example to the home-state the application is supposed change the url in the browsers addessfield to localhost:8080/#/home where the first part (localhost:8080/) points to my angular application and the second part (#/home) points to the home-states url.
But instead of doing what it's supposed to do my angular-application changes the url in the browsers addressfield to localhost:8080/home which on reload obviously creates a 404.
Can any of you tell me what I am doing wrong or at least give me a hint on where to look?
disable the html5 mode from the config. add/change the following line in the config
$locationProvider.html5Mode(false);
This will add the # to your url.
You just have to say you don't use the HTML 5 mode with the $locationProvider. In your config file:
myApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(false);
}]);
JSFiddle demo

Link from external page to ember route

I have an Ember app which is run using engines (So there are other apps as well)
In my app, I have the following route defined in addon\routes.js
this.route('my-route');
My question is, say from some other app (which does not use Ember), can I have the following link called as say href of an anchor tag
OR browser redirect & it would deep route to where I want ?
https://abc.xyz.com/xyz/123/ui/#/myapp/my-route?action=123
I ultimately hope to get the control in my-route (after the other app hits the above URL)

Page redirection not working with AngularJS

I am using angularjs routing in my web app, and I have included the $locationProvider and the base tag in HTML head which is <base href="/webapp/"> in order to remove the hash symbol in the URL, it works fine when I redirect using anchor tags e.g. Home but gives a 404 error when I redirect using javascript e.g. window.location.href = '/webapp/home';. Tried everything but so far nothing, any help will be highly appreciated. Thank you in advance.
Try : Home
When you are using angular(JavaScript) routing; JavaScript routing start after # keyword in URL, other wise browser think this is the server side routing trigger; or page will get refresh.
USE : Home
$locationProvider will remove the # after redirecting to the the view.

Throwing cannot get error after enabling html5Mode in AngularJS

I am using UI-Router for routes/states in my app and URLs were having "#" so to remove this , I used $locationProvider like -
function configState($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
Added ngRoute in module dependency and added <base href="/" > in my index.html.
Problem -
If I am using it as a normal app like in same tab and navigates to other state, it works BUT whenever I pasted the URL in another tab and hit enter its throwing Cannot GET /app_views/contacts URL is like - http://localhost:9000/app_views/contacts
Though with hash in URL it works in both way manner.
You are likely getting this error because your server is not configured correctly. In other words when you manually enter /app_views/contacts it will make a request to the server for that page. For this to work properly you need configure your server to route all traffic to your index.html page in order for Angular to properly take over and display the correct view.
Here is a related post Reloading the page gives wrong GET request with AngularJS HTML5 mode

Categories