פינת המציאות

...

Something before we start...

HTML   

JS

CSS

HTML   

JS

Interface

Presentation

Logic

The angulr way

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

• option 1
• option 2

good...

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>

$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

OK - Let's do it

OK - Let's do it