AngularJS – A crash course – in processing AJAX JSON

I’ve recently started using AngularJS http://angularjs.org/ . It’s very impressive. It’s extremely useful for handling/processing AJAX JSON results.

This blog demonstrates the following:

  1. Setting up an AngularJS “application”.
  2. Binding (dynamic) JSON data to the view. I.e. processing an AJAX callback.
  3. Invoking an AngularJS Controller function externally from outside the AngularJS scope.

 

  1. The above is demonstrated with a simple html page that loads some JSON asynchronously (using AJAX). The code is available for download below.
  2. The result is something of a crash course on AngularJS.

Setting up an AngularJS “Application”

The Demo

  • This demo simply retrieves JSON via an AJAX call.
  • Angular JS renders the data according to the template defined in the HTML.
  • The AngularJS “directives” allow event handlers on the elements to be automatically applied when data is retrieved.
  • Other seemingly static data on the page is automatically updated intuitively by angular JS when the JSON is returned.

Declaring the Application

An element on the page must get the attribute ng-app

In this case, the name give to the angular-application is “productListApp”

There can  only be one application per page.

This corresponds to the application declaration in the JS:

var app = angular.module(‘productListApp’, []);

Declaring the AngularJS Controller

In the HTML, inside the ng-app declaration, declare a controller by applying the ng-controller attribute element.

ng-controller=”ProductCtrl”

This corresponds to the controller declaration in the JS.

app.controller(‘ProductCtrl’, function($scope) {….});

Declaring event handlers on the data within the application using a “directive”

The purpose of this is to apply event handlers to targeted elements within the         ng-application

Even when these elements are replaced on the page dynamically, AngularJS makes it effortless to reapply those event handlers by using the $scope.$apply facility.

 

The HTML template

 

 

The JS

Note:

When the JSON is returned the $scope.$apply facility is used to dynamically apply the updated data.Consequently, the two controller functions:

 

In the success handler function of the AJAX call the data is simply reassigned. AngularJS takes care of the rest. I.e. updates everything in the html:

 

The iterator declarations in the code should be somewhat self explanatory. Note however that the update is recursive:

 

Invoking the Controller from inside

This element: <button ng-click=”getProducts()”>Get Json</button> is inside the ng-controller and therefore invokes the controller function getProducts() by using the ng-click attribute.

Invoking the Controller from a external source

This is achieved by first gaining access to the $scope object which is done as so:

 

Now to invoke a Controller function, use the $apply function as so:

 

 

That about covers the key points….. A crash course on AngularJS

Download the example and play around with it. The download has no dependencies, it’s just html, js and a .json file. Try it in IE or Firefox. Any errors are due to accessing the .json file locally, these don’t affect the general functionality and have nothing to do with AngularJS.

Accessing the JSON file locally does not work on chrome due to this reason: http://stackoverflow.com/questions/3595515/xmlhttprequest-error-origin-null-is-not-allowed-by-access-control-allow-origin

 

Download:

AngularJSIntroduction

 

For more info, see http://egghead.io/ for a bunch of excellent video tutorials.

If you need AngularJS to work in IE7, here’s some info: http://gpiot.com/angularjs-on-ie7-not-working-how-to-fix-it/

 

1 Comment