RudziankoŇ≠ RudziankoŇ≠ - 9 months ago 50
Javascript Question

AngularJS: Component and dependence injection

I have following module:

.controller("individualFootprintController", individualFootprintController)

controller for this module:

function individualFootprintController($http, individualFootprintService, currentUser) {
var self = this;
$http.get("/user").success(function (data) {
if ( {
currentUser = data;
self.authenticated = true;

And following component:

.component('employeeInfoComponent', {
template:'Logged in as: <span ng-bind="$ctrl.user"></span>',
controller: function (currentUser) {
if ( {
self.user =;

My html is following:

<div ng-controller="individualFootprintController as $ctrl">
<div ng-hide="$ctrl.authenticated">
With Corporate Account: <a href="/login/corporate">click here</a>
<div ng-show="$ctrl.authenticated" >

Sorry, I am new to AngularJS, and probably I misuse something. My assumption is
is global variable, I can inject it and change it wherever I want. But I get
TypeError: Cannot read property 'name' of undefined
. Could you, please, suggest better solution for my global var?

Answer Source

You have to define a value as {}(empty object) for your currentUser value variable. Currently you are doing inside component controller where you are trying to access name property from undefined variable since it throws an error TypeError: Cannot read property 'name' of undefined

.controller("individualFootprintController", individualFootprintController)
.value("currentUser", {}); //value currentUser defined as blank object