keep data in controller while routing in angular - angularjs

Question

I have following problem:
In AngularJS app I use $routeProvider to load different parts into application
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.when('/users', {templateUrl: 'partials/users.html', controller: 'UserCtrl'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
In my UserCtrl I display list of users, which I can manipulate. I read the list of users from json, which looks like this:
{"users":[{"id":1,"name":"test user 2","mail":"test#gmail.com","ringer":true,"active":true},{"id":2,"name":"test user 1","mail":"test#page.com","ringer":false,"active":true},{"id":3,"name":"admin","mail":"admin#example.com","ringer":false,"active":true}]}
In users.html I have controller, which calls service to load the data
'use strict';
/* Controllers */
angular.module('myApp.controllers', []).
controller('MyCtrl1', [function() {
}])
.controller('MyCtrl2', [function() {
}])
.controller('UserCtrl', ['$scope', 'UsersService', function($scope, UsersService) {
//alert(UsersService.fetchData().length);
UsersService.fetchData().then( function( data ){
// Do whatever you want with data, like:
$scope.users = data.users;
});
this.users = $scope.users;
this.selected = [];
this.searchTerm = '';
$scope.selected = this.selected;
}])
;
And finally the service:
'use strict';
/* Services */
// Demonstrate how to register services
// In this case it is a simple value service.
angular.module('myApp.services', []).
value('version', '0.1')
.factory('UsersService', function($http, $q) {
var data = [];
function fetchData() {
var deffered = $q.defer();
if ( _isDataPresent() ) {
deffered.resolve( _returnData() );
} else {
//var deffered = $q.defer();
$http.get('php/users.php')
.success(function (d) {
deffered.resolve(d);
data = d.users;
});
return deffered.promise;
}
}
function _isDataPresent() {
return data.length;
}
function _returnData() {
return data;
}
return { fetchData : fetchData };
});
The problem which I have is following: Every time I load users.html, the data are reloaded from json file. I want to load data only once and keep them in my controller. Now, when I make some changes to the data, switch to different view and come back, all changes are lost.
Any help would be appreciated.
Thanks,
Zbynek

Answer 1

This is a simple example of what I meant:
.factory( 'UsersService', function( $http, $q ) {
var users = [];
function fetchUsers() {
var deffered = $q.defer();
if ( _areUsersPresent() ) {
deffered.resolve( _getUsers() );
} else {
$http.get('php/users.php')
.success(function (response) {
deffered.resolve(response.users);
data = d.users;
});
return deffered.promise;
}
}
function _areUsersPresent() {
return ( users.length() ) ? true : false;
}
function _getUsers() {
return users;
}
function setUsers( newUsers ) {
users = newUsers;
}
return { fetchUsers : fetchUsers, setUsers : setUsers };
});
You can use this on your controllers as
UsersService.fetchUsers().then( function( users ){
// Do whatever you want with data, like:
$scope.users = users;
});
And, whenever you update the users on your controllers, you have to update the content of the service:
// Doing operations with $scope.service, when finish with them:
UsersService.setUsers( $scope.users );