javascript - AngularJS app loading and processing JSON data once for multiple controllers -


i'm working on angular app, i'm running same problem in post: angularjs app: load data json once , use in several controllers

i've got factory reads json file, , returns whole data object. each controller, then, uses factory (as service?) obtain data, each controller has pick apart on own. json has searched , processed relevant payload like, $scope.currentarray = data.something.allitems[i]; etc, , don't want repeat code in controllers.

seems me can either find way share data, after, say, maincontroller (the "first one") has finished working it, or can add new module "between" controllers , factory. new module -- let's call myprocessservice? -- 1 getting data object factory, , processing there... once , all. then, each controller deal myprocessservice (somehow) ready-formatted variables , arrays etc onto respective scopes (yes, angular 1).

if try give example of how i'm doing far, maybe can me necessary improvements? and, aware idea begin using angular 2 patterns today, please understand first trying grasp of how a1 works, before delving a2 :)

var app = angular.module('myapp', ['ngroute']);   app.factory('getdatafile', ['$http', function($http) {     function getstream(pid) {         return $http.get("data/" + pid + ".json")             .success(function(data) {                     console.info("found data pid " + pid);                     return data;             })             .error(function(err) {                     console.error("cant find data pid " + pid);                     return err;             });     }     return {getstream: getstream}; }]);   app.controller('maincontroller', ['$scope', 'getdatafile',      function($scope, getdatafile) {              getdatafile.getstream('10101011').success(function(data) {              // process "data" what's relevant:             var = getrelevantindexfortoday(new date());             $scope.myvar = data.somefield;              $scope.currentarray = data.something.allitems[i];              // etc... drift         }     }]);  app.controller('secondcontroller', ['$scope', 'getdatafile',      function($scope, getdatafile) {              getdatafile.getstream('10101011').success(function(data) {              // process "data" what's relevant:             var = getrelevantindexfortoday(new date());             $scope.myvar = data.somefield;              $scope.currentarray = data.something.allitems[i];              // etc... drift         }     }]); 

edit:

my ngrouter set this. fill ng-view div in index.html. -- , maybe frowned upon? -- i've also got "maincontroller" sits directly in index.html body tag, such can show data (from end) in header part of single page application.

app.config(function($routeprovider) {    $routeprovider    .when('/:id/work/:page_id', {     controller: 'assetcontroller',     templateurl: 'app/views/work.html'   })   .when('/:id/work/', {     redirectto: '/:id/work/1'   })   .when('/:id/', {     controller: 'dashcontroller',     templateurl: 'app/views/dashboard.html'   })   .otherwise({     redirectto: '/'   });  }); 

and index.html lot this:

<body ng-app="myapp">      <div class="container" ng-controller="maincontroller">          <h1>welcome, {{username}}</h1>          <div ng-view></div>      </div> </body> 

you can add helper function in factory, returns required object want share between controllers.

app.factory('getdatafile', ['$http', function($http) {     function getstream(pid) {         return $http.get("data/" + pid + ".json")             .success(function(data) {                     console.info("found data pid " + pid);                     return data;             })             .error(function(err) {                     console.error("cant find data pid " + pid);                     return err;             });     }      function getcurrent(pid) {         return getstream(pid).then(function() {                 var = getrelevantindexfortoday(new date());              return  {                 myvar: data.somefield,                 currentarray: data.something.allitems[i];             };         });     }      return {         getstream: getstream,       getcurrent: getcurrent     }; }]);  app.controller('maincontroller', ['$scope', 'getdatafile',      function($scope, getdatafile) {              getdatafile.getcurrent('10101011').success(function(data) {             $scope.myvar = data.myvar;              $scope.currentarray = data.currentarray;              // etc... drift         }     }]);  app.controller('secondcontroller', ['$scope', 'current',      function($scope, current) {              .success(function(data) {                         $scope.myvar = data.myvar;              $scope.currentarray = data.currentarray;           }     }]); 

suggestion:

also suggest use resolve allows pass data controller route.

route:

.when('/:id/work', {     controller: 'assetcontroller',     templateurl: 'app/views/work.html',      resolve: {         // injecting current variable in controller data. can inject each of controller. dont need add whole function in next route. use current         current: function(getdatafile){            return getdatafile.getcurrent('10101011');         }   }) 

controller:

app.controller('maincontroller', ['$scope', 'current',      function($scope, current) {              $scope.myvar = current.myvar;          $scope.currentarray = current.currentarray;     }]);  app.controller('secondcontroller', ['$scope', 'current',      function($scope, current) {               $scope.myvar = current.myvar;          $scope.currentarray = current.currentarray;        }]); 

now have


Comments