MultiValue AngularJS Demo Application

AngularJS is a popular client-side JavaScript MVC framework that can help you build powerful web and mobile applications. One of my sessions at the recent MultiValue University introduced and explained AngularJS and then we built a web application from scratch to see how quickly you can get started.

Integrating With MultiValue

The main intent of the session was to introduce the audience to AngularJS and build a practical example from scratch in 30 minutes.

Angular Application Screenshot

Angular Application

The start page is a simple task tracking application that was driven by a static JSON data set for simplicity. However, it’s easy to grab dynamic data from a MultiValue source by using a REST service, which is demonstrated by clicking on the “Guitar Demo” link on the upper right nav. This data was generated by a public U2 RESTful Web Services server working with a UniVerse database. Both UniVerse and UniData can easily generate REST services using this U2 RESTful Web Services Developer. D3 can similarly generate REST services with the MVS Toolkit.

The code below highlights how easy it is to interact with MultiValue data that is exposed as REST JSON data. The URL in the $http.get was the only thing that needed to change from the base application to get our dynamic information from a database (aside from some cosmetic changes to reference guitars rather than tasks). The JSON REST service allows you to start working with the response as an object in your model, and the magic of AngularJS does all the binding for you to build the user interface.

  $scope.getGuitars = function() {
    $http.get('http://seagulldemo.rocketsoftware.com/IOD/Guitars').
      then(function (response) {
        $scope.guitars = response.data.Products;
      }, function(response) {
        alert(response.data.error);
      });
  };

See it Live on Plunker

Plunker is a handy online editor great for creating, collaborating on, and sharing your web development ideas…and it’s free to use! I chose to build my presentation demo in Plunker so that anyone could go there immediately and see how it’s done and even start enhancing it if you wanted. Plunker gives you a live preview look of your application as you are building it, so it’s really easy to create and experiment.

Here is the link for the demo application, please go check it out and start exploring how it’s built!
http://plnkr.co/edit/QjRho6

If you want to start editing the code from this public Plunk, click on the “Fork” button on the top navigation to get your own copy and then you’re off and running!

AngularJS Framework Changes

This demo was built with the 1.4.2 version of AngularJS, which was the stable version at creation time. However, there are big changes coming to the framework in version 2 which are not backward compatible with some stuff from previous versions. So, depending on when you are reading this, just be aware that things might have changed quite a bit and version 2 could now be the best way to build new applications.

The following two tabs change content below.
Michael Byrne
Michael Byrne is the Rocket MultiValue Evangelist for the Rocket U2 and Rocket D3 family of software.
Michael Byrne

Latest posts by Michael Byrne (see all)

, , ,

No comments yet.

Leave a Reply