Getting Started

AngularJS is a JavaScript framework that provides lots of solutions to many of web development’s problems. This isn’t to say that it is the end-all-be-all of web development tools, but it does provide a great jumping off point for your web application.

There are a few things that you’ll need to wrap your head around before jumping in full force but let’s take a quick look at the basics with the following super-simple web application.

HTML

Nothing in the HTML should surprise you. We’re working with a few HTML tags, attributes and a bit of “templating”. If you’re not familiar with things like HandlebarsJS, check it out – not that it has much to do with AngularJS, but it is useful to know about.

JavaScript

We haven’t written any JavaScript. We’re only including the angular.min.js script in the fiddle.

And what have we gained? Well, admittedly the sample application isn’t overly useful or exciting. We are, however, leveraging a couple of the main concepts of Angular with this sample:

1. Model/view/controller (MVC): Your HTML template is the “view”. That view is affected by Angular’s model, called the scope. The scope is kind of hidden in this example, but you’ll become very familiar with scope as you work more with Angular.
2. 2-way binding (wha?!?!): A “super feature” of angular – when we type into the text field, the text value of the H2 updates as we type.

For those of us who aren’t so good with delayed gratification, then this sample is pretty great. But, this is only the beginning. AngularJS has so much more to offer. We’re starting with small steps & keeping it simple…for now. There will be plenty more AngularJS to follow.