Standard practices for organizing models in AngularJS

Question

I am building an application that has a "Web Planner" where the user goes between a number of pages in order to complete a large process. Each page they provide more information than the last and some pages are dependent on other pages to get the correct data.

For instance lets take an example like:

Customer Info -> Accounts -> Settings -> Final Review

This is a 4 page "Web Planner" that a user must complete before placing an order on our site. Right now I have a RootController that is used for functions and data that is shared across all pages, then I have other controllers for each of the other pages.

It makes sense that the Final Review page would contains pieces of information from all of the previous pages and would result in a "Summary" of the web planner. We allow our users to "Save" their order at any given step and then return later on. Therefore they will not ALWAYS go in the above order to get to Final Review.

So my question is, what is the best way to organize and structure this application so that even if the user opens their browser and goes directly to Final Review then they will receive all the correct information.

It would seem simple enough to just place all API calls on the RootController and then no matter what page they come to, we retrieve all of the data all at once. The only problem with that is depending on where they are in the Web Planner when they hit "Save" only parts of the information will be available.

Is there a standard way to shared information across multiple pages in this manner?

Andrew Sula · Accepted Answer · 2014-08-15 20:30:50Z

1

I would suggest using AngularJS services to share the information between each of the pages in the process. Services are commonly used for the purpose of data sharing between controllers.

An Example Service

For your example, you might want to create something like a WebPlanner service. This would keep track of all the data from each step in the process. Below is quite a basic example, so you will want to expand it using the model from your RootController.

var myApp = angular.module('myApp', []);
myApp.factory('WebPlanner', function() {
    return {
        customerInfo: {
            name: ''
        },
        accounts {
            accountId: ''
        },
        settings {
            exampleSetting: false
        },
        finalReview {
            userHasConfirmed: false
        }
    }
})

Example Controllers

You can then access this service from the controllers at each step of the process. This will allow each of your controllers to both read and write to the data stored in the service.

Writing:

function CustomerInfoCtrl($scope, WebPlanner){
    WebPlanner['customerInfo']['name'] = $scope.name;
}

Reading:

function FinalReviewCtrl($scope, WebPlanner){
    $scope.userHasConfirmed = WebPlanner['finalReview']['userHasConfirmed'];
}

You can read more about services at:
https://docs.angularjs.org/guide/services

edited Aug 15, 2014 at 20:30

answered Aug 15, 2014 at 20:18

Andrew Sula

9398 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Matt Hintzke Over a year ago

I am aware of AngularJS services and use them for other reasons, but I am not sure how I could structure a service that would do something like this. Could you elaborate a little more?

Andrew Sula Over a year ago

Sure. Just to check, does each step in the process have its own controller?

Matt Hintzke Over a year ago

Yes, like I said there is a RootController that is instantiated no matter what page you visit and then there is also a Controller for each page

Andrew Sula Over a year ago

@MattHintzke - Thanks. I've updated the answer with more detail and some examples. Let me know if there's anything I could add to improve the answer. Hope it helps!

Matt Hintzke Over a year ago

I feel like this is basically no different than what I am already doing by placing the model on the RootController. There is still no logic to determine what API calls are made in order to get the correct information for a view. This may be a case where I just have to do what I think is best

|

Collectives™ on Stack Overflow

Standard practices for organizing models in AngularJS

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related