routeProvider not working correctly - angularjs

Im using angularJS to set where i want the page to go after i login, but if i only have this
function routeProviderFunction($routeProvider){
$routeProvider.when('/default',{
templateUrl: 'HTML/login.html',
controller: funct2
});
$routeProvider.otherwise({
redirectTo: '/default'
});
}
My route provider works in the above code, but after i turn it into this
function routeProviderFunction($routeProvider){
$routeProvider.when('/default',{
templateUrl: 'HTML/login.html',
controller: funct2
});
$routeProvider.when('/adminMenu/:username', {
templateUrl: 'HTML/adminMenu.html',
controller: adminMenu
});
$routeProvider.otherwise({
redirectTo: '/default'
});
}
My route provider ceases to work at all. Any ideas

try to do like this:
$routeProvider
.when('/default', {
templateUrl: 'HTML/login.html',
controller : 'funct2'
}).when('/adminMenu/:username', {
templateUrl: 'HTML/adminMenu.html',
controller : 'adminMenu'
}).otherwise({
redirectTo : '/default'
});

Does the controller adminMenu exist in the global namespace? Press F12 and check the error console. Angular has quite decent error messages. Also worth noting that 'when' is chainable so you should be doing something like this route.when().when().otherwise();

After looking #fabuloso answer, it clicked to me what I needed to fix my problem.
I had
pageApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'content/home.html',
controller : 'homeController'
})
// route for the directions page
.when('/directions', {
templateUrl : 'content/directions.html',
controller : 'directionsController'
})
// route for the giftCards page
.when('/giftCards', {
templateUrl : 'content/giftCards.html',
controller : 'giftCardsController'
});
// route for the giftCards page
.when('/contactUs', {
templateUrl : 'content/contactUs.html',
controller : 'contactUsController'
});
});
when adding the last "contactUs" part, I noticed I had a semicolon after the giftCards route, which blows up everything.

Related

$routeProvider does not route

I am trying to redirect the url using the $routeprovider
$routeProvider.when('/', {
templateUrl : 'scripts/login/login.tpl.html',
controller : 'LoginCtrl'
});
$routeProvider. when('/sample', {
templateUrl: 'sample.html'
});
$routeProvider.otherwise({
redirectTo : '404.html'
});
Below is the url which loads the application
http://localhost:8080/orion-web/app/
when I try to append the word 'sample' to the url
ie
http://localhost:8080/orion-web/app/sample
I get 404 error , This is not the 404.html from the $routeprovider. It's tomcats 404 resource not found page
Do you have a base url set for your page?
It should be <base href="/orion-web/app/"> within the header section of your index.html
In the second $routeprovider.when try removing /
$routeProvider. when('sample', {
templateUrl: 'sample.html'
});
$routeProvider
.when('/', {
templateUrl : 'scripts/login/login.tpl.html',
controller : 'LoginCtrl'
})
. when('/sample', {
templateUrl: 'sample.html'
})
.otherwise({
templateUrl: '404.html'
});
Use this code

AngularJS otherwise route not working?

