Develop Reference

AngularJS - Conditionally set a controller for the route

I'm using the native AngularJS router and was wondering if there is a way to assign a controller to a route conditionally. For example, let's say I have three user types:
Guest
User
System Admin
When they come to the home page, I want to be able assign a different controller based on the user type. So I would have three registered controllers: guestHomeCtrl, userHomeCtrl, systemAdminHomeCtrl.
I imagined something like this:
$routeProvider
.when( '/' , {
controller: getHomeCtrl(),
controllerAs: 'homeCtrl'
})
I know I can just pass in the string of the registered controller, but the main issue is being able to find out what type of user is logged in. I have a userService that typically keeps track of that, but it doesn't seem like I can access it from where I set up the routes. Or am I mistaken?
Any direction would help out a lot.

I would suggest using userService with a single controller. Read through the page below, specifically the resolve argument.
https://docs.angularjs.org/api/ngRoute/provider/$routeProvider
This blog post also describes how to use the resolve.
http://odetocode.com/blogs/scott/archive/2014/05/20/using-resolve-in-angularjs-routes.aspx
Try sending the specific function or variable you need to the controller. I used userService.User.userAccountStatus, but it really depends on the setup in your service file.
$routeProvider
.when( '/' , {
controller: HomeCtrl,
controllerAs: 'HomeCtrl',
resolve: {
userService: function(userService) {
return userService.User.userAccountStatus();
}
}
})
I use ngInject for injecting dependencies, but I assume you get the gist of giving services to a controller.
angular
.module('app')
.controller('HomeCtrl', HomeCtrl)
/** #ngInject */
function HomeCtrl($scope, $log, $state, userService) {
}
I can provide further examples if you need them.

How to use Multiple Controllers for one view angularjs?

I would like to know if it is possible to use multiple controllers for a single url view using angluarjs, I have not been able to find much documentation on this.
What i tried:
$routeProvider
.when('/a',
{
//HOW COULD I ADD TWO CONTROLLERS TO SAME PAGE??? THIS DOES NOT WORK
controller: 'aCtrl' , 'a1Ctrl'
templateUrl: 'a.html'
})
.when('/b',
{
controller: 'bCtrl' , 'b1Ctrl'
templateUrl: 'b.html'
})

Routing mapping with ? in url

I have an issue mapping to an route with custom parameters
How do I render url is
$location.url('#/site/errors/0/50').search({
'searchString':searchString
});
which generates url as:
/#/site/errors/0/50?searchString=test
My route mapping
$routeProvider
.when('/:applicationName/errors/:pageNumber/:itemsPerPage/:searchMessage', { templateUrl: '/templates/ErrorList.html', controller: 'ErrorListController' })
.when('/:applicationName/errors/:pageNumber/:itemsPerPage/?searchString=:searchMessage', { templateUrl: '/templates/ErrorList.html', controller: 'ErrorListController' })
I have an issue with binding the into the url.
binding doesnt work:
/#/site/errors/0/50?searchString=test
binding does work
/#/site/errors/0/50searchString=test
Solution thnx to:Chandermani
I have updated the mapping to:
.when('/:applicationName/errors/:pageNumber/:itemsPerPage/', {
templateUrl: '/templates/ErrorList.html', controller:
'ErrorListController' })
And I can still access the parameter 'searchString' from $routeParams

I don't think routeParams and route binding works with querysting or search parameters. For getting the search parameters using $location.search()

AngularJS: dynamic compile diretive

Here's the [plunker]:http://plnkr.co/edit/iPsyEAIQWxJIJuneZb8B?p=preview
What I want is when I click login, the auth directive should change template to 'logout.html' automatically , and then when logout clicked, switch to use 'login.html'.
But so far, I should refresh page manully to make directive to switch template.
How can I achieve this purpose?

Using routes.
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'login.html',
controller: 'loginCtrl'
})
.when('/logout', {
templateUrl: 'logout.html',
controller: 'logoutCtrl'
})
}]);
Then you do $location.path('/logout') or $location.path('/login')
Here is the tutorial:
http://docs.angularjs.org/tutorial/step_07

I've fixed a couple of bugs in your plunker. Check it out here
Your major error was the $watch expression. It should be scope.$watch('authed', function () {}); not scope.$watch(scope.authed, function () {});.
I've also played a bit with it and came up with this version. The idea is to separate logon/logout logic with cookie manipulation and get rid of explicit DOM manipulation, $compile() etc.

How do I get the angularJS routeProvider to perform an action before the route change?

Let's say I have this config:
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/partials/index.html',
controller: 'defaultCtrl'
})
.when('/other', {
templateUrl: 'app/partials/other.html',
controller: 'errorCtrl'
})
.otherwise({
templateUrl: 'app/partials/404.html'
});
}
]);
I'm looking for a place to do some basic, common maintenance code before the router calls the route. Say I'd like to clear the console log via console.clear() every time the route is changed. How and where would be the best place in the code to do that?

The $route service raise events like $routeChangeStart which you can use to perform such tasks. You can implement them using the $scope.$on method. Someting like
$scope.$on('$routeChangeStart',function(angularEvent,next,current) {
//do you work here
});
Read the $route documentation to get idea on this and other such events.
Also $routeProvider configuration method when also can take a parameter resolve which actually is used to setup dependencies before the route is resolved. This resolve object map can also be used to achieve what you want to do.