Realtime "Eye Candy" with AngularJS

on YouTube ↗41m

" summary

Shows how to wire a demo AngularJS app to a realtime channel using Pusher, a Rails backend, and simple array ops (unshift, filter) plus scope.$apply so new users appear without a reload; uses ngAnimate enter/leave CSS transitions and a 50ms stagger to make adds/removes feel smooth (claims a 5,000% animation speedup in recent builds). Includes a working repo, unit tests that mock Pusher, Grunt tasks (grunt auto test launches Chrome), and end-to-end tests via Protractor with cross-browser runs expected via Karma + Sauce Labs.

AI-written summary · about

" chapters (11)

1. 0:00Introduction to realtime
2. 1:38Basic angularjs demo
3. 5:48Hybrid web applications
4. 8:46Integrating realtime
5. 12:30Realtime in practice
6. 16:14Why angularjs fits
7. 18:54Tools and techniques
8. 22:18Realtime app demo
9. 26:17Animations in angular
10. 29:03Unit testing
11. 31:27End-to-end testing and Q&A

" related talks

• 54mReactive Angular 2Rob Wormald · Jazoon TechDays Spring 2016 Bern
• 38mIntroduction to AngularJSShyam Seshadri · AngularJS Miniconf 2014
• 52mAngular Loves DataStephen Fluin · Devoxx US 2017
• 44mLively Applications with Angular AnimationsTimo Korinth · International PHP Conference Spring 2018
• 24mMotion Makes MeaningLukas Ruebbelke · AngularConnect 2017
• 32mThe Best of ngAnimate in AngularJSMatias Niemelä · GOTO Chicago 2014
• 32mReactive Animations Using AngularGerard Sans · GDG DevFest Ukraine 2017
• 18mYet another way to animate in AngularDouglas Duteil · ng-europe 2014