Contribution and request for comments: time-ago directive

[Luis Ramón López]

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

[Marco Rinck]

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

[Marco Rinck]

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

[Luis Ramón López]

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.
>
>

[Nolan Dubeau]

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

[Jorge Sousa]

Nice one, 

Thanks 

J

--
-------------------------------
Jorge Sousa

[Nolan Dubeau]

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

[Luis Ramon Lopez]

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�:

[Nolan Dubeau]

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�:

[woody...@gmail.com]

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.

[woody...@gmail.com]

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

[Nolan Dubeau]

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 

[Peter Bacon Darwin]

Try removing this line:

              value = scope.timeago.nowTime-timeago.parse(scope.fromTime);

[Nolan Dubeau]

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

[Peter Bacon Darwin]

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

[Andy Joslin]

It seems like this would make more sense in a filter?

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

[Peter Bacon Darwin]

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>

--

[Andy Joslin]

Wouldn't the $apply from the time service cause it to refresh?

[Peter Bacon Darwin]

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?

--

[Peter Bacon Darwin]

http://plnkr.co/edit/T7p4Xs?p=preview

[Andy Joslin]

nice :-)

[no...@guard.ly]

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 :-)

[Eddie Huang]

momentjs has similar functions http://momentjs.com/

(I would love to see angular implement more date/time features...)

[Andy Joslin]

Here's a simple version using moment.js: http://plnkr.co/edit/7aQ08j?p=preview