[SOUND] In the previous lecture, we spoke about dollar sign post link. And you saw how we were able to set up a watch for isCookiesInList. And then use jQuery in order to out put an error message on the screen. The reason we had to set up a watch in postlink is because our $OnChanges, our changes object, did not include any changes to the array. Even though we put more things into the array. Because OnChanges does not watch when elements are edited to the array. It's only watching the actual reference to the array itself. Now, as I was coding that example, I, myself, did not realize they were using a little bit of an older version of Angular 1. I was using Angular version 1.5.7. Now there's something that happened in 1.5.8. And that is that they put in one more lifecycle method as part of the component lifecycle methods. So right now, I'm located in the documentation for Angular 1. And it's docs.angularjs.org/guide/component. And just to make it more fun for us. If we click the 1.5.8 and scroll down to those life cycle methods. Let's take a look. You'll see that there is the onInit, the unchanges undestroy and post link. But were missing another method that actually works in 1.5.8. But its not listed in any documentation. So let's go back to the default one. Unfortunately, the snapshot documentation. And we'll scroll down to those life cycle methods. And we'll take a look. Because there's yet another method we have that is called dollar sign do check. And that's a method that gets called on each turn of the digest cycle. So, as a digest cycle executes, it will call this method with no arguments. And it tells you this hook is invoked with no arguments. And if detecting changes, you must store the previous values for comparison to the current values. So basically, you have to check them yourself. Okay, so that's what we're going to do. We're going to drop try to set up our own watch. Which just hooks in into the digest cycle. And instead, we'll use the standard life cycle method, called doCheck. So, let's go back to our code editor. And, if you see here, I created a new lecture. And right now, I'm locating lecture 33-1.5.8. And again, even though the documentation says this method doesn't exist, I tested it. And it actually works, so it certainly does exist. And this is exactly the same application we saw before. The only difference is I edited couple of things and removed couple of things, as well. Number one is, I edited this local variable to the ShoppinglistComponentController called totalItems. And that local variable toalItems is going to get initialized In the dollar sign on Init. So the total items I'm speaking of is the total items in our shopping list. So, on Init, it's going to initialize to zero. Now, we'll leave this dollar sign on changes. Even though it's not really going to be useful for us, just to see the console.log of it that it's happening. And what we did here, if you take a look, is we removed the dollar sign post link. We actually removed the dollar sign on destroy as well. Because we don't need it right now. And, instead of setting up a watch, we know that this gets called every time the digest cycle runs. And every time the digest loop is looping. So that means what we could do is we could ask, hey. If the control that items that link that array. Because our bindings watch only is looking at the items referenced itself. Its not looking at the items of the actual array. So, if we could take a look and see is the length of the array the same, or not the same, as the number of total items. If it's not the same, we need to remember the number of total items that is contained in the array right now. And since it changed. Obviously, because it's not the same, we're going to go ahead and invoke this cookiesInList method. And if cookies is in list, that's going to return true. We're going to have those same jQuery methods. And we're going to call in order to basically slide down an error message. And if total number of items is equal to the length of the array. Which means nothings changed on the list. We're going to go ahead and make sure that the error message slides up and goes away. Okay. And just to for our own sanity, let's put a couple of console log statements right here. So, the first one we're logging. We're going to log inside of this if statement. Which means that the total number of items is not equal to the link of the array. It means that the number of items change in our shopping list. Either it went up or went down. So, let's log and say something like, number of items changed, checking for cookies. Okay. So, that's going to be one log statement. Another log statement, if the cookies are indeed in the list, besides the error message, let's go ahead and log this On no cookies. And if there are no cookies, we'll log this here. And we'll say, no cookies, no cookies here. Move right along. Okay. So now we have a couple of console statements, or three console statements in here, let's save that. And one more thing, if we take a look here, we are not any longer using. The $scope. That's kind of a good thing. Because we really want to get away from using $scope. Now, according to the component architecture. Which is what actually is Angular 2 is all about. And components are part of kind of Angular 2 vision, $scope isn't something we want to depend on. So we're going to remove that from here. So, by having this do check method, we were able to eliminate our injection of the $scope. It's not the end of the world. Certainly, we're not in Angular 2. We're in Angular 1. But if you inject the $scope and start attaching properties to it. Which is a bad practice. This kind of opens up the window for that, if you inject it. So if it's not over there, then you stay away from it. So, let's go back to the browser. I already have my browser link working. So let's go ahead. Right here you'll see, it's going to print out our changes to begin with. But if we put Chips, and we'll put 3 bags of chips. When we add that, it says number of items changed. I misspelled change, but it doesn't matter. Checking for cookies. It says no cookies here. Move right along. So we're good. So if we put in cookies in here. Keep our three bags and put the cookies in. It's going to say no, cookies. And we need to scroll this down a little bit. We can see that the wording is there. So if I remove the cookies. Let me clear that. If I remove the cookies, again, it goes away. Number of items changed, no cookies here, move right along. The cookies are no longer a part of our shopping list. Okay. So just to summarize, this is just another way to hook into some life cycle events that are happening around the component. And one of them is doCheck. Which is what we use here. Which gets fired every time through the digest loop. Which gives you a chance to look into your bound items a little bit deeper. Or bound objects a little bit deeper, such that you could do kind of a much deeper check on things. Without having to set up your own watch. Which might actually slow things down a little bit more, in terms of performance. But either way, it's certainly a better practice. Since we can get away from injecting $scope. Which is prone to errors. Because somebody or some other developer. Obviously not you, because you know better. But some other developer might start attaching properties on a $scope, once it's available, and it's injected already. Okay, let's summarize. Components in AngularJS encourage component-based architecture. But they don't enforce it 100%. So we must follow conventions such that our architecture stays a component-based architecture. One of the main things in the component-based architecture is that components should never modify data or DOM that does not belong to them. That's why it always has isolate scope and well-defined API to give us the inputs into the component and the outputs. That it lets the component return the data to the outside world. The way you register component is very similar to how you re adjust the controller services, and so on. You provided the name. Except, the differences the second argument into the component function is not a factory function. But just the configuration object. Usually, we just provide an object's literal with properties. Controller, template, bindings, and so on. One of the properties, called controller, is for you to specify in what controller you want to use as the components controller. Only provide that if you are actually adding extra functionality. Otherwise, Angular already provides an empty function for us that is used as kind of an empty controller.
