[SOUND] In part one of this lecture, we saw how the Digest Cycle works in theory. In part two of this lecture, we're going to dive in into the code and see a bit of a practice of how this actually gets implemented. I'm located in lecture 14 which is located in Fullstack-course5/examples folder. In here, I have a very simple AngularJS app set up. It's called CounterApp. And I have one controller called CounterController. So far, all we have really in our page is a button that has a ng-click bound to this function called show/NumberofWatchers( ) function. And if we go to the browser, nothing's actually going to happen, because we haven't implemented that function yet. So let's go ahead and go to app.js and see that we already have the stub for this function here. And for now, all we'll do, is we'll do logging of just the scope itself, the scope service. If we go back to our page and click number of watchers, you'll see that the scope service or the scope object was output in the console. So let's take a look inside of it little bit. So one of the things we see here, you could see our show number of watchers function but there is something else here. You see $$watchers, and that's an array to this point is simply null and you see another $$watchersCount and that's a count of how many objects are there in this watchers array. They could see right now it's still zero. Now the $$ the double $ is always indicative of something that is internal to AngularJS. Which means you should never interact with this directly. However in this lecture we will interact with it directly just to see what is going on behind the scenes. Since we are really need of this entire object, we just need the number of watchers count. We'll go ahead and modify our code to say $scope, $scope, dot, $$watchers count? And maybe we'll even put a little label here number of watchers. Okay, so if we save that and go back and click this button now. Now we see number of watchers is zero. For now, let's go back to app.js. The clear property on scope called onceCounter. And we'll equal it to zero to start. Now index html will create a button which I cut and pasted from before that's going to have an ng-click bound to it. With a function called "countOnce" that is obviously going to has to seat on the $scope. So let's save that, we'll copy this and we'll go back to our app dot js and we will actually create this function on a $scope. We'll create count once, that is going to be a function within the name, and no man function is going to do is assign one to our one's counter. When we save that and go back to our browser, we see that before we click little number of watchers at zero. After we click once counter, so now our once counter is equal to one, we click the number of watchers again and it is still zero. So that didn't really affect the number of watchers we have. To setup the watchers there's a couple of ways to do that. One way of doing it is doing it manually. For that there's a special function on the scope service called $watch, and it takes two arguments. The first one is the name of the property we want to watch. In this case is onceCounter and the second argument is the function that is going to watch these arguments which has two values, newValue and oldValue pass to it by the Angular context. So if we go ahead and log that now will say, old value and it's oldValue and we'll do it again and saying this time will say, new value, newValue, if we save that now. So now, we've set up a watch for our onceCounter, if we go back to our app, you'll see that second we refresh the page, we already see the old value being zero, and the new value being zero, meaning something has already has executed one of our watchers. If we could the number of watchers right now, you'll see that the number of watchers is now no longer zero it is one and if we click the up once counter, you'll see that our watch gets triggered and the old value is zero but the new value is one. If we click to number of watchers, still one. And if we keep clicking this up one counter, you'll see that nothing else is showing up. Well, the reason it's not showing up, the reason the old value and the new value is not being printed out anymore is because we only update this once. And once we update it once, our watch no longer sees the onceCounter as changing, and therefore this function is no longer firing. However, we could declare another property, and we'll call it scope.counter, and we'll also start it with a zero, and this time we'll create a handler that when a button gets clicked, this property gets incremented by one every time. So let's go ahead and place this right here, we'll say scope.upcounter = function, and again we'll need the name. We'll go ahead and say scope.counter and we'll say just ++. Let's save that, and then provide another button right here, we'll just copy this one, and this time we'll say upCounter and we'll say Increment Counter. We'll save it. Let's go back to our page. As you could see, the Once Counter when it got initialized, got its value of zero and the new value of zero before there was no value. And if I say Increment Counter now, you'll see that nothing is really going on a page if I say number of watchers it's still one. Well it's because we haven't really setup a watch for counter number two. Lets go back to our app.js and actually setup a watch for our counter property. We'll go ahead and just copy that watch, we'll paste it in this case its just going to be just counter and we'll see its new and old value. Let's save that and now you see the old and new value being printed out twice. We probably should differentiate and say this is counter old value and counter new value so you could see it better and this is onceCounter old value and onceCounter new value, let's save that and now you could see that onceCounter old value, onceCounter new value, counter and then counter new value. If we click the number of watchers now, you'll see that now there's number of watchers as two and if we increment the counter, you'll see the first time it says counter all values zero, one, click it again. Now it's for all value one, two. And if we keep clicking it's going to keep changing every single time. So, in part two of this lecture, we've learned how to set up watchers manually using the $watch function. In part three of this lecture, we'll see a couple more of mechanisms that let us tell AngularJS to set up this watchers for us.
