AngularJS RouteProvider not working correctly - javascript

$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'
})

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'
});
});

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?

Angular.JS: cannot set default route when no hash

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'
});

AngularJS Routing Case Sensitivity

I haven't been able to find a straightforward answer to this, which leads me to believe that it's something really really simple. Either way, here I go.
All of the calls in my $routeProvider work great, but are case sensitive. Here's a code sample:
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: 'TmpCtrl', templateUrl: '/app/home.html' }).
when('/foo', { controller: 'TmpCtrl', templateUrl: '/app/foo.html' }).
otherwise({ redirectTo: '/' });
});
What do I need to add so that '/Foo', '/fOO', '/FoO', etc, all redirect to the same path?
There is an option you can pass to $routeProvider to toggle case sensitivity:
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: 'TmpCtrl', templateUrl: '/app/home.html' }).
when('/foo', { controller: 'TmpCtrl', templateUrl: '/app/foo.html', caseInsensitiveMatch: true }).
otherwise({ redirectTo: '/' });
});

Categories