John Berryman
Category: Solr
Note: The following post is fantastic… but this one is about the same topic and is even better.
\n\n
Of late weve been playing around with EmberJS for putting together slick client-side apps. But one thing that bothers me is how heavy-weight it feels. Another thing that concerns me is that AngularJS is really getting a lot of good attention and I want to make sure Im not missing the boat! Here, look, just check out the emberjs/angularjs Google Trends plot:
\n\n
\n\n
So since all my major life decisions are dictated by Google Trends plots, I took a little time this weekend to familiarize myself with AngularJS. And frankly, Im impressed!
\n\n
When building a JavaScript framework, the framework designer has to strike a delicate balance between power and heft (that is, how intrusive and heavy-weight the framework is). Usually the more powerful the framework is, the more invested you have to be in the framework: the more the difficult it is to learn, and the more you simply have to accept its opinions a being the right way to go (even if you secretly disagree). AngularJS, somewhat miraculously, appears to at once be both powerful and lightweight! After taking a casually stroll through the main page of the AngularJS website I was immediately able to start working with it.
\n\n
Currently one of my favorite things about AngularJS is the ability to create your own custom HTML tags. For instance, in a prototype Im building, I just used AngularJS to create a new
\n\n
First I create code that defines this new element, enables the data binding, and governs its behavior, (make sure to read the comments here):
\n\n
//define a module (yay! modular code!)\nangular.module('law', [])\n//within that module, define the idea of a lawsearch element\n.directive('lawsearch', function () {\n return {\n restrict: 'E', // this indicates that we're describing a new element\n scope: {}, //every element will have it's own scope\n\n //this is where the behavior is defined\n controller: function ($scope, $element) {\n $scope.init = function (q) {\n $scope.q = q;\n\n //here we issue the actual query using jQuery\n $.ajax({\n url: "http://ec2-75-101-214-153.compute-1.amazonaws.com:8983/solr/statedecoded/search",\n data: {\n "q": $scope.q,\n "wt": "json",\n "rows":3\n },\n traditional: true,\n cache: true,\n async: true,\n dataType: 'jsonp',\n success: function (data) {\n //and when we get the query back we\n //stick the results in the scope\n $scope.$apply(function () {\n $scope.results = data.response.docs;\n });\n },\n jsonp: 'json.wrf'\n });\n }\n },\n //finally, here's the presentation our new lawsearch element\n template:\n ''+\n ' '+\n ' '+\n //check out how easy it is to iterate through elements\n ' - '+\n ' '+\n ' '+\n '
'+\n '
'+\n '',\n replace: true\n };\n})\n\n\n
I love that AngularJS has totally nailed the model-view-controller pattern. Usually when someone says theyre using a MVC-based framework I enjoy asking them what that means and how their framework fulfills the MVC pattern. I guess Im sadistic, but I like hearing them mumble and sputter as they try to answer the question.
\n\n
But here, AngularJS has made it pretty clear. The model is the data that hiding behind the lawsearch element (this is the data that we keep shoving into the $scope object), the view is the template that describes how the data will be presented, and the controller is the function (labeled “controller” above) that acts as the intermediary between the model and the view. When the model changes, the controller relays the necessary information to the view and when users interact with the view, the controller can relay changes back to the model. I love it.
\n\n
Now that the JavaScript piece is done, lets see how one would use this (again, read the comments here):
\n\n
\n\n \n Law Search \n \n \n \n\n\n \n \n\n
Its hard to get much simpler than that. Want to see this in action? Here it is, live.
\n\n
And… if you didnt find that impressive, youre sure to love this: Ive used AngularJS to resurect the blink element!
\n\n
\n\n
Check out my LinkedIn Follow me on Twitter
\n\n