Angular $routeProvider and Controller As Syntax

Question

Can anyone tell me if it is valid to use $routeProvider with Controller as syntax? I am having issues accessing <h1>{{kickController.foo}}</h1> from the controller where this.foo resides.

angular.module('ucp.kick', ['ngRoute']).config(function($routeProvider, APP_BASE_URL) {
  return $routeProvider.when(APP_BASE_URL + 'kicks', {
    reloadOnSearch: false,
    navitem: true,
    name: 'Kicks',
    templateUrl: 'kick/partials/kick.html',
    controller: 'kick as KickController'
  });
});

Answer 1

You could not add controllerAs syntax in controller option of $routeProvider.when.

You should use controllerAs option which has been provided for taking alias of controller in string format, & controller also accept the string which would be considered as controller of angular.

Code

$routeProvider.when(APP_BASE_URL + 'kicks', {
    reloadOnSearch: false,
    navitem: true,
    name: 'Kicks',
    templateUrl: 'kick/partials/kick.html',
    controller: 'KickController'
    controllerAs: 'kick' //controller alias taken out from controller option
});

OR

controller: 'KickController as kick'

Doc Link