where to keep global variables and functions in angularjs? -


i have variables & functions in project need in every page. data in variables coming cookies & in functions calling services data.for keeping them in controller & using $rootscope global access didn't work when reload page.so should keep these variables & functions? in advance

this controller code-

pkcontroller.controller('domainonecontroller', [         '$scope',         '$cookies',         '$route',         '$location',         '$mdsidenav',         '$rootscope',         'domainservice',         'subdomainservice',         function($scope, $cookies, $route, $location, $mdsidenav, $rootscope,                 domainservice, subdomainservice) {         /*getting username cookies display in dashboard & if not found redirect login page*/          $rootscope.role = $cookies.get('role');         $rootscope.userinfo = $cookies.get('login');         $rootscope.id = $cookies.get('id');         $rootscope.issidenavopen = false;          if ($rootscope.userinfo == undefined                 || $rootscope.role == undefined) {             $location.path("/");         }         $rootscope.$route = $route;          /*for opening slider*/          $rootscope.openslider = function() {              $mdsidenav('left').toggle();         };          /*getting sub-domains service & showing sub-domains of first domain on page loading*/          $scope.subdomains = subdomainservice.getsubdomain(1);         $scope.subdomains.success(function(data, status, headers, config) {              $scope.subdomainnames = data.subdomains;          }).error(function(data, status, headers, config) {          });          /*switching between pages clicking on slider & updating sub-category*/          $rootscope.redirect = function(id, domain) {              $rootscope.pagetitle = domain; //changing page title while switching between domains              $scope.subdomains = subdomainservice.getsubdomain(id + 1);             $scope.subdomains.success(                     function(data, status, headers, config) {                          $rootscope.subdomainnames = data.subdomains;                      }).error(function(data, status, headers, config) {              });              switch (id) {             case 0:                  $location.path("/domain_one/dashboard");                 break;              case 1:                  $location.path("/domain_two/dashboard");                 break;              case 2:                  $location.path("/domain_three/dashboard");                 break;              case 'mykpi':                  $location.path("/mykpi/dashboard");                 break;             }              $mdsidenav('left').toggle();         };          /*getting domains*/          $rootscope.domainnames = [];         $scope.domains = domainservice.getdomain();         $scope.domains.success(function(data, status, headers, config) {              $rootscope.pagetitle = data.domains[0].domain.name; //setting page title              (var = 0; < data.domains.length; i++) {                  $rootscope.domainnames.push(data.domains[i].domain.name);             }          }).error(function(data, status, headers, config) {          });      } ]); 

this html pages using these variables , functions-

            <div layout="row" class="nav nav-stacked slidermenu">             <md-sidenav md-component-id="left" md-is-open="issidenavopen">                 <div layout="column" >                     <md-button class="panel-button firstblock" ng-click="openslider()"><i class="fa fa-bars" aria-hidden="true"></i></md-button>                     <md-button ng-repeat="domain in domainnames" ng-click="redirect($index,domain)" >{{domain}}</md-button>                     <md-button ng-click="redirect('mykpi')">my kpis</md-button>                     <md-button class="upload">upload</md-button>                 </div>             </md-sidenav>         </div>  <!-- menu slider starts -->  <div      <label>subcategory : </label>      <md-select  placeholder="all category" ng-model="subdomains">         <md-option ng-repeat="(key,value) in subdomainnames" value="{{value}}">{{value}}</md-option>     </md-select> </div> 

for functions required across controllers

you can use following:

  • service
  • factory

for storing variables required across controllers

  • you can store in localstorage or sessionstorage depending on requirements. example if need data should not lost on closing browser tab etc. should use localstorage

    eg: storing wishlist in ecommerce website without login use localstorage, when user later returns, wishlist data can seen

  • you can use services store common variables , access them inside controllers dynamically @ runtime. note: here variable data might lost on refresh unless storing @ backend , making api call on every refresh


Comments

Popular posts from this blog

java - Suppress Jboss version details from HTTP error response -

gridview - Yii2 DataPorivider $totalSum for a column -

Sass watch command compiles .scss files before full sftp upload -