AngularJS Batarang

Kent C. Dodds: [00:00] This is AngularJS Batarang, and I'm going to show you a couple of useful things that Batarang gives you as you're developing Angular applications.

[00:08] First, we have this very simple Angular application. You have two-way data binding going on here, and a couple of things on the page. Here's an ng-repeat.

[00:20] Let's just look at the code for this application really quickly. You have your script tag, a title, and then you have your body with the ng-app and an ng-controller, and you can see we have a couple of controllers on here and a couple of bindings.

[00:34] We have our input with the binding. You have the greeting and the name, and you have another controller with some text and still another controller with some other text. You notice I am mixing between controller as syntax and simply the scope syntax. We'll look at what that means for our debugging and developing in a second.

[00:54] Then I have that repeat item and items, so here's the definition of our controllers. The main controller, we're using the controller as syntax. I'm assigning this to VM and assigning things onto VM. But I'm also injecting the scope in the main controller, and aliasing something onto the scope. We'll see what that means for us here in a little bit.

[01:14] Then the first controller is not using controller as syntax, just straight up scope. Then second controller is simply using the controller as syntax and assigning a couple of things on here and adding a bunch of items to the list, which outputs are example here.

[01:31] First thing after you install AngularJS Batarang, you'll want to go to your Angular application and you'll have this new tab here. There is a whole bunch of things that you can do here, but I actually regularly use most of these things, and so I never really need to enable this. Angular Batarang gives you a couple of things without having to enable in the AngularJS tab.

[01:54] If we go in here, you'll notice, let's pull this over just a titch. You'll notice we have a new pane over here called the AngularJS Properties. If you click there, it will follow along just like with our styles. It will follow along with what we are selecting, and you can see the scope of whatever it is that you have currently selected, which is really nice.

[02:18] We can see here,I have this element selected and this element's scope is displayed right here. The text is "I am first," I am first right there. It makes it very easy to discover "OK, so these are the properties on my scope, and this is what I have access to from my template." It just gives you a lot of visibility into the different things.

[02:45] Because we aliased our controller to be VM, we have that VM right here, and then we have all the properties on VM. If we go to our second controller, we have second right here, all the properties on second on that controller.

[02:59] Then there's a little bit more that we get from Batarang just out of the box as well, so let's open our console here. Now, we can actually just type $scope and you can see right there it auto-completes. We get that same scope for the element that is selected. We get the scope that you see here, and this is way cool.

[03:23] Let's go ahead and go up to this input. We have this VM.name. If we say scope.VM, and then we have the name. Now, let's update this to be John, OK. You notice it didn't update and that's because the digest hasn't run yet, so we say scope.apply, and now it's John.

[03:45] This all of a sudden becomes a very powerful tool. You can actually do anything that you would do in a controller directive when dealing with the scope. You can even do a broadcast, you can do an eval. Just pretty much anything that you care to do with the scope you can do right in your console just by selecting the element who is in the scope that you're interested in.

[04:11] Then you also have the scope inheritance. I'm here on my first controller. Or actually here, let's look at the scope above. We have a alertMe2. If I go to the first controller scope, you don't see that alertMe2, but we can see scope.alertMe2, and there we go. We actually also have scope.VM accessible there as well. Even though you don't see that in the properties here, and that's because there is inheritance with the scopes.

[04:42] So Batarang is a very powerful tool. Definitely recommend using it. I wouldn't recommend developing Angular applications without it.