Contribution and request for comments: time-ago directive

Showing 1-24 of 24 messages
Contribution and request for comments: time-ago directive Luis Ramon Lopez 8/8/12 1:03 PM
Hi,

I've implemented a 'time-ago' directive on a personal project which is
based on the timeago jQuery plugin
(https://github.com/rmm5t/jquery-timeago).

You can have a look into the directive here:
http://jsfiddle.net/lrlopez/dFeuf/

I hope that someone will find this interesting.

Anyway, I'd like that some experienced Angularjs fellow could have a
look into it and tell me if there is a better way to implement the
behaviour.

I'll also be using the directive as an Angularjs example. I think it's
worth teaching some Angularjs basics to my students next year. I'll try
hard to contribute so I can earn a t-shirt to tease them during the
classes :)

Thanks in advance!

Best regards,
Luis-Ram�n L�pez


Re: Contribution and request for comments: time-ago directive Marco Rinck 8/9/12 1:09 PM
Hi, 

not a pro, nor a angular dev, but its a very nice idea and it definitely shows the possibilities of angularjs. Thanks!

Marco 
Luis-Ram�n L�pez


Re: Contribution and request for comments: time-ago directive Marco Rinck 8/9/12 1:23 PM
looking further into your code I would suggest you get rid of jquery dependency and instead use angularjs (somehow) to update the DOM for you. 

If I have learned something in my first angular project: its not good style to update DOM manually (even with jquery). 

Marco 

Am Mittwoch, 8. August 2012 22:03:22 UTC+2 schrieb Luis Ramon Lopez:
Luis-Ram�n L�pez


Re: [AngularJS] Re: Contribution and request for comments: time-ago directive Luis Ramon Lopez 8/9/12 3:51 PM
Thanks for your comments! It's a good idea, I will revisit the code soon
to make some changes...

Best regards,
Luis-Ram�n

El 09/08/12 22:23, Marco Rinck escribi�:
> looking further into your code I would suggest you get rid of jquery
> dependency and instead use angularjs (somehow) to update the DOM for you.
>
> If I have learned something in my first angular project: its not good
> style to update DOM manually (even with jquery).
>
> Marco
>
> Am Mittwoch, 8. August 2012 22:03:22 UTC+2 schrieb Luis Ramon Lopez:
>
>     Hi,
>
>     I've implemented a 'time-ago' directive on a personal project which is
>     based on the timeago jQuery plugin
>     (https://github.com/rmm5t/jquery-timeago
>     <https://github.com/rmm5t/jquery-timeago>).
>
>     You can have a look into the directive here:
>     http://jsfiddle.net/lrlopez/dFeuf/ <http://jsfiddle.net/lrlopez/dFeuf/>
>
>     I hope that someone will find this interesting.
>
>     Anyway, I'd like that some experienced Angularjs fellow could have a
>     look into it and tell me if there is a better way to implement the
>     behaviour.
>
>     I'll also be using the directive as an Angularjs example. I think it's
>     worth teaching some Angularjs basics to my students next year. I'll try
>     hard to contribute so I can earn a t-shirt to tease them during the
>     classes :)
>
>     Thanks in advance!
>
>     Best regards,
>     Luis-Ram�n L�pez
>
>
> --
> You received this message because you are subscribed to the Google
> Groups "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>  
>  

Re: [AngularJS] Re: Contribution and request for comments: time-ago directive Nolan Dubeau 9/3/12 10:37 AM
Hi!,

Awesome directive!   I was trying to implement this today and was not able to get it integrated with the date formatting of my app.  According to this documentation - https://github.com/rmm5t/jquery-timeago  I should be able set the title attribute to a date formatted like so - 2012-08-31T12:33:45Z, however in the fiddle date is formatted like - 1344459305000

Here is an updated fiddle - http://jsfiddle.net/nolandubeau/NQ6mA/

I'm probably missing something simple here.  Any help is greatly appreciated.  Thank you!

Nolan






On Thursday, 9 August 2012 18:51:15 UTC-4, Luis Ramon Lopez wrote:
Thanks for your comments! It's a good idea, I will revisit the code soon
to make some changes...

Best regards,
Luis-Ram�n

