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.
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.
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:
- 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-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.
AngularJS, Simply Put
AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. – angularjs.org
For me, and I’m imagining many others, Angular required a paradigm shift in the way I thought about application development. Angular doesn’t just allow you to manipulate the DOM. What angular does is allow you as the developer to extend the existing features of HTML and add on to the capabilities of the browser in a very slick way. Angular’s angle (ha!) is to control the view by inspecting the DOM for an injection point where you can hen create the features of your application. These injections can be objects that act as the logical control center for an existing tag like an <h1> or adding on attributes to that same tag. Angular also allows you to create completely new tags that can be used in you application. The result then become the components, views and logic of you’re application.
The point being is that now you have control over the features and functionality of the browser for your application. Understanding how your new features features are added to the browser, and how you can best structure your application to allow for simplified and maintainable development is the first step. The way I tend to think of it is that Angular is responsible for telling the browser what to do, you just need to provide the logic and data to allow it to do so. That is a very important concept to grasp with Angular – the data is what drives the application. You don’t, and shouldn’t, manipulate the DOM directly. You change the data, then it is up to angular to render the view correctly based on that data.
For example, instead of using jQuery (or angular’s jQLite) to manipulate the DOM to show some text or change a class, we change the data model. This change is evaluated and angular then updates and renders the view appropriately based on that changed data. You can see this in the sample below:
For me, it took some time to get it. But, once I did, I loved it!
Because of projects and personal interest, I’ve been working with AngularJS lately. A recent project needed a tab component to switch between views. The following is a simple prototype of the tab component that I created.
With a background in Flash and Flex it is interesting and exciting to have to change my perspective on how to create and use these types of UI components. Angular forces you to think about the structure of not just the components, but also the entire application in a different way. Before, I’d look to a component framework to provide the tab control. Now, these types of components seem to come together rather simply. So far, Angular is impressing me.