This repo serves as a case study of a real-world UI problem, demonstrating how one might refactor a bloated controller into reusable layers that are easier to maintain.
See the working demo at http://kvcrawford.github.io/ng-permutation-builder/
Jill works for The Widget Factory, a company in the business of making widgets. Oftentimes, she wants to be able to test how slightly different widgets perform against each other.
Rather than waste time creating the otherwise-same widget several times over, she would like to be able to quickly generate the different permutations, and be done with it.
One of the most common pitfalls seen in Angular apps are bloated controllers, and the templates that go with them. See
What do we do when we want to start creating permutations of Gadgets, as well?
- permutationFactory - Utility service to generate permutations
- PermutationBuilderService - An abstract service that can be extended for different types of permutable resources. Manages the state and logic for a permutation builder UI flow. Contractually bound to the directives below.
- kcPermutationBuilder - Binds an instance of the service to the UI, exposing its API to child directives.
- kcPermutableInput - Directive that encapsulates the input for a permutable attribute.
- kcPermutableAttribute - Displays (and enables user to delete) entered values for a permutable attribute.
With the abstracted directives and services, our widget builder becomes much thinner.
- widgetFactory - Service that builds and validates widgets
- WidgetBuilderService - Extends
PermutationBuilderServiceto define widget attributes and how widgets get persisted. - WidgetBuilderController - A much thinner controller.
- widget-builder.jade - And its accompanying template.