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