Skip to content

TwitterSearch HTML5 application with AngularJS and GSAP frameworks

Notifications You must be signed in to change notification settings

D3CK3R/angularJS-TwitterSearch

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 

Repository files navigation

TwitterSearch - AngularJS


This project presents the TwitterSearch HTML5/Javascript application implemented with AngularJS.
Originally presented by Thiery Chatel, the project improves upon that excellent initial effort.

Screenshot


!! [TwitterSearch](http://jsfiddle.net/ThomasBurleson/8Gzj9/) is also live on jsFiddle.net.

This implementation improves upon the original with the following features:

  • use of angular.module() [main app TwitterSearch.js] to build a custom $twitter service
  • use of $http with promises
  • improved SearchController
  • improved skinning [with Twitter Bootstrap library],
  • improved, complex filters and refresh timer,
  • refresh count down, auto-reset, auto-search
  • use of promise [see use of .then()],
  • use of ng-hide/ng-show/,
  • support for enter/return-key to initiate search
  • row selection,
  • and more...

This Twitter search application demonstrates two (2) very amazing aspects of AngularJS: injection and databinding.

A different version of TwitterSearch directly uses $resource instead of $http. $resource.get() actually returns an empty object { } while the asynchronous request is pending. The directive ng-repeat='tweet in twitterResult.results actually places databinding on the express twitterResult.results. When the asynch response is received, $resource UPDATES the properties of the empty object { } with the response which - in turn- triggers databinding to process the ng-repeat directive.

Now truth be told, $resource actually uses $http under the hood. And $http uses promises [AngularJS provides a promise/deferred implementation inspired by Kris Kowal's Q]. So when the $resource promise resolves, then the emtpy object { } is updated. It is the use of databinding that is so amazingly magical in AngularJS... plus promises and injection.

While that solution uses $resource, this one uses $http with promises to create anotherAngularJS Twitter example... a superior one IMHO.


Because TwitterSearch.html uses <div ng-controller="SearchController"> AngularJS will attempt to instantiate and scope a SearchController instance for the specified <div /> and its DOM descendants.

In this implementation the $resource is not used; rather the $http service and its support for promises is used to transform the data before the controller or the views are notified. Notice how closures are used to publish a custom $twitter service with a single API: search().

A TwitterSearch() constructor function configures the angular app module and builds the custom $twitter service (that is injected into the controller). Because the TwitterSearch.html has <div ng-app="Twitter" >, we must create a module Twitter. Notice how the cross-domain, JSONP call promise handler intercepts and transforms the data prior to delivery to the controller.

Look at the TwitterSearch.html to see how we use the AngularJS directives:

  • ng-hide
  • ng-show
  • ng-click
  • ng-repeat
  • ng-class
  • ng-cloak
  • angular filters

Directory Layout

webroot/                  --> all of the files to be used in production

  TwitterSearch.html   --> HTML5 application

    assets/

    css/              --> css files
      tweets.css      --> default stylesheet

    images/           --> image files

    js/
      
      bootstrap.js        --> asynch loader and initializer (using head.js)
      SearchController.js --> angular controller with $twitter injection and databinding
      TwitterSearch.js    --> application source code []angular.module()]

      lib/
        /angular
            angular.js      --> AngularJS v1.0rc4 IoC Framework
        
        jquery.min.js       --> jQuery v1.7 minified
        load.js             --> asynch script loader
        
scripts/              
  run.coffee       --> simple NodeJS webserver

Pending Features

This effort is still ongoing with some in-progress effort that will provide the following features:

  • Provide loading indicator as data load indicator
  • Convert disorganized CSS to LESS

Contact

Stay tuned for upcoming blog article and video on the GridLinked blog.
For more information on angular please check out http://angularjs.org/

About

TwitterSearch HTML5 application with AngularJS and GSAP frameworks

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published