 Hi everyone. Welcome. We're very happy to be here today at the Microsoft Accelerators. Thanks again to Pradip to welcome us here. Where is he? He's not here. Okay. We started the round of flash talks. The first one is by Satish. We'll talk about the AngularJS animation. So you have 10 minutes to talk about that. Okay. I'll be timing you. Just let me know when to stop. Okay. Before I start, just have a quick show of hands and how many of you actually know about Angular? We've worked on Angular already. It's quite a bit right. I myself am new to it. So also a lot of the JavaScript thing. But I was very interested in how Angular is working compared to what I did in jQuery. So I started doing a couple of applications. It worked really good and real fast. Though for this particular ngAnimate, I'm not completely prepared because of the power outages in my house yesterday. And only this morning with the power comeback. In any case, since there seems to be quite a few people who don't know what I'm going to do is I'm just going to walk you through a basic Angular application and then how to quickly add ngAnimate to it. I hope you guys can see the code out there. So as with most apps, the way you do an AngularJS app is similar to the other things. First, you need to include the script. I've already got it downloaded here. Slightly weird typing at this angle. So once you have this set, I'm a little problem typing it from this angle actually. Do you know what I'm going to do? I'm just going to copy over from things that I already have just to make it easier. What I do have is a small script module where I've got my controller and the directives that allow me to see that or to put that in the view. Okay, now with these two things in place and after having defined this as an ngApp, I can see all the items in the list without having written any amount of code with manipulating the DOM. If you look at, if you compare the jQuery and other things here, I don't have any IDs. I don't have any classes on any of the elements. Just by putting the data directly into the scope, what is called a scope over here, this becomes a model and from this model I'm able to extract the data directly into the view. So I'm not doing any manipulation. I'm not looping through all the elements. I'm not doing a search for hash, dev, dot class or any of those things. I get all the data I want right there. Now the interesting thing is, let me do one other thing. I've added a class called big box over here just so that I can get a certain, you can just see it slightly bigger. Okay, that won't work. I'm going to add a style to the elements in the box just so that, you know, we can view it a little larger. Descript, go there. Add the style. Just forget the, this animate part will come to that soon. So now we see, there's not very much I've added a CS thing. It just looks larger. It'll be better for me when I do the animations later on. Now one interesting thing about Angular itself is how everything goes into the model and most of your code should be based on the model itself. What I'm going to do now is add an input field to the top of an app just so that we can filter the items. Okay, at this point, I will have a text box in which I can get some text by which I can filter the data coming up in the view. Since I copied the code, I would prefer to have done this incrementally, but right now, since I've copied the code, in the ng repeat, what I've done is taken one item each from the items, which is here within the scope, and the scope has a direct connection because in the same my control. See my control here. I see my control here. This scope and whatever is in there, in this case items, automatically becomes a part of that view or we can access it from within that view. Then what we can do is just by saying filter colon pattern, this pattern already part of the model because we've added to the model over here as part of the input, you can filter the items directly. I'll show you how it works now. If I type, say, HO here, it'll reduce the, it'll bring, you know, it'll filter those items. The animation is already a part of it right now, but again, like I would prefer to show it incrementally. The idea being again that you don't do much of the manipulation. The framework, AngularJS takes care of everything for you. Again, as you've seen, I've written very, very little code to filter the data. All I've done is added one element to the model, which is pattern, and filter the items based on that. You've not run through the loop of, you know, finding the items, doing all the query or the string pattern searching and index and all those kind of things. So this is absolutely easy. It's very fast to do this. Now the thing about animate goes like this. It's a new directive that is there in version 1.1.4 of AngularJS. So it is not stable yet. If you use Yeoman, it won't come down. You need to do this separately. You need to take it from the AngularJS or the Google CDN, which I've done already. It supports both CSS animations and JavaScript animations, but the CSS is much more cleaner, it's much easier to do. You have to use it with one another Angular directive. So for those people who've done it, who've used it before or not, or for those others, these are individual end directives like ng-repeat, ng-show, ng-hide. ng-animate does not work by itself. It works along with some of these directives. So you need to have that. And then you can just say, for example, in mine as an ng-animate, use myanim as the animation, the CSS animation. Then there are two items that you need to do. Myanim, enter setup, and leave setup. So the way it works is you just give this definition exactly in this syntax with myanim, whatever name you've given. And it says, at the beginning, this should be the setup. At the end, what should be the setup? And whatever transition that is there within that is automatically taken care of by Angular. Again, you're not doing much manipulation. Just saying, this is the beginning, this is the end, Angular, you figure it out. So these classes are automatically added by Angular at the beginning, at the end, but you can additionally, so you can see this already. When I do this, it does the transition automatically without, again, doing too much of the animation code itself. You can also increase that a bit or control that a bit in addition to say, at the beginning, when the setup happens, how should that animation start itself? So in this particular case, I have added another class .to enter setup. I've said enter start. How should that setup itself begin to work? This is how that works, since I've already got it there and it's going to show it to you. So you can see with just one additional directive, you're able to control how the setup part itself should behave. Similarly, you can do for a lot of other things. I don't know if some of the other things will work, but you can do a slide animation that's already there on the site and other very simple animations just using one directive engine. Thank you. So next is Arjun. He will talk about the node application he did. I will let you see more.