Angular Directives for Agile development

Register
Submit a solution
The challenge is finished.

Challenge Overview

Challenge Overview

Much of Appirio's Cloud Management Center (CMC) centers around project management for cloud development. While Appirio's development methodology technically lies somewhere between Waterfall and Agile, we speak mostly using Agile terminology. To this end, we would like to have some tools that allow for fast and easy story creation across multiple CMC applications. We would like to accomplish this via a small set of Angular directives that we will essentially be able to drop into a given Angular-based application.

The primary goal of this challenge is to get fully functional prototypes of all 3 requested directives. These directives should be fully-functional and match the specs, but they do not need to do anything in terms of interacting with a backend. Instead, they should store the created data in local controllers/services.

Challenge Details

Here are the details for all three directives, including links to Google drawings of the finished products.

1) Story one-liner (https://docs.google.com/a/appirio.com/drawings/d/1x48Fdfhv3cZu6HFuqeMEoScBpp226wLYEnC9dbfwaKM/edit)

Write a directive that allows the user to add a story to the current project by simply inputting a name and pressing the "Create" button (or enter). In the directive, the project and component for the story should be specified. For the purposes of this challenge, both of these will be provided by the scope of the controller.

2) Bulk story-create (https://docs.google.com/a/appirio.com/drawings/d/1zLIQJmWX0MKVCki_4KbcPNz6p8PS1fdqXh25ZmhYWlg/edit)

Write a directive that allows for consecutive entry of multiple stories. As each story is added, previously added stories should be displayed in a list. The columns on display should be configurable, as indicated in the drawing above, and the user should be able to use a checkbox to make the value currently being entered in a given column the default value of the column's text input for the next row.

3) Templated (mad-lib) inputs (https://docs.google.com/a/appirio.com/drawings/d/1NSUoZmVIpCbkbbMlrt36ib1KVPHZ7bFm529l_BPMK78/edit)

Write a directive that can live as an attribute on a textarea that takes an array of text templates as an argument/property and then gives the user the option of either using the raw textarea, or selecting a template. The behavior and format of the textarea and templates are indicated in the drawing above. Note that if the user tries to switch between templates, the existing ng-model for the textarea should be destroyed.

We have intentionally given you some leeway as far as the minute details of specific features and implementations go. A successful solution, however, does not require creativity; it need only do what is required and be useable.

 



Final Submission Guidelines

Solution must be written in AngularJS and Javascript. Emphasis will not be on visual UI style, but to this end, you should generally use Bootstrap to make things look nice. Any external libraries not included require permission to use.

Solutions should be written in the context of the attached project. It provides a service that returns a list of stories to a controller. The stories are displayed in a table, on a partial. When you add stories, they need only be added to the story list this service returns. The table is provided so you can see that this is happening.

The example project provided is based off of angular-seed (https://github.com/angular/angular-seed). To test your solution, follow the instructions to run the packaged node server. It's fairly simple, and again, we are not asking for backend code or interaction with an actual endpoint. All the action will happen within Angular.

Review style

Final Review

Community Review Board

Approval

User Sign-Off

Challenge links

ID: 30040713