javascript - Angularjs maintain user state and partial templates -

i new angularjs , setting basic web app user can login search , update news articles posted different website.

i have got 2 questions:

1. user's login state: not sure how can maintain login state of user can shared controllers , state should restored when page refreshed.

2. partial templates , shared stuff: have setup partial templates login.html, search.html, update.html etc , in app.js have defined routes 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 not sure how set controllers handle top navigation, header, footer , other shared stuff between partial templates.

any highly appreciated.

thanks

1. user state: create service

you can create factory save user state, inject 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 (as have eluded in question), if refresh page, username, email, etc. not populated despite user having logged in session. have 2 options around this:

1. instead of directly accessing user object, define getter check whether user populated, , if not make request server current session (you have implement route on server this)

2. use server side rendering inject code <script> tag populate user on window or similar. service data when instantiate it.

2. partials & shared ui

your page can split multiple parts, routeprovider configuration defines controller owns part of page ng-view attribute. suggest navigation should not inside of element, independent of route (it's present). can use inline ng-controller attribute in html define controller looks after navigation.

for things reuse multiple times, should directives, re-usable bits of code (template , logic) can have own controllers defined.