El 09/08/12 22:23, Marco Rinck escribi�:
> looking further into your code I would suggest you get rid of jquery
> dependency and instead use angularjs (somehow) to update the DOM for you.
>
> If I have learned something in my first angular project: its not good
> style to update DOM manually (even with jquery).
>
> Marco
>
> Am Mittwoch, 8. August 2012 22:03:22 UTC+2 schrieb Luis Ramon Lopez:
>
>     Hi,
>
>     I've implemented a 'time-ago' directive on a personal project which is
>     based on the timeago jQuery plugin
>     (https://github.com/rmm5t/jquery-timeago
>     <https://github.com/rmm5t/jquery-timeago>).
>
>     You can have a look into the directive here:
>     http://jsfiddle.net/lrlopez/dFeuf/ <http://jsfiddle.net/lrlopez/dFeuf/>
>
>     I hope that someone will find this interesting.
>
>     Anyway, I'd like that some experienced Angularjs fellow could have a
>     look into it and tell me if there is a better way to implement the
>     behaviour.
>
>     I'll also be using the directive as an Angularjs example. I think it's
>     worth teaching some Angularjs basics to my students next year. I'll try
>     hard to contribute so I can earn a t-shirt to tease them during the
>     classes :)
>
>     Thanks in advance!
>
>     Best regards,
>     Luis-Ram�n L�pez
>
>
> --
> You received this message because you are subscribed to the Google
> Groups "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>  
>  

Re: [AngularJS] Re: Contribution and request for comments: time-ago directive Jorge Sousa 9/3/12 11:29 AM
Nice one, 

Thanks 
J--
-------------------------------
Jorge Sousa
Re: [AngularJS] Re: Contribution and request for comments: time-ago directive Nolan Dubeau 9/4/12 6:24 AM
Hi Luis,

I was hoping to continue working on this today.  Just wondering if you had any thoughts on my question above.  

thank you!

Nolan
Re: [AngularJS] Re: Contribution and request for comments: time-ago directive Luis Ramon Lopez 9/4/12 7:43 AM
Hi Nolan,

When I wrote the directive I just needed to format UNIX-timestamps. I
borrowed code from jQuery-timeago that is related to displaying, not to
converting between date formats, but it shouldn't be too difficult to fix.

I'll have a look ASAP.

Best regards,
Luis-Ramon Lopez

El 04/09/12 15:24, Nolan Dubeau escribi�:
> Hi Luis,
>
> I was hoping to continue working on this today.  Just wondering if you
> had any thoughts on my question above.  
>
> thank you!
>
> Nolan
>
> On Monday, 3 September 2012 14:29:06 UTC-4, Jorge Sousa wrote:
>
>     Nice one,
>
>     Thanks
>     J
>
>     On Mon, Sep 3, 2012 at 6:37 PM, Nolan Dubeau <nolan...@gmail.com
Re: [AngularJS] Re: Contribution and request for comments: time-ago directive Nolan Dubeau 9/4/12 8:38 AM
Thanks Ramon!

Regards,

Nolan


On Tuesday, 4 September 2012 10:43:31 UTC-4, Luis Ramon Lopez wrote:
Hi Nolan,

When I wrote the directive I just needed to format UNIX-timestamps. I
borrowed code from jQuery-timeago that is related to displaying, not to
converting between date formats, but it shouldn't be too difficult to fix.

I'll have a look ASAP.

Best regards,
Luis-Ramon Lopez

El 04/09/12 15:24, Nolan Dubeau escribi�:
Re: Contribution and request for comments: time-ago directive woody...@gmail.com 9/6/12 2:01 PM
I'm relatively new to AngularJS too but everything I've done and read it's much better to get angular to work things out for you DOM wise.

I like what you've done so far, good work.
Re: Contribution and request for comments: time-ago directive woody...@gmail.com 9/6/12 3:45 PM
I've done an example of a filter that does the same thing: http://jsfiddle.net/i_woody/cnL5T/  
It doesn't do live updating on the "page load time" but you can test the output with an input box.

Based on Luis Ramon Lopez's work.

Interested in people's thoughts on this one.
Thanks, Woody.
Luis-Ram�n L�pez


Re: Contribution and request for comments: time-ago directive Nolan Dubeau 10/1/12 9:41 AM
Hi guys,

I noticed an issue in my app where the live time ago value wasn't updating.  

