PANAYA

Dev                      tuesday

06.01.2015

Thursdays

Fun fact of the day

Sherlock Holmes NEVER said “Elementary, my dear Watson”

פינת המציאות

...

Something before we start...

HTML   

JS

CSS

Presentation

Behavior

Interface

The old "EVAL" way

HTML   

JS

Interface

Presentation

Logic

The angulr way

CSS

{CSS}

CSS TRICK #1

there's only one for today

Use Font-Awesome ?

<i class="fa fa-cloud"></i>
=
=

O.K.

 

now make it transparent with blue border !

But font-awesome are in fact just fonts not images !!!

 

There's no "text border" property in CSS :(

Well... better get to work

good...

now change the color, move it to the right, 10px plus minus, add this text, but with different color... no ! not that color, I said different... have another square with dashed border around it, make it dance if not than make it feel cool, but not too much, we are still B2B and of course...

<html>

HTML5 - Cool feature we'll never use...

AUDIO

<audio autoplay="autoplay" controls="controls">
    <source src="http://www.tonycuffe.com/mp3/tail%20toddle.mp3" /> 
    <a>Download this file.</a>
</audio>

VIDEO

<video controls preload>
    <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" />
    <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
    <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p>
</video>

 

(javascript)

$jQuery

$scope.$apply

Let's start with some i'ntel first

Javascript is "turn based"

  • Think of message Q, event loop, etc.
  • each "turn" runs uninterrupted - no other JS code runs
    • poorly coded websites get forzen
 
var button = document.getElementById('clickMe');

function buttonClicked () {
  alert('the button was clicked');
}

button.addEventListener('click', buttonClicked);

function timerComplete () {
  alert('timer complete');
}

setTimeout(timerComplete, 2000);

turns

  • reading/interpreting this code is 1 turn
  • browser detects click on #clickMe - creates another "turn" which executes the event-handler
  • and so on...
  •  

How does angular knows when data changes

2 main strategies for change notification

function Ctrl($scope) {
  $scope.message = "Waiting 2000ms for update";
    
    setTimeout(function () {
        $scope.message = "Timeout called!";
        // AngularJS unaware of update to $scope
    }, 2000);
}

We are using "setTimeout", which will execute a function in a new turn after a delay.

 

Since Angular doesn’t know about that new turn, the update will not be reflected.

function Ctrl($scope) {
  $scope.message = "Waiting 2000ms for update";
    
    setTimeout(function () {
        $scope.$apply(function () {
            $scope.message = "Timeout called!";
        });
    }, 2000);
}

But, if we wrap the code for that turn in $scope.$apply(), the change will be noticed, and the page is updated.

as a convenience, AngularJS provides $timeout, which is like setTimeout, but automatically wraps your code in $apply by default. Use that, not this

$scope.apply vs $scope.apply(fn)

function() { //.. some code that gets executed out side of angular
   $scope.me = you
   $scope.$apply()
}

Don't do this:

function() { //.. some code that gets executed out side of angular

   $scope.$apply(function() {
      $scope.me = you;
   });
}

Do this

why ?

  • Good practice
  • Exception handling
    • If your code throws an error - it will fail outside Angular !
    • We extend Angular mechanism to report issues back to Panaya
  • more reasons I can't think of as I'm too tired...

DIRECTIVE 101

WHY ?

  • Because you can
  • First RULE of coding - DRY
  • get good @ AngularJS
  • modularization
  • Avoid DOM manipulation

PANAYA - KNLG-SHRNG - 06/01/2015

By Amir Gal-Or

PANAYA - KNLG-SHRNG - 06/01/2015

  • 853