Category Archives: AngularJs

Wednesday fun (maybe not)

All work and no play makes Jack Dennis a dull null boy.


rock picture

So one of the wonderful things about living here is that regardless the season we always have something great to do outside. During this time of year we go on a hike each Wednesday with a group of friends. Usually a great time to unwind and not have to think about anything work.

The trick or struggle always for me is to not think about anything work related and to just relax and enjoy the surroundings. I always enjoy spending the time outdoors whether on my bike, camping with family or on a hike like tonight. However without fail I am always working out a problem in my head at some point.

So I am proud to say that I actually made it through the hike without thinking about any problems I am currently working on. Breakthrough!!!

Tonight I created a new problem and worked on it during the hike. How is that for progress?

Recently I saw a demo on AngularJS and I was thinking on my hike how hard would it be to redo a jQuery plugin I did for displaying a twitter? The following is what I came up with:

Twitter Feed

  • {{tweet.text}}

For now I was thinking of something really simple. Once I got it pulling data from twitter and displaying something I knew that the rest would come easy.

So before I get deep into the code of AngularJs let me give a sample of the jQuery plugin I had done awhile back.

(function($){
    $.fn.minTweet = function(options) {
        var defaults = {
            tweets: 5,
            before: "
  • ", after: "
  • ", click: function() {}, onComplete: function() {} }; var tweetDeck = this; var options = $.extend(defaults, options); var tweetStack = new Array(); var init = function() { tweetDeck.each(function() { var obj = $(this); $.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?callback=?&screen_name='+options.username+'&count='+options.tweets, function(data) { $.each(data, function(i, tweet) { tweetStack[i] = tweet; if(tweet.text !== undefined) { $(options.before+twitterTime(tweet.created_at)+options.after).appendTo($(obj)).attr('title', tweet.text).attr('id', i).bind('click.minTweet', twitterClick); } }); options.onComplete(); } ); }); }; var twitterClick = function() { if(tweetStack[$(this).attr('id')]) { options.click(tweetStack[$(this).attr('id')]); } }; var twitterTime = function(dts) { var now = new Date(); var then = new Date(dts); var diff = now - then; var second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24, week = day * 7; if (isNaN(diff) || diff < 0) { return "Unkown"; // return blank string if unknown } else if (diff < minute) { return Math.floor(diff / second) + " seconds ago"; } else if (diff < minute * 2) { return "1 minute ago"; } else if (diff < hour) { return Math.floor(diff / minute) + " minutes ago"; } else if (diff < hour * 2) { return "1 hour ago"; } else if (diff < day) { return Math.floor(diff / hour) + " hours ago"; } else if (diff > day && diff < day * 2) { return "yesterday"; } else if (diff < week) { return Math.floor(diff / day) + " days ago"; } else if (diff > week && (diff < (week + day))) { return "a week ago"; } else { return Math.floor(diff / day) + " days ago"; } }; init(); }; })(jQuery);

    Probably not one of my greatest achievements but at the time of it's creation it was simple and served to solve a problem that I was working on at the time. Granted a majority of the code is that twitterTime() function it always bothered me that I should have been able to make it simpler.

    So would AngularJs save me or would my idea burn? Here is the javascript that I came up with.

    function twitterFeed($scope, $http) {
        var url = 'https://api.twitter.com/1/statuses/user_timeline.json?callback=?&screen_name=dniswhite&count=1';
        $http.jsonp(url).success(function(data,status){
            $scope.tweets = data;
        }).error(function(data) {
            $scope.tweets = "Request failed";
        });          
    }
    

    For now I hardcoded the name of the twitter feed being retrieved to mine. As I went to test it I could see that the error() function was being called. What could be wrong with my perfectly small piece of code?

    Fire off my old jQuery plugin and sure enough it's no longer working. Did I ever deploy this code and if so what site did I deploy it on? Somewhere out there is a site with a broken twitter feed.

    Take out the url from the code and lets give this a test.

    {"errors": [{"message": "The Twitter REST API v1 is no longer active. Please migrate to API v1.1. https://dev.twitter.com/docs/api/1.1/overview.", "code": 68}]}
    

    So it appears that for now I am temporarily stuck and I will need to resolve the new API (this requires OAuth). I hate to end blogs without resolution so instead let me say "Stay Tuned"

    Maybe it wasn't such a breakthrough to not think about problems during tonights hike.