Passing global data / user data to routeProvider in Angular + express application

Question

This might seem like a silly question.. but how do I pass req.user.username (for example) to all pages / globally after the user signs in with passport. This question can apply to any data I would like accessible for all pages...

On the server side, I have the below which sends allows routeProvider to handle all client side routing.

app.get('*', 
        function(req, res) {
            res.sendfile('./public/index.html')
            // load the single view file (angular will handle the page changes on the front-end)
    })

I'm not sure if the solution is specific to passport... express or involves both...

The client side routing is handled by something like:

.config(function($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {templateUrl: 'views/home.html'})
            .when('/login', {templateUrl: 'views/login.html'})
            .when('/users', {templateUrl: 'views/users.html', controller: 'UserController'})
            ...

Answer 1

You have two options. Either

1. BAD - include that data in your compiled view that is initially served (./public/index.html) or

2. GOOD/COMMON - fetch the data you need inside something like an Angular controller which is in your view; eg.

---

$routeProvider.when('/', {
    templateUrl: 'views/home.html',
    controller: function($scope, myThings) {
        //myThings is a service that async fetches some data from api

        myThings().then(function(user) {
            $scope.user = user;
        });
    }
});

This obviously means you are exposing data on an api endpoint, but how else would angular be fetching the bits it needs since you said this is a single-page app?

Answer 2

Services are the way to go if you want to share global data among controllers, directives and other services.

Depending upon the type of data, you can expose services that load data from the server or services which do not need to make remote call to load data (like some custom view settings).

For example if in case you want to get the current logged in user.

• The first thing is to create a method on the server that return the current logged in user data in json format.
• Then create something like a UserService or SessionService that call this server method to load currently loggedin user data.

Something like

angular.module('myApp').factory('SessionService',['$http',function($http) {
    var service={};
    service.getCurrentUser=function() {
        return $http('/user');
    };
    return service;
}]);

Inject this service into your controllers to get the current user. You can optimize it to cache the user data.

If you want to use the data in routeProvider use the resolve property

.when('/users', {templateUrl: 'views/users.html', controller: 'UserController', 
   resolve: { 
       currentUser:function(SessionService) {
          return SessionService.getCurrentUser();
       }
   }}})