Angular JavaScript Framework: MVC Simplified in HTML5

At VMworld 2013, I bumped into my former colleagues at VMware who work on the new vSphere Web Client. Faster than I thought, the new vSphere Web Client started to support HTML5 partially with Angular JavaScript Framework. I haven’t looked into the details but that is something the community should be excited about.

To ready myself for the further exploration, I spent a little time to study the Angular JavaScript Framework. At the first impression, it looks a lot like Java Server Page (JSP) or Microsoft Active Server Page (ASP) but on client side. It cleanly separate the view from the model via controller. I think it works the way it should be, finally.

Lost VMs or Containers? Too Many Consoles? Too Slow GUI? Time to learn how to "Google" and manage your VMware and clouds in a fast and secure HTML5 App.

Overall I think it fits into the category of client templating which has been hot. A while back I looked another templating framework called dust which LinkedIn had adopted. Between these two, I think the Angular framework is easier to use.

Like any other client side templating technology, the data or model is feed from outside of HTML. Unless there is a deep search technology that reconstructs the final HTML page content, or simply index on the content/model (which may be easier to implement), the HTML pages will probably not be searchable. This may be a big problem for public Web sites, but not at all for Web applications that manage internal IT infrastructure.

Set up environment

You can write JavaScript and HTML with any editor, but for higher productivity you may want to consider an IDE which has better support on the JavaScript/HTML5. On the commercial tool side, the WebStorm from JetBrain is a clear leader with lots of good features for a reasonable price tag. It offers one month free trial tool. I really like its refactoring feature.

If you are not yet committed to buying an IDE, you can try the free NetBeans which has great support for HTML5/JavaScript editing. For debugging, you want to download Chrome browser and the NetBeans Connector so that you can have interactive debugging. I tried the refactoring features there and some of them did not work. There is always a good reason to buy commercial products like WebStorm. But for general development NetBeans should be more than good enough.

Basic concept

The basic idea of the Augular JavaScript is the same as JSP even though they run on different side of brower and server: to separate the view and model via controller. Here the view is the HTML page and the model is somewhat hidden with real data but transparent with schema. To get the data, a controller backed by JavaScript must be explicitly defined.

The following is a simple example that illustrates the idea.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html ng-app>
  <head>
    <script src="lib/angular/angular.js"></script>
    <script src="js/controllers.js"></script>
  </head>
 
  <body ng-controller = "VmListCtrl">
    <p><strong>Total number of VMs: {{vms.length}}</strong></p>
    <table border="1">
      <tr ng-repeat = "vm in vms">
        <td>{{vm.name}}</td>
        <td>{{vm.desc}}</td>
      </tr>
    </table>
  </body>
</html>

The html tag has to include ng-app so that Augular can change it runtime. The scripts include the standard Augular library and the custom code that defines the function “VmListCtrl” defined after ng-controller. After the controller line, you can use the vms like any other templates.

Now let’s take a look at the controller code defined in the controllers.js file:

1
2
3
4
5
6
7
function VmListCtrl($scope)
{
  $scope.vms = [
    {"name": "Web Server", "desc": "CentOS 6.4 VM with Tomcat 7 installed."},
    {"name": "DB Server", "desc": "Windows 2008 server with MySQL 5 installed."}
  ];
}

As you can see the controller is really a JavaScript function. What it does is to add a new variable vms to the passed in $scope. After this function is called, the vms is ready to populate their values to the HTML. If you are familiar with JavaScript, the vms is defined as an array with each element as a hash with two keys “name” and “desc.” These two keys are the part of the schema that should be known to the HTML page.

Getting a bit real with JSON

The above data is really faked with pre-defined strings. You can also use real data like JSON. The following is another example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html ng-app>
  <head>
    <script src="lib/angular/angular.js"></script>
    <script src="js/controllers.js"></script>
  </head>
 
  <body ng-controller = "VmListCtrlJSON">
    <p><strong>Total number of VMs: {{vms.length}}</strong></p>
    <table border="1">
      <tr ng-repeat = "vm in vms">
        <td>{{vm.name}}</td>
        <td>{{vm.desc}}</td>
      </tr>
    </table>
  </body>
</html>

The only differenece is the new controller VmListCtrlJSON, which can be added to the same controllers.js file:

1
2
3
4
5
6
function VmListCtrlJSON($scope, $http)
{
  $http.get('vms/vms.json').success(function(data) {
    $scope.vms = data;
  });
}

The controller simply access the vms/vms.json using HTTP. If successful, assign the downloaded data to the new vms variable. Pretty straight forward.

The content of the vms.json file is very similar to the faked data as last example. To differentiate it, I just change a little.

1
2
3
4
5
6
7
8
9
10
[
    {
        "name" : "Web Server - JSON",
        "desc" : "CentOS 6.4 VM with Tomcat 7 installed. - JSON"
    },
    {
        "name" : "DB Server - JSON", 
        "desc" : "Windows 2008 server with MySQL 5 installed. - JSON"
    }
]

Although we listed a simple file as the JSON content, you can always to have a Java Servlet or CGI to serve the same content as in the file. Then, you would have a dynamic content.

Summary

I’ve listed two examples I wrote while studying the Angular JavaScript framework. The clean separation and conceptual proximity to JSP/ASP really makes it an ideal programming model for HTML5 which would be supported by vSphere Web Client SDK.

So far the two HTML pages are read only and do not send back information to server for dynamic interaction. That is something I would explore more and blog soon.

This entry was posted in Software Development, Virtualization and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

3 Comments

  1. Posted December 10, 2013 at 3:37 pm | Permalink

    Very nice post. I simply stumbled upon your current web site along with desired to point out that I’ve really appreciated shopping ones website articles. In any case I shall be signing up in your feast we we imagine you compose once more rapidly!

  2. samit
    Posted April 25, 2015 at 2:50 am | Permalink

    Hi,

    Can you please tell me which version of vsphere web client sdk started support for angular js use in html plugin.

    I am using vsphere web client sdk 5.5.1. It supporting html plugin but not resolving expression written in angular js.

  3. Posted April 25, 2015 at 1:30 pm | Permalink

    Hi Samit,
    It’s talked about HTML5 support in vSphere Web Client. According to a VMworld talk by Laurent Delamare, it’s supported in 5.5u1: https://vmworldeurope2014.activeevents.com/connect/sessionDetail.ww?SESSION_ID=1421. I haven’t got a chance to try it. Should you try it, please feel free to share the experience.
    Steve

Post a Comment

Your email is never published nor shared. 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=""> <s> <strike> <strong>

  • NEED HELP?


    My company has created products like vSearch ("Super vCenter"), vijavaNG APIs, EAM APIs, ICE tool. We also help clients with virtualization and cloud computing on customized development, training. Should you, or someone you know, need these products and services, please feel free to contact me: steve __AT__ doublecloud.org.

    Me: Steve Jin, VMware vExpert who authored the VMware VI and vSphere SDK by Prentice Hall, and created the de factor open source vSphere Java API while working at VMware engineering. Companies like Cisco, EMC, NetApp, HP, Dell, VMware, are among the users of the API and other tools I developed for their products, internal IT orchestration, and test automation.