I have created a plunker here - http://plnkr.co/edit/MBb3o3?p=preview  which represents how it's coded in my app.  I have an issue right off the start in plunker where I get NaN for the time ago value.  Any help on figuring that out is appreciated.  I do get a value in my app.  Secondly, (in my app) the value doesn't update.  I'm thinking this may has something to do with the fact the way my service is coded?  i.e using factory and $provide?  this is the main difference I see between Ramon's working example and my code.

I would appreciate someone's help on this to get the live updating working, and to understand why it's not updating.

Thanks very much!

Nolan 
Re: [AngularJS] Re: Contribution and request for comments: time-ago directive Pete Bacon Darwin 10/1/12 11:15 AM
Try removing this line:
              value = scope.timeago.nowTime-timeago.parse(scope.fromTime);


--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

Re: [AngularJS] Re: Contribution and request for comments: time-ago directive Nolan Dubeau 10/1/12 2:37 PM
Hi Peter,

Yes, that did help to get the plunker working.  I then realized that the date format used in the plunker was different than the one used in my app.  I have updated and now get the proper rendering for the time-ago variable.  Now, comes the second issue that I am having, which is the fact that the time-ago variables does not update live on the page. It only updates when the pages is refreshed. 

this is my primary issue and I feel it may have something to do with the way my service is constructed?

Any help is appreciated.

Thank you.

Nolan
Re: [AngularJS] Re: Contribution and request for comments: time-ago directive Pete Bacon Darwin 10/2/12 2:11 AM
Here is a working version: http://plnkr.co/edit/T7p4Xs?p=preview
I have refactored things so that you aren't trying to do too much in any one place.
There is now a nowTime service that simply returns the time at the moment updated every second.
I refactored the timeago service not to use "this".  There is no need and it means you have to jump through hoops with that ref variable.
I tidied up the directive - it doesn't need to have a scope at all.  All you are interested in is the value of the fromTime attribute and the nowTime value, which I check for using a the function form of $watch rather than the expression form.
Hope this helps.
Pete
Re: Contribution and request for comments: time-ago directive Andrew Joslin 10/2/12 5:22 AM
It seems like this would make more sense in a filter?

<span>{{loadTime | timeAgo}}</span>, versus <time-ago from-time="{{loadTime}}"></time-ago>
Re: [AngularJS] Re: Contribution and request for comments: time-ago directive Pete Bacon Darwin 10/2/12 5:29 AM
Nice but how would it update?  The binding will only be watching loadTime and not currentTime.

On 2 October 2012 13:22, Andy Joslin <andyt...@gmail.com> wrote:
It seems like this would make more sense in a filter?

<span>{{loadTime | timeAgo}}</span>, versus <time-ago from-time="{{loadTime}}"></time-ago>

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

Re: Contribution and request for comments: time-ago directive Andrew Joslin 10/2/12 5:42 AM
Wouldn't the $apply from the time service cause it to refresh?
Re: [AngularJS] Re: Contribution and request for comments: time-ago directive Pete Bacon Darwin 10/2/12 5:45 AM
Good point.  I'll give it a go.

On 2 October 2012 13:42, Andy Joslin <andyt...@gmail.com> wrote:
Wouldn't the $apply from the time service cause it to refresh?

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en.
 
 

Re: [AngularJS] Re: Contribution and request for comments: time-ago directive Pete Bacon Darwin 10/2/12 5:52 AM
Re: Contribution and request for comments: time-ago directive Andrew Joslin 10/2/12 6:17 AM
nice :-)
Re: Contribution and request for comments: time-ago directive no...@guard.ly 10/3/12 12:53 PM
Hey Peter,  Thanks very much for your re-work of this!  I was able to get it working with the live updating.  Great suggestion too Andy.

Thanks guys!  Much appreciated.

Nolan

On Tuesday, October 2, 2012 9:17:12 AM UTC-4, Andy Joslin wrote:
nice :-)
Re: Contribution and request for comments: time-ago directive Eddie Huang 10/4/12 4:22 PM
momentjs has similar functions http://momentjs.com/

(I would love to see angular implement more date/time features...)
Re: Contribution and request for comments: time-ago directive Andrew Joslin 10/5/12 7:59 AM
Here's a simple version using moment.js: http://plnkr.co/edit/7aQ08j?p=preview
More topics »