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/

The User Story

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.

A First Iteration

One of the most common pitfalls seen in Angular apps are bloated controllers, and the templates that go with them. See

• SpaghettiWidgetBuilderController
• spaghetti-widget-builder.jade

What do we do when we want to start creating permutations of Gadgets, as well?

Teasing Out The Layers

Services

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

Directives

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

The New, Improved Widget Builder

With the abstracted directives and services, our widget builder becomes much thinner.

• widgetFactory - Service that builds and validates widgets
• WidgetBuilderService - Extends PermutationBuilderService to define widget attributes and how widgets get persisted.
• WidgetBuilderController - A much thinner controller.
• widget-builder.jade - And its accompanying template.