AngularJS – Getting Started & Binding

angularIs it just me or does it seem like every time you turn around there’s a new Javascript framework popping up.  Backbone, Node, Ember; they all seem to have really strong fan bases, but the one that’s really peeked my interest lately is Angular.  Created by our friends at Google, the open-source framework integrates almost seamlessly into your HTML, making the ever popular SPA (Single Page App) a piece of cake to make.

Before Diving in, make sure you’re comfortable with HTML, CSS, Javascript and the MVC (Model, View, Controller) structure.  It’s worth it to pause and do a few tutorials in any of these areas you feel particularly shaky on before taking the plunge.  Trust me, it will make it much easier to follow along.

Setting up your HTML:

There are two things you’ll need to add to your HTML before you can start using Angular.  First you’ll need to include the script,  whether you download it and relatively link it, or link directly to the Google CDN is up to you. but make sure you use the most up to date version.  Next you’ll need to include “ng-app” in an element that wraps  all of your code, the html, body or outermost div are all recommended. When you’re done it should look something like this:

<html ng-app="">
<head>
  <title></title>
  <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
</head>
<body>
  <div>
  </div>
</body>
</html>

Binding:

A basic concept to understand in Angular is binding, and it’s a good a way to start getting your hands dirty with its features. Say you wanted to have a user input some information that immediately gets displayed on the browser. You would do so like this:

<html ng-app="">
<head>
  <title>Binding in Angular</title>
  <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
</head>
<body>
  <div>
    Please enter your name: <input type="text" ng-model="name">
    <h1> Welcome, {{ name }} </h1>
  </div>
</body>
</html>
</body>
</html>

 

There a few things to pay attention to here:

  • Creating a model/view/controller is as easy as typing ng-… and setting it equal to a string.
  • Evaluations written to the browser will go between two curly brackets {{ }}.

Go ahead and play around  with creating your own bindings,  what happens when you put math equations inside your double brackets?

Other Resources- Angular docs are notoriously unhelpful but here are a couple of sites you should check out:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>