Navigation

An introduction to AngularJS

By Steve Ralston | JavaScript, Web Design | Apr 10, 2013

When I came across AngularJS a couple weeks ago, I was intrigued at first. By the time I had worked through the set of tutorials available on the AngularJS website, I was thrilled to have found this framework.

What is AngularJS? AngularJS is the (relatively) new kid on the coding block. To quote from their website it is “a structural framework for dynamic web apps” which is especially well-suited for building one-page web apps, although it’s certainly not limited to that.

Developed in 2009 by Miško Hevery and Adam Abrons — both Google employees at that time — it is entirely JavaScript and entirely client-side, so anywhere JavaScript can run, AngularJS can run. It’s also small: compressed and minified it’s less than 29 kb. And it’s open source under the MIT license. You can even use the logo, available under the Creative Commons Attribution-ShareAlike 3.0 Unported License.

According to Wikipedia the goal of Angular “is to augment browser-based applications with model–view–controller (MVC) capability” and it does just that, providing a binding/MVC framework. That’s two-way binding, mind you. Delicious. With a structure as simple as {{ my data }}, you bind data to your page. The $scope service detects changes to the model and modifies HTML expressions in the view by way of controllers. Working in the other direction, changes to the view are reflected in the model. This removes the need for the vast majority of data-centric DOM manipulations many of us, myself included, take for granted when working with a library like jQuery.

Angular runs right out of the box with no library dependencies, although it can be extended with the many modules that are available, and of course you can build your own to fit your specific needs. Being pure JavaScript, it also has the benefit of being server-agnostic.

Being accustomed to a powerful library like jQuery, it’s easy to want to mix it in to do things Angular can already do. Recognizing this potential pitfall, the developers have this to say: “If you’re struggling to break the habit, consider removing jQuery from your app. Really. Angular has the $http service and powerful directives that make it almost always unnecessary.” One thing is for sure, if you stick to Angular, the jQuery loops and explicit back-and-forth with the server will be absent from your code, since Angular provides such a succinct and clean method of achieving the same things.

 

Directives

Angular uses directives to plug its action into the page. Directives, all prefaced with ng-, are placed in html attributes.

Some common directives that come pre-built with Angular are:

ng-app: this is essentially the initial entry point of Angular to the page. It tells Angular where it gets to act. <html ng-app> is all it takes to define a page as an Angular application.

ng-bind: changes the text of an element to the value of an expression.
<span ng:bind=”name”></span> will display the value of ‘name’ inside the span. Any changes to ‘name’ are reflected instantly in the DOM anywhere the variable is used.

ng-controller: specifies the JavaScript class for the given action. Controllers are typically kept in external .js files.

ng-repeat: creates the very clean loop structures in your page.

<ul>
<li ng-repeat="item in items">
{{item.description}}
</li>
</ul>

effortlessly loops through each item in the collection.

I haven’t used them yet myself, but I have read that creating custom directives can be a tricky issue, something that takes some time to wrap your head around. Angular offers a video to help clarify the concept.

 

Some sample code

As mentioned before, the ng-app directive in the <html> tag sets the stage for Angular to run in the page.

<html lang="en" ng-app>

Add <script src=”your/path/to/angular/angular.js”></script> to the page head to bring in the Angular framework itself.

<script src=”your/path/to/js/controllers.js”></script> points to the external JavaScript file or files that hold the JavaScript classes your Angular app will call. A very simple class, as an example, might be:

function ItemListCtrl ($scope) {
$scope.items = [
{ "description": "coffee pot" },
{ "description": "nerf gun" },
{ "description": "phone" },
];
}

Passing ng-controller “ItemListCtrl”, the name of my imaginary JavaScript class, tells Angular what code to run:

<body ng-controller="ItemListCtrl">

and double-bracket notation tells Angular what expressions to evaluate.

ng-repeat is a wonderfully succinct repeater directive that loops through the current collection and does the specified action or provides the specified data. It is so simple and clean.

