Angular Keep session alive Timeout management

Angular Keep session alive Timeout management

Today, We want to share with you Angular Keep session alive Timeout management.
In this post we will show you keep session alive timeout in angularjs example, hear for Handling session timeout in Angular we will give you demo and example for implement.
In this post, we will learn about Angular session timeout and management with an example.

Welcome to the In website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.keep session alive timeout in angularjs example

READ :  VueJS 2.0 Tutorials Vue 2 introduction Examples

Generally, I want to learn and teach a good practice for this implementation(keep alive with secure) in my angularjs (application) web application.
here, I want to be able to display some greeting required login and logout button (means exit) for logged users in page,
even after the refresh(load ctrl + f5) the whole page details until they user logout or close the browser(mozila,chrome.etc..) and exit.
And to show in a page a “Sign in/Sign up” (login or registration form) button if the user login is not (login)authenticated yet.
so I need to use the same logic(logically) with some state is “private” states of my web application,

Keep session alive after a page refresh in AngularJS

E-junkie: Sell digital downloads online

E-junkie Provides a Copy-paste buy-now, and cart buttons for selling downloads, codes and tangible products on any website, blog, social media, email and messenger!

Also see:

  1. The Top 10+ Best Webinar Software Platforms For 2020-2021
  2. Build Your Future Godaddy Careers And Jobs
  3. Introduction To Web Hosting Services

for example:
if any user is not logged check and he accesses this url(route) account/options or any page route then he is forced (access data information) to log in in order to proceed and display info.

READ :  Laravel Create Database Migration and Model

keep alive timeout – angularjs ng-idle example


 'use strict';

 //define custome parm
  .module('saleswebapp', [
  [          '$rootScope', '$state', '$stateParams',
    function ($rootScope,   $state,   $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
  .config(['$stateProvider', function ($stateProvider) {

	now check authenticated or not in angularJS

      .state('iniciodata', {
        url: '/',
        templateUrl: 'views/page_main.html',
        controller: 'SimpleMainCtrl',
      .state('paneldata', {
        url: '/panelpage',
        title: 'angularjs session data get -',
        templateUrl: 'views/page_panel.html',
        controller: 'SalesPanelCtrl'
      .state('logindata', {
        url: '/loginpage',
        title: 'keep angularjs session login page -',
        templateUrl: 'views/page_login.html',
        controller: 'SimpleLoginCtrl'

File name : Auth.js

'use strict';

    .service('Auth', function($http) {
        return {
			// call function
          isLogged: function(cookieORsomethingElse){
            //check condition some magic sessionAlive true or false
            if (sessionAlive) {
				//session active
               return true;
            } else {
				//destroy Cookie here
               return false;
          login: function(credencial_data) {
		  //send request with authenticated
            return $'', credencial_data);
          logout: function() {
			//api call logout request
          registro: function() {
			//api call regeter information send request server side

<h3>file Name : Login.js</h3>


  'use strict';

  .controller('SimpleLoginCtrl', function ($scope, Auth, $rootScope, $state) {

    $scope.credencial = {sales_servidor: 'infinityknow'};

    $scope.login = function() {
        s_user_id: $scope.credencial.sales_username,
        s_password: $scope.credencial.sales_password,
        s_server: $scope.credencial.sales_servidor
      }).success(function(data, status) {
		//retrive data information
        console.log(data, status);
      }).error(function() {
		//generate error log
        console.log('error: you suck');