TwitterSearch HTML5 application with AngularJS and GSAP frameworks

Added by: Sam Deering





Stars: 56

Watchers: 56

Forks: 15

Module Description

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.


!! TwitterSearch is also live on

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


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

    images/           --> image files

      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()]

            angular.js      --> AngularJS v1.0rc4 IoC Framework
        jquery.min.js       --> jQuery v1.7 minified
        load.js             --> asynch script loader
scripts/              --> 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


Stay tuned for upcoming blog article and video on the GridLinked blog.
For more information on angular please check out

Module stats last updated: 2017-11-30 16:00:05

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!