For the Love of Angular and Homebrew (not the package manager)

March was an extremely busy month, with one more big event today before I get a break. A month ago, in early March, I was fortunate enough to attend ng-conf in Salt Lake City, UT. Between the pre-conference workshops and the main single track talks, I learned so much about the present and future of one of my favorite frameworks. I also interacted with many other members of the Angular community who were as passionate as myself about using Angular.

I highly recommend checking out the talks from ng-conf on You Tube, especially Shai Reznak's ng-wat. The workshops before the conference were wonderful, especially Kent C. Dodds' workshop on the angular-formly directive.

A couple weeks ago I used my new knowledge of formly to completely refactor a feature. During a 24 hour hackathon I was able to completely rewrite a portion of the project, which allowed us to go from around 18 files to four small, well organized, files. I am extremely pleased with the level of control and ease of use formly represents. Instead of building big nasty html forms with scattered Angular directives, formly allows you to define your entire form and all of its logic in JSON.

For example (borrowed from http://angular-formly.com):

<form>  
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" ng-model="vm.user.email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" ng-model="vm.user.password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile" ng-model="vm.user.file">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="vm.user.checked"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default" ng-click="vm.submit(vm.user)">Submit</button>
</form>

Transforms into this:

<formly-form model="vm.user" fields="vm.userFields">  
  <button type="submit" class="btn btn-default" ng-click="vm.submit(vm.user)">Submit</button>
</formly-form>

and this:

function YourCtrl() {  
  var vm = this;
  vm.user = {};
  vm.userFields = [
    {
      key: 'email',
      type: 'input',
      templateOptions: {
        type: 'email',
        label: 'Email address',
        placeholder: 'Enter email'
      }
    },
    {
      key: 'password',
      type: 'input',
      templateOptions: {
        type: 'password',
        label: 'Password',
        placeholder: 'Password'
      }
    },
    {
      key: 'file',
      type: 'file',
      templateOptions: {
        label: 'File input',
        description: 'Example block-level help text here',
        url: 'https://example.com/upload'
      }
    },
    {
      key: 'checked',
      type: 'checkbox',
      templateOptions: {
        label: 'Check me out'
      }
    }
  ];
}

By using formly, we are reducing the amount of HTML to be maintained in favor of more readable and testable JavaScript. My favorite part is being able to write complex logical expressions for validation and other fun into the expressionOptions of a formly field.

The form I was refactoring includes some very complex geography fields. Some fields are supposed to show this if this, hide this if not that or this type of fun. Formly made the logic much easier to manage, and the resulting code was much easier to read then the previous iteration. If you have any use of forms in your application, I highly recommend the use of formly!

Talk on Angular at CB Tech Talks

In other news, today I gave a talk on Angular JS at a series of talks put on by my company, CareerBuilder. The talk was more introductory, talking about what Angular is, showing some examples, and fielding questions from the other developers. All in all it was very enjoyable, and I seem to ahve illicited excitement in a number of my coworkers.

I created two Plunker examples to show for the presentation, one using a basic controller with a service to show basic Angular usages, and controller closure and scope. The example uses the Periodic Table of Elements data, does a simple ng-repeat utilizing a plain text input filter and ng-class to change the color based on the group the element was in. The Plunker is available here. Feel free to use it for whatever you like.

I also created a more advanced directive example. The final output is very similar, as it also used ng-repeat on a nested directive to output Atlanta Braves game stats from 2014. I wanted the two examples to be comparable to show how to go from a controller to a directive more easily. I enjoyed coding the second example, due to the use of custom directives and nested custom directives. I think the code will be useful to developers new to Angular. Once again, the Plunker is available for whatever from here.

First Homebrew Complete!

In other, less technical news, my first homebrewed beer is complete! While nothing special, the brew is a drinkable brown ale hovering around 6.5% ABV. I am very excited to think up my next batch, as I expect the second round to be much more interesting... I'm thinking something dark and moderately high gravity. Yes, I know it is almost summer, but I love dark beer!

March was a very long month. After giving my talk today, I am in the clear for awhile. In fact, I am looking forward to working out of the Paris office for a week in April, which should be very nice.