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
Related
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.
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
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.
I am building an AngularJS application, it works well with hash URL.
If I click on an anchor <a href="#/3125/"> then the URL is updated to http://localhost:8000/app/index.html#/3125/ which is desired.
Now I plan to change the URL to HTML5 mode, so I configured the application with below code
var demoApp = angular.module('demoApp', ['demoResources']);
demoApp.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Unfortunately, this time if I click on the same anchor, I got URL escaped as http://localhost:8000/app/index.html#%2F3125%2F thus the link is broken. However, the expected URL is http://localhost:8000/app/index.html/3125.
Does anyone know why this is not working? I am using Angular 1.2.1
You should add a <base> tag in the <head> section of your application :
<base href="/app"/>
See the "Relative Links" section in the $location documentation.
See also AngularJS subdirectory routing not working, with <base> tag applied
I have AngularJS setup to use HTML5 routes and it works great on urls like website.com/foo but when I create routes for sub pages, eg: website.com/foo/bar it only shows the correct page when clicking a link to it on my site. If I type the url into my browser and attempt to directly access it I get a blank page section where the ng-view content should be loading.
app.when('/promotion/events', {
templateUrl: '/assets/tpl/promotion/events/home.html',
controller: PromotionEventsCtrl
});
It appears to be a bug in Angular 1.1.5 that is effecting URL parsing in HTML5 routes. Rolling back to 1.1.4 fixes the problem.
More information here: https://github.com/angular/angular.js/issues/2833