Getting started with AngularJS

 

 

Index:

  1. Getting started with AngularJS
  2. Creating an AngularJS Controller
  3. The AngularJS $scope is not the MVC Model
  4. Using repeating elements in AngularJS
  5. Filtering the data in an AngularJS ngRepeat element
  6. Using the AngularJS FormController to control form submission
  7. Creating an AngularJS Directive
  8. Using the DOM in an AngularJS application
  9. To SPA or not to SPA
  10.  

 

One of the nicer JavaScript frameworks out there to work with must be AngularJS. Now there are quite a few other ones out there and I have used a number of them but AngularJS seems to be the most structured of them. And while it is really powerful it is also really easy to get started with.

AngularJS is a client side framework for creating rich web applications using JavaScript and HTML. It isn’t just a library like jQuery or Knockout.js where you create the structure and call into the library as you see fit. With a framework like AngularJS it is the other way round and it calls into your code. This means you have to like the way it is designed but fortunately AngularJS is pretty flexible so that is not a big penalty to pay. In fact it is more of a benefit as it helps structure your application in a good way.

 

The simplest AngularJS application

Below is pretty much the simplest AngularJS application you can make. Maybe not very functional yet but is shows a few of the very important parts.

 

image

So what does it get to display a “2” on the screen? Well first of all the “2” isn’t a literal but actually a result of adding 1 + 1 together on the client. So this is already a “somewhat” dynamic HTML/JavaScript application. The complete code listing is below.

 

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7:     <body ng-app>

   8:         {{1 + 1}}

   9:         <script src="Scripts/angular.js"></script>

  10:     </body>

  11: </html>

 

There are a few interesting things to note about this.

First of all there is the required script reference to angular.js. Either download this from the AngularJS site or use the NuGet package to add it to your Visual Studio 2012 project. No big new thing here.

Unlike with libraries like jQuery which we load using a similar script tag and then call the jQuery $() function whenever we want to things work a little different with AngularJS. In the case of a framework like AngularJS we let it do it’s work. With AngularJS we need to either do an automatic bootstrap or do so manually. The automatic process is by far the easiest and all we need to add for that is the ng-app attribute to some HTML element. In this case I added it to the <body> element so the whole page is an AngularJS application. If you prefer you can add it to a sub section of the page.

The last interesting part if the {{1 + 1}} part inside the body. The {{}} part is a data binding expression AngularJS will evaluate for us and display the result. In this case we are just adding two numbers but as we will see later we can do far more with this.

 

Making things interactive

The previous example is nice but I could just as well have hardcoded the value “2” in there. So lets make things a bit more interactive and have the user enter two numbers we can multiply.

 

image

The complete code needed for this is not much harder see below.

   1: <!DOCTYPE html>

   2: <html lang="en">

   3: <head>

   4:     <title>AngularJS Demo</title>

   5:     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

   6: </head>

   7:     <body ng-app>

   8:         <input type="text" ng-model="x"/>

   9:         *

  10:         <input type="text" ng-model="y"/>

  11:         = {{x * y}}

  12:         <script src="Scripts/angular.js"></script>

  13:     </body>

  14: </html>


 


 


The new thing in this example is that we have two <input> controls with an ng-model attribute. These ng-model attributes are used for two way data binding input controls with data used by AngularJS. In the expression below {{x * y}} we multiply the two numbers added. And with this interactive calculator we still had to write no JavaScript, the closest we came to writing code is a single data binding expression in the HTML.


 


Sweet :-)

One thought on “Getting started with AngularJS

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>