Angular JS / data handling / overview page

Question

I´m developing an Angular-App. The user has to enter data on different pages whereas it´s possible to switch between the pages. Furthermore there is an "overview page" where the user can see the entered data.

So now im thinking about how to show the entered data on the overview page. Should i just use $rootScope to get the data or is it better to store it in JSON-objects or - but this is not suggested by Angular - store data in a service?

So where to get the entered data from the different pages?

Thanks!

I'm not an Angular developer but am pretty experienced with a different Javascript/UI framework and to me it sounds like a tabbed/wizard interface would be preferable for you to keep everything on one page but in different "cards", only one of which is visible at any given time, but otherwise everything's contained all within the same page. Hope it might help. — Dexygen, Jul 01 '13 at 20:09
@Christian: Nothing to show so far. I´m in the brainstorming phase. So i have html pages, controllers and some services... Geoge: Understand what you mean, but i have different pages, with different controllers etc. Thanks! — DehMotth, Jul 01 '13 at 20:18
You need to communicate between controllers - [Reference](http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs) — callmekatootie, Jul 01 '13 at 20:27

Brian Lewis · Accepted Answer · 2013-07-01T21:33:03.817

If you want to persist data between actual HTML pages and not routes within a single page, you could use LocalStorage. Here is a service that will make that a little easier.

Another approach would be to use cookies. You can read more about using cookies in Angular here.

If you are wanting to persist the data across different routes, you will need to create a shared service. Here is an example of such an approach:

<div ng-app="myApp">
    <a href="#one">one</a> | <a href="#two">two</a>
    <div ng-view></div>
    <script id="one.html" type="text/ng-template"><div><h1>Template One</h1>foo = {{shared.foo}}</div></script>
    <script id="two.html" type="text/ng-template"><div><h1>Template Two</h1>foo = {{shared.foo}}</div></script>
</div>

angular.module('myApp', []).
config(function($routeProvider){
    $routeProvider.
    when('/one', {templateUrl: 'one.html', controller: 'OneCrtl'}).
    when('/two', {templateUrl: 'two.html', controller: 'TwoCrtl'}).
    otherwise({redirectTo: '/one'});
}).
service('sharedService', [function() {
  this.foo = 'bar';
}]).
controller('OneCrtl', function($scope, sharedService){
    $scope.shared = sharedService
}).
controller('TwoCrtl', function($scope, sharedService){
    $scope.shared = sharedService
});

Here's a fiddle.

Thanks for answers, now i have good starting points! Found another local storage solution for angular: [Local Storage Angular](https://github.com/agrublev/Angular-localStorage). @moderndegree: accepted this as answer! — DehMotth, Jul 02 '13 at 08:52

Angular JS / data handling / overview page

1 Answers1