Angularjs & Yeoman - Part 2

First experiment

In the first post in the series on Angular and Yeoman, we mentioned a few of the cool things about Angular, without actually getting into any concrete code. This here post is a first example of using Angular. So here's an extremely simple "edit in place". In the next post, we'll create a more complex and better scaffolded app.

Goal

Create a span which contains some text, allow to edit it in place, transforming the span into an input, and re-display the value in the span on "save"
Visually, it means:
Start with initial value, not editing

 Click the pencil to edit

Change the value

Click the ok icon and preserve value

Notes

We are not trying to:

• actually save that value to a db at this stage
• build a complex app, which would be done using Yeoman and async Angular bootstrapping
• use testing, although it is highly encouraged to do so for anything more complex than this

Bootstrap CSS was including purely to make things look a little bit nicer, but is absolutely not required.

HTML

Here's what the HTML looks like:

Everything is declarative:

• ng-app in the body (or anywhere else in the DOM) informs Angular that this is an app. Note that it will only affect the children (DOM-wise) of the element containing this directive
• ng-controller sets the controller for this specific part of our app
• ng-model on the input element, specifies that the value of the element shows/reads from the variable "configuration"
• {{configuration}} means that Angular should display the value of the variable "configuration" in this place
• ng-show is a directive that allows us to watch for the value of a variable (here "editing" and "!editing") and show or hide the element accordingly
• ng-click tells Angular to react to the click event, calling the specified function accordingly

Javascript

Assuming that you are correctly including angular.js, the javascript code behind this is extremely simple. We just need to define the controller, which is a simple function put into editinplace.js:

See how we request $scope in the definition of the controller, which is provided via dependency injection, another great feature of Angularjs. We could define it as EditCtrl( $http, $scope ) or anything else, as long as we provide the injector with the corresponding mapping of variable_name to an actual variable. The order does not matter (EditCtrl( $scope, $http ) works as well). Btw $http is a built-in resource of Angularjs used to handle Ajax requests.

Conclusion

Granted this is a really simple example, but it shows some of the basics of Angularjs, and as you can see, no interaction with the DOM is required at any stage. The HTML elements could be rearranged without affecting functionality. No jQuery or other framework is required.
This also shows that even if your goal is not to build a full one-page app, Angularjs can come in very handy for model-based DOM manipulation.

More complex and amazing things (dependency injection, repeaters, several views, routing and Yeoman scaffolding) to come in the next posts in this series.

Discussion

This does not handle focusing on the input when editing, or any action on pressing "Enter". Again this is a very simple use case.