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...

1. select one has 5 options, user selects one.
2. 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!

Answer 1

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)