Angularjs maintain user state and partial templates

Question

I am new to angularjs and setting up a basic web app where a user can login to search and update news articles which are posted from a different website.

I have got two questions:

1. User's login State: I am not sure how I can maintain a login state of the user which can be shared by all the controllers and this state should also be restored when the page is fully refreshed.

2. Partial templates and shared stuff: I have setup partial templates like Login.html, Search.html, Update.html etc and in my app.js I have defined routes as below:

'use strict';

var namApp = angular.module('namApp', ['ngResource', 'ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider.when('/login',
            {
                templateUrl: '/App/templates/Login.html',
                controller: 'loginController'
            });
        $routeProvider.when('/search',
            {
                templateUrl: '/App/templates/Search.html',
                controller: 'searchController'
            });
        $routeProvider.when('/update',
            {
                templateUrl: '/App/templates/Update.html',
                controller: 'updateController'
            });
        $routeProvider.otherwise({ redirectTo: '/login' });
    });

Now I am not sure how do I set up controllers to handle my top navigation, header, footer and all the other shared stuff between all my partial templates.

Any help will be highly appreciated.

Thanks

Answer 1

1. User state: Create a service

You can create a factory to save user state, which you could then inject into other controllers.

For exmaple:

app.factory('user', function($http){

  user = {
    loggedIn: false
    username: ''
    email: ''

    login: function (username, password){

      $http.post('/login', {username: username, password: password})

      .then( function(response) {
        user.loggedIn = true;
        user.username = response.data.username;
        user.email = response.data.email;
      });
      // TODO: ERROR HANDLING ETC.

    logout: function() { ... }

  }

  return user;

}

The problem with this (as you have eluded to in your question), is that if you refresh the page, username, email, etc. will not be populated despite the user having a logged in session. You have two options to get around this:

1. instead of directly accessing the user object, define a getter which will check whether the user is populated, and if not will make a request to the server to get the current session (you would obviously have to implement a route on your server to do this)

2. Use server side rendering to inject some code into a <script> tag that would then populate a user on window or similar. Your service could then look for this data when you instantiate it.

2. Partials & shared UI

Your page can be split into multiple parts, routeProvider configuration only defines which controller owns the part of the page with the ng-view attribute. I would suggest that your navigation should not be inside of this element, as this is independent of the route (it's always present). You can use an inline ng-controller attribute in your html to define which controller looks after the navigation.

For things that you reuse multiple times, then you should look into directives, which are basically re-usable bits of code (template and logic) that can have their own controllers defined.