Angular.JS: cannot set default route when no hash - javascript

The problem is:
I cannot reach home page when url is www.some.com but can when it's www.some.com/#! or www.some.com/#!/
I was define default web app route:
$routeProvider.when('', {templateUrl: pathToIncs + 'home.html', controller: 'homeController'});
$routeProvider.when('/', {templateUrl: pathToIncs + 'home.html', controller: 'homeController'});
Added otherwise option:
$routeProvider.otherwise({redirectTo: '/404'});
And turn of html5 mode
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix('!');
As i said befor - it works when I'm came by ulr like www.some.com/#! but not when www.some.com. In this case .otherwise option will be called.
In any other case routing works well. In the my app I got an urls like a www.some.com/#!/login, www.some.com/#!/signup
P.S. Server side works on php5+nginx
P.P.S. I'm use Angular 1.2.0 with ngRoute module

Try setting the < base > tag.
<head>
<base href="/">
</head>
Have a route defined for home
.when('/home', {
templateUrl: pathToIncs + 'home.html',
controller: 'homeController'
})
using redirectTo on the "/"
.when('/', {
redirectTo: '/home'
})
along with the .otherwise
.otherwise({
redirectTo: '/home'
});

Related

angular 404 does not work with otherwise templateUrl nor redirectTo

trying to add a simple 404.html template but for some reason it does not get rendered. in my app.routes.js I tried the following
$routeProvider.when('/', {
templateUrl: '/templates/index.html',
controller: 'IndexCtrl'
}).otherwise({
templateUrl: '/templates/404.html'
})
I also tried to use redirectTo as below but it does not work
.otherwise({
redirectTo: '/templates/404.html'
})
when I try to type something like http://localhost:5000/aaaaaaaaaaaaa in console I see 404 response but template is not rendered. do I need to adjust controller ?
You can create an specific route for 404 with an specific view /templates/404.html.
Than, in the otherwise() method call, you can redirect to that route /404:
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/index.html',
controller: 'IndexCtrl'
})
.when('/404', {
templateUrl: 'templates/404.html'
})
.otherwise({
redirectTo: '/404'
});
});

Angularjs route doesn't works without # in URL

I have a problem with my angularjs routes. My simplified route config looks like:
App.config([ '$routeProvider', function( $routeProvider ) {
$routeProvider.
when('/', {
redirectTo: '/home'
}).
when('/home', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
}).
when('/404', {
templateUrl: '404.html'
}).
when('/500', {
templateUrl: '500.html'
}).
when('/:tabName', {
templateUrl: 'tabView.html',
controller: 'TabContentCtrl'
}).
when('/:tabName/:widgetName', {
templateUrl: 'tabView.html',
controller: 'TabContentCtrl'
}).
otherwise({
redirectTo: '/404'
});
}]);
The problem is when I put URLs http://myapp or http://myapp/ into browser, it redirects me nowhere, nothing takes place, even redirect to 404 error page. It starts working when I put hash to URL http://myapp/#, then it works as I expected. But why my default route for root URL of application http://myapp, and http://myapp/ did not work?
You just need to enable html5mode:
config javascript
App.config([ '$routeProvider', function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
}]);
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
</html>
It depends on how have you set your virtual host and is it pointing to your root index.html? If yes, then if you type http://myapp it would definitely take you to http://myapp/#/home

Routing in Angular JS with Multiple Slashes (1.2.x)

I have injected ngRoute into my angular app, and routing works when paths are only one level deep, ie. only have a single slash.
in app.js:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'login.html',
controller: 'LoginCtrl'
})
.when('/guestlist', {
templateUrl: 'guestlist.html',
controller: 'guestListCtrl'
})
.when('/event/apply', {
templateUrl: 'apply-to-event.html',
controller: 'EventCtrl'
})
.when('/event/confirmation', {
templateUrl: 'apply-to-event-confirmation.html',
controller: 'EventCtrl'
})
.when('/event', {
templateUrl: 'event.html',
controller: 'EventCtrl'
})
.otherwise({ redirectTo: '/' });
}]);
The routes that do not work are /event/apply and /event/confirmation, they just go straight to /. However, /event and /guestlist, for example, do work.
Any ideas would be much appreciated,
You are having a problem similar to one i had a few years ago.
Try adding this to your meta :
<base href="/">
source

Route AngularJS app without changing URI

I am trying to create an Angular API which should be able to be integrated on any webpage. I have a frontApp using AngularJS and a backend which uses Laravel 4.
The problem is that my routing look like this at the moment :
angular.module('FrontApp').config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl: 'views/home.html',
controller: 'HomeCtrl'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.when('/register', {
templateUrl: 'views/register.html',
controller: 'RegisterCtrl'
})
.when('/members', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/apinotfound', {
templateUrl: 'views/api.html'
})
.otherwise({
redirectTo: '/login'
});
}]);
But since my App will be integrated on a webpage whose URI can not changed, I can not use this routing system. I was wondering if a trick would be possible, to keep those routes in a variable maybe, and then route my App without changing the URI of the page?

AngularJS RouteProvider not working correctly

$routeProvider.when('/home', {
templateUrl: 'index.php/projects/projects/contact',
controller: 'home'
});
$routeProvider.otherwise({ redirectTo: '/home' });
I cannot seem to get the templateUrl to pull in the correct URL. It seems to only redirect back to /home. Does anyone know what I'm doing wrong?
Please show your working directory structure. I think templateUrl should not include index.php. Try,
$routeProvider.when('/home', {
templateUrl: 'projects/projects/contact.html',
controller: 'home'
});
$routeProvider.otherwise({ redirectTo: '/home' });
Yor Calling path, index.php/projects/projects/contact, may be wrong.
Just use projects/projects/contact/index.php.
The code can also be simplified as follows, instead of calling $routeProvider twice.
$routeProvider.
when('/home', {
templateUrl: 'projects/projects/contact/index.php',
controller: 'home'
}).
otherwise({
redirectTo: '/home'
})

Categories