[mdkess]

Nice writeup, I especially appreciate the focus on testing. End product looks really slick. You might want to add a screenshot and a link to the blog post in the GitHub repo that you posted.

One thing that I think could be improved is the layout of your code. Right now you have a single controller that handles everything. For example, selecting a shirt color should be a directive, and so should the quantity picker. Then use the $scope.$emit and $scope.$on to hook events together. This way, if I make a better color picker (although yours is pretty stylish), I can swap out yours for mine so long as I emit the same events as yours.

This would also make it easier to add new directives - for example, maybe I could choose a decal on the front and back of shirts, or jersey numbers or something. So I think that the controllers in this case should be pretty minimal, and just provide a scope to tie the various directives together.

Anyway, just a thought. Thanks for sharing this and the included GitHub repo.

[JohnMunsch]

You bring up two really good points there. I will add a screenshot to the Github repo and there is an opportunity to use a directive for the color picker.

I'm not sure about the quantity picker though, what's that going to look like in the HTML? One element in the code gives you all of the quantity fields?

My use of directives to date has been rather limited so I look forward to exploring that more in some upcoming work.

[mdkess]

I'm certainly no Angular expert, so take my advice with a healthy amount of skepticism, but I think that it would be one element. The idea being that if I want to swap that stuff out for a new and improved quantity picker, I just change the directive. The idea of angular is that the HTML is supposed to make it clear what's going on, so a single element isn't a bad thing - it says, "here's the part that chooses quantities." Remember that you can nest directives too - so the meat of your page could look like:

  <div ng-controller="QuoteCtrl">
    <shirt-chooser></shirt-chooser>
    <color-picker></color-picker>
    <size-picker>
       <size-picker-choice label="SM"></size-picker-choice>
       <size-picker-choice label="MD"></size-picker-choice>
       <size-picker-choice label="LG"></size-picker-choice>
       <size-picker-choice label="XL"></size-picker-choice>
    </size-picker>
    <number-picker></number-picker>
    <order-summary></order-summary>
  </div>

And then your directive figures out what that means in terms of rendering. But now, the nice thing is that I can just substitute that with <my-size-picker> and, assuming I fulfill the contract, everything should continue to work.

Now you get the added benefit that you can test directives individually, as well as the whole controller. Right now, if you do some restructuring of the page, you could end up in a situation where you break all of your test cases. I mean, in this case it might be overkill, but as a general principle I think it's the right approach.

Anyway, looking forward to see what you do next!