Posts tagged JavaScript

Bootstrap Typeahead Directive for AngularJS

A simple directive wrapper around the Bootstrap Typeahead component

Requirements

• Bootstrap (2.1.1)
• AngularJS (1.0.2, 1.0.3)

Goal

The goal of this project is to have a straight forward typeahead component example using angular, that can be forked and customized by developers wanting more specific use cases for their typeahead component.

Usage

the bstypeahead directive takes an array of objects with id and name properties, and displays the name property in the code completion and stores the id attribute in the model. You can set the model programmatically to the id and the name will show up in the input. This is not a fancy end all be all typeahead control, but it does work well for the use case of storing id and displaying names.

https://github.com/twilson63/bstypeahead-directive

AngularJs has be come the javascript client tool of choice for Jack Russell Software, we have been bike shedding on many different client mv* frameworks for a few years. Our clients continue to demand richer ui experiences on the client and our jquery code base has gotten out of control.

We started some exploration with backbonejs one of the first mv* frameworks and had problems working with it and coffee-script, which was mostly user error. Back then there was not a lot of documentation to go around and you had to setup your data-binding manually.

Next, we started down the path of SproutCore2, now Ember and it was our best fit, but you had to manage your own ajax calls. We did finally go with Ember in production and it worked great, the only issue, was that our development team continuously said that it was hard to step back into an ember app after not looking at it for a few months. The application was hard to digest and grok.

Hello AngularJs

A few months ago, we started experimenting with AngularJs and it appeared to be odd with the declarative programming model, we quickly feel in love with its testing story and how the framework focuses on testability. So now, we have a few modules going into production and one is reducing our javascript code base by 70%.

If you are on the fence on javascript mv* frameworks give AngularJs a try! It is working well for us.

Check out this nifty little tool we created called ngfiddle - http://ngfiddle.jit.su - a great place to play around with the AngularJs framework and share your fiddles with other devs.

AngularJS is a powerful MV-Star framework from Google that has all kinds of neat features, focused on testability and automatic data-binding, it uses a declarative markup style and leverages the strength of the DOM. Yes, the dom is ok at some things. :D

The AngularJS team feels the future of the web is moving more to this declarative style, time will tell, but it definitely makes my life a little less painless.

This example does not really go into the power of AngularJS, but demostrates its simplicity and strong declarative features.

Check out:

https://gist.github.com/3629261

It is a fully functioning contact form that validates every field for being required and validates the the e-mail field for being an e-mail.

It is amazing the amount of functionality you get declaratively, to just do a simple form validation and post.

Check out buddies.js, a couple clean well-tested library functions to populate and extract data from html forms in one method.

el = $("#foo") # the html above
# use the object attribute short_title and put it in the short-title form input
atts = {short_title : 'short-title'}

FormManager.populate ob, el, atts

See more: http://hssc.github.com/buddies-js/

There is a great working example on the home page.

Thanks for the OSS Contribution

Thanks goes out to core contributors Jed Schneider and Gary Fredericks

Rico Sta. Cruz created an awesome converter js2coffee. If you are planning to get into CoffeeScript, you have to check this page out.

http://ricostacruz.com/js2coffee

It will not craft CoffeeScript as well as if you did it by hand, but it is great to take some existing javascript and paste it in and see how it renders the CoffeeScript.

I just went over the https://github.com/visionmedia and grabbed the javascript from “node-growl” js file and pasted it in the javascript editor at js2coffee. It converted it to CoffeeScript and the generated CoffeeScript code was functional and compiled back into JavaScript!

Fun Stuff!