Angular $ routeProvider and controller as syntax

Question

Can someone tell me if using $routeProvider with Controller as syntax really? I'm having problems accessing <h1>{{kickController.foo}}</h1> from the controller where this.foo is located.

 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 cannot add controllerAs syntax to the controller $routeProvider.when .

You must use the controllerAs option that was provided to use the controller alias in string format, and controller also accepts a string that will be considered by the angular controller.

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