Local Storage Data is not getting into header file in Angularjs

Question

I am working with Mean Stack and using AngularJs and NodeJs. I used

Local Storage data and getting data in main content it is working fine but this

data is not getting into the header I am using the main file index.ejs which is including the header.

<div data-ng-include="'js/view/header.html'"  class="page-header navbar navbar-fixed-top">
    </div>
    <!-- END HEADER -->

    <div class="clearfix">
    </div>

    <!-- BEGIN CONTAINER -->
    <div class="container">
        <div class="page-container">
            <!-- BEGIN SIDEBAR -->
            <div ng-include="'js/view/sidebar.html'" class="page-sidebar-wrapper">          
            </div>
            <!-- END SIDEBAR -->
            <div class="page-content-wrapper">
                <div class="page-content">

                    <div ng-view></div>

                    <div ui-view class="fade-in-up">
                    </div> 
                    <!-- END ACTUAL CONTENT -->
                </div>
            </div>
        </div>
        <!-- BEGIN FOOTER -->
        <div data-ng-include="'js/view/footer.html'" class="page-footer">
        </div>
        <!-- END FOOTER -->
    </div>

Here is the function Which is using localStorage

  app.controller("usercontroller",function($scope,$http, $localStorage,$location,flash){

            $scope.registeruser = $localStorage.userData;
            $scope.adminData = $localStorage.adminData;
             $scope.alluser =  $localStorage.alluser
            $scope.flash = flash;
            $scope.message = "New  user added successfully";



/****************************************************Admin Login**********************************/



$scope.loginpage = function(){

           // console.log("hello world");
        $http({
          method: 'POST',
          url: '/api/login',
          data: {email:$scope.email, password:$scope.password}
        }).then(function successCallback(response) {
            if(response.data.error)
            {
                alert("Invalid email pasword");
            }
            else 
            {

                $scope.dp = response.data;
                $localStorage.adminData = $scope.dp;
                console.log($localStorage.adminData);
                $location.path('/dashboard');

            }
        }, function errorCallback(response) {
          alert("Invalid email pasword");
        });
    }

});  

here is my route file app.js

var express = require('express');
var path = require('path');
var multer = require('multer');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var api = require('./routes/api');
var users = require('./routes/users');

/* Database connectivity here */
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/ditroapp');
var db = mongoose.connection;

db.on('error', function (err) {
  console.log('mongo connection error', err);
});

db.once('open', function () {
  console.log('mongo connected.');
});

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/api', api);
app.use('/users', users);
//app.use('/login', login);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});


// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

when I am getting {{adminData.name}} into header.html it is not showing.

But If I am using same into main content file which is using

<div ng-view></div> that is showing the name of admin.

Why it is not working in header file.

Answer 1

Try with this in app.js

app.run(function($rootScope,$localStorage) {

      $rootScope.admindata= $localStorage.adminData;
});