AngularJS: "element" in Directives

When developing Directives, it's quite common to encounter the "element" object that's passed into function callbacks for events. This is actually AngularJS's wrapper object for the DOM element object. List of supported methods can be found here: http://docs.angularjs.org/api/angular.element

AngularJS: Notification Callback on Blur Event

This is one of those things in AngularJS that is perhaps a bit more complicated than it really should be, as the only way I know to do this at the moment is via a Directive. AngularJS updates the model instantly when it changes. In the case of the text input field, it's after every character is typed or deleted. However, there are times where you want to be notified only on the "blur" event, such as when calling the server to validate the value.

directive('input', function() {        return {            restrict: 'E',            link: function(scope, element, attr) {                if (attr.type === 'radio' || attr.type === 'checkbox') return;                element.bind('blur', function() {                    scope.$apply(function() {                     scope.onBlur(element.attr("name"));                    });                });            }        }    });

In this example, the Controller's "onBlur" callback is called with the element's name. This example returns immediately if the input is of type "radio" or "checkbox", because the "change" event is  more applicable for them.

Bootstrap Form Input Size

Changing the size attribute in Bootstrap does not seem to affect the width of the form field. Instead, the suggested way to do this is via pre-defined CSS classes such as "input-small", "input-large" etc.

Reference: http://stackoverflow.com/questions/9784990/bootstrap-wider-input-field

Git Use Different Name and Email for Repository

If you use Git for multiple projects and wish to use different identities for each project, you can specify a repository specific identity in the repository's config file.

Instructions here: http://stackoverflow.com/questions/4220416/can-i-specify-multiple-users-for-myself-in-gitconfig

Wicket Multiple Choice Select Box

The component to use for this is the ListMultipleChoice class.

Jersey Client: Using Cookies

Example code for how it's done:

// contains the cookies for the session private Map<String,Cookie> cookies; public String get(WebResource.Builder webResource) {    // setting cookie before sending request    Set<String> cookieNames = cookies.keySet();    for(String cookieName : cookieNames){        webResource = webResource.cookie(cookies.get(cookieName));    }    // send the request    ClientResponse response = webResource.get(ClientResponse.class);    // retrieving cookie from server response    List<NewCookie> newCookies = response.getCookies();    for (NewCookie newCookie : newCookies) {        // new cookie replaces existing cookies with the same name        cookies.put(newCookie.getName(),newCookie);    }    // do something with response }

MongoDB: Search Nested Value With Java API

Let's say we have an object with structure like this:

{   "name" : John,   "contactInformation" : {         email : “john@gmail.com”,         phone: "12341621"    } }

We can query for the e.g. email field which is a nested field as follows with the Java API:

BasicDBObject searchCriteria = new BasicDBObject(); searchCriteria.put("contactInformation.email", emailToSearchFor); DBObject result = collection.findOne(searchCriteria);

MongoDB: Get ID of Inserted Document

After inserting, use the following:

DBObject dbObj = new BasicDBObject(valuesMap); collection.insert(dbObj); ObjectId id = (ObjectId)dbObj.get("_id");

AngularJS: Using Services for Global State

In Javascript, global variables are sometimes needed to store state information that needs to be shared by multiple elements on a page. However, with global variables, you'll always run the chance of conflicting with another variable declared with the same name by another component, and obviously violates the principle of encapsulation.

With AngularJS, it's possible to use the services feature to achieve the same thing, but with encapsulation. This is because services are a singleton, meaning the same instance of an object can be shared across all AngularJS code in the same app.

Example:

angular.module('someModule', [ ]).factory( 'AppState', function() { function SomeClass(){ // what you want as global variables and functions to access them here } var instance = new SomeClass(); return instance; });

AngularJS ng-include Gotcha

In AngularJS, ng-include processes the contents of "src" attribute as a Javascript expression, not as a file path.

What this means is that you can dynamically determine what to include by doing something like this:

<div ng-include src=”getAppropriateContent()”></div>

where the "getAppropriateContent()" Javascript function that you'll implement returns the path of the appropriate content to show for the situation.

However, when you want to hardcode the path to a HTML file, you'll have to remember it's a Javascript expression. You'll have to enclose it in quotes (single quotes in this case) or it won't work.

<div ng-include src=”’content.html’”></div>

Twitter Bootstrap Grid System

Makes layout out web pages easy: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem

CSS z-index Gotcha with Parent/Child Elements

In CSS, z-index is used to control which elements appear in front of or behind each other when they're overlapping on the screen.

However, there is one "gotcha" to note, that is if both a child and parent element has z-index defined, and you want the child to appear in front of something and the parent to appear behind, it won't work. Instead, both parent and child elements will appear behind, with the parent's z-index taking effect. This can happen for example if you have an overlay, and you want a modal window (the child) to appear on top of the overlay, while the parent element on the main page should be behind the overlay. If the parent has a z-index, then both parent and child will be behind the overlay, regardless of the z-index of the child.