We Keep Coding

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

Angular $routeProvider to handle different URLs differently

In angular, is there a method to load different views & controllers when the routes are basically the same, but the actual string in the route is different?
In terms of routing, if the top level route parameter is being already used, is there way to load different View & Controller based on the different route parameter?
Below is what I was trying:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "app/components/0_home/homeView.html",
controller: "HomeController"
}) // Home
.when("/about", {
templateUrl: "app/components/1_about/aboutView.html",
controller: "AboutController"
}) // About
/*(...Bunch of other .whens)*/
//Project
.when("/project/:projectId", {
templateUrl: "app/components_project/0_home/homeView.html",
controller: "ProjectHomeController"
})
.when("/project/:projectId/HOME", {
templateUrl: "app/components_project/0_home/homeView.html",
controller: "ProjectHomeController"
})
.when("/project/:projectId/FLOORPLAN", {
templateUrl: "app/components_project/1_floorplans/floorplanView.html",
controller: "FloorplanController"
}) // Floorplan
.when("/404", {
templateUrl: "app/components/404.html"
}) // else 404
.otherwise({
redirectTo: '/404'
});
}
]);
I wanted to load
app/components_project/0_home/homeView.html
when routeProvider is
/project/:projectId/HOME
and load
app/components_project/1_floorplans/floorplanView.html
when routeProvider is
/project/:projectId/FLOORPLAN
Or is there any better way to handle this kind of situation?

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 'route' doesn't match component with %2F (encoded '/')

I have a 'route' in Angular JS as follows
$routeProvider.when('/foos/:fooId', { controller: FooController, templateUrl: 'foo.html'});
and it works great, unless the :fooId component contains either a '/' or '%2F' (encoded form)
How can I make this work, my 'fooId' can contain /s ?

You can't easily do this because if you use a link with %2F in it, the browser will just decode it for you and it'll end up being /. AngularJS currently doesn't allow you to use / in $route params.
You can double encode it, like in this plnkr: http://plnkr.co/edit/e04UMNQWkLRtoVOfD9b9?p=preview
var app = angular.module('app', []);
app.controller('HomeCtrl', function ($scope, $route) {
});
app.controller('DirCtrl', function ($scope, $route) {
var p = $route.current.params;
$scope.path = decodeURIComponent(p.p1);
});
app.config(function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'})
.when('/dir/:p1', {templateUrl: 'dir.html', controller: 'DirCtrl'})
.otherwise({redirectTo: '/'});
});
And the link would be: click here.
Another option, if you have a set number of / characters in your parameters can be found here: How can I make the angular.js route the long path

Based on the answer of Langdon, I created a filter which encodes everything twice, and another one which decodes:
.filter('escape', function() {
return function(input) {
return encodeURIComponent(encodeURIComponent(input));
};
})
.filter('unescape', function() {
return function(input) {
return decodeURIComponent(input);
};
});
I use this in my product links as follows:
<a href="#/p/{{product.id}}/{{product.name | escape}}">
On the product page, I decode the product name:
<h1>{{product.name | unescape}}</h1>

You need not to encode anything here. Just add * in your path Param as mentioned below and enable html5Mode
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {templateUrl: 'home.html', controller: 'HomeCtrl'})
.when('/base/:path*', {templateUrl: 'path.html', controller: 'pathCtrl'})
.otherwise({redirectTo: '/home'});
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});

include
$locationProvider.hashPrefix('');
in your config.