AngularJS Processing multiple parts of data in a controller

Question

I'm building an app that basically calculates prices as you pick options. So basically it's a form with select options and as you go down the form, the app will process the price more refined and change the options for the other form fields.

Currently I have an API built out and in this processing, the app will need to hit the API a few different times. There will ultimately be 7-12 form fields that will make up the pricing options. While mapping out the controllers, I'm wondering what the best method to keep my processing organized. If I was doing this in a language like PHP I'd have different functions per form element and process each time the form changes.

In Angular, having one controller per view, I'm curious how you guys, the pro, would organize it..

In a non-specific language structure I'm thinking something like...

select one has 5 options, user selects one.
Using the data from step one, a calculation happens, hits the API and gets new options for select number 2. User selects options and process happens again.

So if my controller is say...

.controller("formController", function($scope){
        //Function for when select one changes, listen for form change ng-change
        function item1Change(){
           //hit api with item1 value, get options for item2 and and load them into item2
        }
        function item2Change(){
           //hit api with item2 value, get options for item3 and and load them into item3
        }
    })

To me, this seems very dirty as in I need to define stuff, it doesn't seem modular or segmented and I just feel that there's a better option. If you guys have any better ideas, let me know, THANKS!

there's no restriction that you have to have one controller per view. I often don't. Basically though, you need to utilize either promises or callbacks when the bindings in your form inform your scope of a change, which in turn return the appropriate result. I actually would create a directive specifically for the price field, and initialize an individual controller just for that, so you'd have an Api service, a form controller, a directive for price, and a price controller. — Brian Vanderbusch
– Brian Vanderbusch, Commented Feb 16, 2014 at 1:41
Thanks Brian. In my routing I specify a controller tied to that route. How do I utilize other controllers? I've only ever dealt with one controller per view/route. — G.Thompson
– G.Thompson, Commented Feb 16, 2014 at 2:07
Also, my plan is to load all the select options to the view and disable them until the previous form populates them. I always though promises were for initial load of the view. — G.Thompson
– G.Thompson, Commented Feb 16, 2014 at 2:10
lastly, each field may need to hit the API for different reasons, would it make sense to have possibly 11 directives? — G.Thompson
– G.Thompson, Commented Feb 16, 2014 at 2:16
I typically go with the standard of "1 controller for each $scope I need control over", and then evaluate whether specific directives need their own controller, depending on the specific implementation of that directive within the scope in question. — Brian Vanderbusch
– Brian Vanderbusch, Commented Feb 16, 2014 at 2:30

Brian Vanderbusch · Accepted Answer · 2014-02-16 03:35:08Z

There is no restriction regarding the number of controller available to a view. A general best practice I have come to follow* is to initialize one controller for each $scope I feel needs to be handled with more care than that available to it's parent scope or the behavior definitons for directives within the scope.

I would use:

a formCtrl
a priceCtrl
a custom directive for the calculated total
a directive strategy for selection behaviors withing the scope paired to the form controller (one or more directives)
a service that feeds option configuraitons, dependencies, etc to your controllers and directives as needed (this is a good way to decouple your data from your controller and encapsulate the handling/processing of the data. This also makes it possible for you to provide the same data to different form views if needed

You can think of your directives and directive strategy as being similar to how you would use the decorator pattern. By decorating the form input with a particular directive, it gains the ability to __

*(this is my own best practice, I can't say it's what the Angular team or community at large endorse)

Collectives™ on Stack Overflow

AngularJS Processing multiple parts of data in a controller

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related