Small Introduction to AngularJS

I know what you're probably thinking, "Oh, another JavaScript library/framework for me to learn." Well, yes, that's correct. However, I believe this is one worth learning. 

Why this one over the many other ones available to you? AngularJS has a different approach. Instead of providing a library, it's goal is to make HTML dynamic like most modern web sites are instead of being the old, boring static HTML we're all used to.

Of course, when you first see AngularJS in action, it can look pretty weird. That can be said of a lot of libraries, frameworks, or technologies until you get used to it. I was the same thing when I first started messing with lambdas in .NET.

Below is a small example for AngularJS mostly showing controllers and some basic data binding.

At first, you may notice all the ng-* attributes in the HTML. This is all AngularJS and, as mentioned above, it extends HTML to be more dynamic. The double curly braces ( {{ }} ) tell Angular that it's a two way binding. Inside the braces is the name on the model to use. You can also tell that most of the functions and properties are in the EmployeeController JavaScript file, which we'll take a look at next.

The first line tells what application Angular will be using. This is the same as the ng-app  attribute in the HTML. The empty array will be for any dependencies we may need, such as additional JavaScript files. The next section is where we're defining the actual EmployeeController, which sets our initial Employee object and defines the add and remove methods. These methods get called in their appropriate places inside the HTML. You may notice we also pass in the $scope object into our controller function. This is mainly for AngularJS and can be used for dependency injection later on, if you need it.

Below is the full demo in action. Note that JSFiddle automatically puts in the html tag, so I had to wrap the body tag with the ng-app attribute for Angular to work correctly.

Additional Resources

The one tutorial that got me started on the path of Angular is Dan Wahlin's AngularJS in 60ish Minutes.

Another good tutorial is the one from Thinkster.  They combine a lot of the articles and tutorials from all over and give them all to you piece by piece along with their own videos.

Conclusion

This was just a very  small introduction to AngularJS. While there are tons of other things you can do, this should be good to get something up and going. Once a little bit is understood, the tutorials and all will make so much more sense and you will be able to learn a bit more than you did before. Hope you enjoy learning AngularJS as much as I have!