Page redirection not working with AngularJS - javascript

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.

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

Angular JS removing hash results in 404

I have removed hash from my angular JS website using below code.
$locationProvider.html5Mode(true);
so my current url http://dev.dummpurl.loc/#/courses is replaced with http://dev.dummpurl.loc/courses.
my problem is browser gives me 404 if I ctrl+f5 http://dev.dummpurl.loc/courses.
is there any possible solution by which I can remove # from URL and at the same time runs if refreshed.
Use this code in the head
<base href="/">
And always return the index html file on request , if you are on to SPA(single page application)

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

Backbone - copy paste url

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.

AngularJS HTML sub routes not showing when url typed in

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

Categories