Scope.js
A mini framework
Introduction
What do you think is the nucleus of angular?
What problem is scope trying to solve?
separation of concerns
-Scope attempts to ensure/helps in maintaining
proper separation of concerns between the
model and the view.
-It helps in sharing of data between different
parts of application.
-watching for changing in data.
Dirty-checking mechanism
Angular implements a dirty-checking
mechanism,using which you can get notified
when a piece of data on a scope changes.It is
also the source of data-binding.
Scope object
a plain-simple javascript object.
function Scope() {
}
$watch and $digest
This is where the magic happens
$watch
with $watch we can attach a watcher to a scope.
we create a watcher by providing two functions to $watch
1)A watch function() which specifies the piece of data you
are interested in.
2)A listener function() which will be called whenever the
data changes.
$digest()
It iterates over all the watchers that has been
attached on the scope,and runs their watch and
listener functions accordingly.
triggering chained watches in the
same digest()
the listener functions themselves may change
the property on the scope,if this happens and
there is another watcher looking for the
property that have just changed,it might not
notice the change during the same digest pass
the unstable state
what happens if there are two watches looking
at change made by each other?
Performance characteristics
Every time a $watch is called on the scope or a
value is bound from DOM with interpolation(ng-
repeat,ng-switch,ng-if,or any other dom
attribute a function gets added to
$$watchers),so always remember to unbind the
watchers.
Thank you
About me:
A javascript frontend developer
twitter:@atishaybaid
github:@atishaybaid
blog:atishaybaid.com

Scope.js prsentation

  • 1.
  • 2.
    Introduction What do youthink is the nucleus of angular?
  • 3.
    What problem isscope trying to solve? separation of concerns -Scope attempts to ensure/helps in maintaining proper separation of concerns between the model and the view. -It helps in sharing of data between different parts of application. -watching for changing in data.
  • 4.
    Dirty-checking mechanism Angular implementsa dirty-checking mechanism,using which you can get notified when a piece of data on a scope changes.It is also the source of data-binding.
  • 5.
    Scope object a plain-simplejavascript object. function Scope() { }
  • 6.
    $watch and $digest Thisis where the magic happens
  • 7.
    $watch with $watch wecan attach a watcher to a scope. we create a watcher by providing two functions to $watch 1)A watch function() which specifies the piece of data you are interested in. 2)A listener function() which will be called whenever the data changes.
  • 8.
    $digest() It iterates overall the watchers that has been attached on the scope,and runs their watch and listener functions accordingly.
  • 9.
    triggering chained watchesin the same digest() the listener functions themselves may change the property on the scope,if this happens and there is another watcher looking for the property that have just changed,it might not notice the change during the same digest pass
  • 10.
    the unstable state whathappens if there are two watches looking at change made by each other?
  • 11.
    Performance characteristics Every timea $watch is called on the scope or a value is bound from DOM with interpolation(ng- repeat,ng-switch,ng-if,or any other dom attribute a function gets added to $$watchers),so always remember to unbind the watchers.
  • 12.
    Thank you About me: Ajavascript frontend developer twitter:@atishaybaid github:@atishaybaid blog:atishaybaid.com