<p>Stuff on my desk:</p>
<ul>
<li ng-repeat="item in items">
{{item.description}}
</li>
</ul>

This simple set up will display:

Stuff on my desk:
coffee pot
nerf gun
phone

Admittedly, that doesn’t seem so impressive, but the idea itself is. Very simple page markup and controllers make getting started with Angular, well, very simple.

Getting real data into your app is pleasingly simple too. Angular likes to consume JSON:

function ItemListCtrl ($scope, $http) {
$http.get(‘items/list.json').success(function (data) {
$scope.items = data;
}
}

This returns a JSON object that can manipulated at will in your Angular app.

 

And it’s built for testing, too!

One of the basic tenets Angular was founded on was that apps built with it be fully testable. For end-to-end testing we have Angular Scenario Runner to simulate user interactions with your app. You feed it scenario tests written in JavaScript.

For debugging in the browser, AngularJS Batarang is a Chrome extension available on github.

 

Resources

As AngularJS gains more traction, more resources will become available, but there are already a number of sites that provide instruction and ways of extending Angular.

The AngularJS site itself, is of course your definitive source. They offer rock-solid, simple tutorials and have a fairly active Google+ presence.

There are a number of Angular repositories on GitHub.

Angular Modules, offers a collection of user-submitted modules, from Backbone services to Rails integration.

 

Have you used AngularJS yet? How does it compare to much larger libraries like jQuery? Let us know in the comments.

Featured image/thumbnail, angle image via Shutterstock.

Share this post
Comments (no login required)
  • dissapointed

    why text selection on your webpage is invisible? it is extremely irritating.

    • axel_kevlar

      Change your monitor’s brightness.

      • dissapointed

        Page is called webdesignersomething and users have to change monitor settings to have content presented correctly? Hmmm maybe I am old fashion but I thought it should not look like that.

        And being serious try to select first sentence on FF 19.0.2:
        “When I came across AngularJS a couple weeks ago”
        Are you able to set your monitor to be able to see the selection?

        Edit: Now I can see that when I select that sentence, then go comment to put focus on comment box, highlight appears even in FF

      • axel_kevlar

        The selection is visible in every browser. I’m sorry. You have a bad monitor.
        Background color: #FFFFFF
        Selection color: #EBEBEB

      • dissapointed

        Have you tried to do so? I checked it on two computers (with two different OS, on FF & Chrome). So it is not a problem with single machine (and obviously not with monitors ;)
        Select mentioned sentence and click on address bar – selection is visible. Select the same without losing a focus from first paragraph – selection is invisible. Moreover during the selecting selection is also not visible.

      • http://eddiemonge.com Eddie Monge

        take a screenshot so we can see

  • http://about.me/umairp Umair H. Peracha

    Looks very nice.. So far, I had only heard of the name “AngularJS”. Your post is a good starting point to further explore Angular.js

  • Steve Ralston

    Bruno, thanks for your input. I think the point you make is exactly the kind of thing we’re looking for: what do you think of the two, how do they compare, how can they be used in different ways?

  • http://www.facebook.com/larry.southern Larry Southern

    Hi- am a big fan of angular, but in general comparison with other Frameworks I find it a little husky- 80kb as of 1.0.6. Where is this 29k version you mention here? Is this size on the disk, or with http compression? thx.
    “It’s also small: compressed and minified it’s less than 29 kb”

  • http://eddiemonge.com Eddie Monge

    When talking about the bind directives, is this a typo:
    span ng:bind=”name

    Should it be ng-bind instead?

  • André Mendes

    Thank you do much! For 2 days I was trying to bind a value and show it outside “” but I wasn’t having success, until now that I saw your article and tried ng:bind, this works anywhere and that’s awesome.

    Thank you again!

    • Steve Ralston

      Sweet, glad to help!

  • Learner

    Your overview of angular is a lot easier to understand, compared to the other sites I have visited. Simplicity at its best, while the other sites just want to show-off the author’s “knowledge.”

    • Steve Ralston

      Really glad to hear that. I had just discovered it myself, so I couldn’t get too full of myself :-)