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