angular component resolved values showing undefined

Question

I'm using Angular JS (version 1.5.9) and the Angular UI Router (version 1.0.0-rc.1). When I'm trying to access binding values in component controller, it is showing undefined . Below I shared my code.

What wrong with my code? Could you please guide me how to resolve this issue?

router.config

     $stateProvider.state('app.user-datshboard', {
        url: '/dashboard/:user',
        views: {
            'header@':{
                templateUrl : getView('user-navbar')
            },
            'main@': {
                templateUrl: getView('user-dashboard')
            },
            'footer':{}
        },
        params: {
            user : null
        },
        resolve: {
            OurUser : function(){
                return 'nihao';
            }
        }

        }
    })

component

 class UserDashboardController{
   constructor(API,$log,$state,$stateParams,$scope){
    'ngInject';
    //
    $log.log(this);
    this.API = API;
    this.$scope = $scope;
    this.$log = $log;
    this.$timeout = $timeout;
    this.$state = $state;
    this.$stateParams = $stateParams;
    this.$log.log(this.OurUser);
  }
 }

 export const UserDashboardComponent = {
templateUrl: './views/app/components/user-dashboard/user-    dashboard.component.html',
controller: UserDashboardController,
controllerAs: 'vm',
bindings: { OurUser : '=' }
 }

Error Screen

 [error screen][1]

Thank you

Answer 1

You need to inject your OurUser in any controller or service, for example:

constructor(API, $log, $state, $stateParams, $scope, OurUser){
  // here you have access to OurUser
}

this way you do not need bindings: { OurUser : '=' }