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
Post a Comment