My AngularJS redirects look like this:
// create the module and name it asApp
var asApp = angular.module('asApp', ['ngRoute']);
// configure our routes
asApp.config(['$routeProvider', '$httpProvider', '$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
title: 'Home of PeppyBurro – Radical Spanish learning tips and tricks for the adventurous learner',
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
title: 'About PeppyBurro – Radical Spanish learning tips and tricks for the adventurous learner',
templateUrl : 'pages/about.html',
controller : 'mainController'
})
// route for the 404 page not found error
.when('/notfound', {
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
.otherwise('/notfound', {
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
}]);
What I need is for the script to route me to 404.html when an undefined slug is entered in the URL. So if the user enters mysite.com/#/about, it should show him the about.html page. This bit works fine. But when the user enters, say, mysite.com/#/abc, it should show him the 404.html page as I have defined in my .otherwise and .when('/notfound') directives. But although the .when('/notfound') bit is working, the .otherwise bit isn't. Is there something I'm missing?
I think you should modify same as:
.otherwise({
redirectTo: '/notfound'
}
Reference here
.when and .otherwise are two different things.
.when defines a route
.otherwise sets the default route when a route hasn't been created.
$routeProvider.otherwise source code
You have two options.
Take out the route path
$routeProvider
// ... other routes
.otherwise({
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
or define the 404 route using .when and pass the route path into .otherwise.
$routeProvider
// ... other routes
.when('/notfound', {
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
.otherwise('/notfound');
Hope this helps!
Let me know if you have any questions.
EDIT
// As of Angular 1.3
.otherwise('/notfound')
// is short hand for
.otherwise({redirectUrl: '/notfound'})
You can use redirectTo:
.otherwise({
redirectTo: '/notfound'
});

Angularjs Matchmedia on page routing

How can I perform a matchmedia for page routing below. That is I would like load a different templateURL for home if it is a tablet?
app.config(['$routeProvider',function($routeProvider) {
//configure the routes
$routeProvider
.when('/',{
// route for the home page
templateUrl:'partials/login/login.html',
controller:'loginCtrl'
})
.when('/home',{
// route for the home page
templateUrl:'partials/home/home.html',
controller:'mainCtrl'
})
.otherwise({
//when all else fails
templateUrl:'partials/login/login.html',
controller:'loginCtrl'
});
}]);
You could simply achieve this by adding function while generation templateUrl,
before returning templateUrl to check navigator string and browser.
Code
$routeProvider
.when('/', {
// route for the home page
templateUrl: function() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
return 'partials/mobile/login/login.html'; //mobile template
} else {
return 'partials/login/login.html';
}
},
controller: 'loginCtrl'
})

AngularJS Routes: is there a way to skip loading a controller (load template only)?

My /home template doesn't have an associated controller (it's blank). Anyway to skip loading the controller and just load the view? I'm using AngularAMD to lazy load so it's an additional call just to get a blank controller file.
app.config(function ($routeProvider) {
$routeProvider
.when('/home', {
templateUrl 'home/home.html',
controller: 'HomeController' //is empty because page is just static text
})
.when('/login', {
templateUrl: 'login/login.html',
controller: 'LoginController'
})
.otherwise({
redirectTo: '/home'
});
});
Nvm, found that you can leave controller: '' blank and it works. It was just throwing an error in my case because I forgot to remove the ng-controller="HomeController" tag from the template/view. Once I removed that, the error was no longer being thrown (in console).

$routeProvider - where is the var passed to .when stored

I am an amateur with angular. I am using route provider to load separate html pages and controllers. This works fine when I know what pages the site has and I can define them.
app.config(function($routeProvider) {
$routeProvider
.when("/page1", {
templateUrl: "../page1.html",
controller: "Page1Ctrl"
})
.when("/page2", {
templateUrl: "../page2.html",
controller: "Page2Ctrl"
})
.when("/page3", {
templateUrl: "../page3.html",
controller: "Page3Ctrl"
})
.otherwise({
redirectTo: "/page1"
});
});
However, in future, more pages may be added and I want to code a way for angular to take this into accout. Something like;
app.config(function($routeProvider) {
(..figure out n...)
$routeProvider
.when("/page"+n, {
templateUrl: "../page"+n+".html",
controller: "Page"+n+"Ctrl"
})
.otherwise({
redirectTo: "/page1"
});
});
I cannot figure out how to return a var listing the current page so I can remove '/page' to manipulate the int as n.
I tried console logging $routeProvider but .when simply returns a function. I don't think injecting $scope is wise because obviously a var is passed somewhere using $routeProvider alone.
If you use colon (:) in the route, Angular will parse that and populate the $routeParams with it, then, in your templateUrl, instead of a string, you can use a function which returns the template url. Just inject the $routeParams in the templateUrl's function and build the url you need.
$routeProvider
.when( '/page/:pageNumber', {
templateUrl: function ($routeParams) {
return 'page_' + $routeParams.pageNumber + '.html'
}
})
.otherwise( { redirectTo: '/page/1' } );
Here is a working fiddle.

Resources