Angular Proof of Concept (Part One)

I recently went through the process of building a simple application using the Angular framework and wanted to document some of my experience to possibly help others considering the framework. My day job for the last ten years has mostly involved building Flash applications using the Apache Flex framework and as a result my experience with HTML, JavaScript and CSS has been limited. In September 2016, I attended the Angular Summit Boston 2016 and learned a lot about the framework and how I might use it. A few months later I finally found some time to give it a shot.

To TypeScript or Not To TypeScript

At the Angular Summit there were two almost equally divided camps when it came to language choice. The JavaScript people seemed skeptical of TypeScript and were very comfortable with JavaScript. The TypeScript people on the other hand preferred the simpler syntax and more strongly typed nature of TypeScript. I decided to start with JavaScript Since I had some knowledge of it and also like that the browser would be working with the actual files I created rather than some on the fly transpiled files.

Once the language decision was behind me I walked through the Angular JavaScript Quick Start and quickly had a sample application running on my local machine. I used the Microsoft Visual Studio Code application because it was free and easy to use. Once I had the sample application up and running I started to make changes based on my needs. It was pretty easy to figure out the patterns and I was able to create my own components pretty easily. I did have some trouble getting the syntax of the JavaScript correct because of the hoops you need to jump through in order to support the complex class structures required by Angular. Here is an example of a simple module class and all its curly brace and bracket fun.

(function(app) {
  app.AppModule =
    ng.core.NgModule({
      imports: [ ng.platformBrowser.BrowserModule ],
      declarations: [ app.AppComponent ],
      bootstrap: [ app.AppComponent ]
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {})); 

Struggles with Server Calls

After completing the screens I moved on to trying to set up some services that would make calls to a simple REST API set up on my server. I went searching for examples on the Angular site, but like most of the other portions of the tutorial there isn’t a JavaScript example yet only TypeScript. I looked around the web a little bit and scraped together some information, but in the end I was forced to look at the TypeScript examples and then in my head transpile them to JavaScript. After lots of trial and error I learned how to use Promises with JavaScript and made the http get call to one of my REST endpoints. The browser sent the request to the server, but the server wasn’t having any of that nonsense.

My lack of experience with standard web technologies now started to catch up with me at this point as I fumbled through the process of updating my Apache Tomcat server to accept cross domain requests from my Angular application on a different port. A few hours of tweaking CORS filters in my web.xml file and a couple tweaks to my http get call resulted in a successful retrieval of text from the server. The next endpoint was authenticated so I once again consulted the TypeScript tutorial and figured out how to pass the Authentication data in the http get call. The TypeScript example looked so much more straightforward because it used import statements to bring in special classes for the Header, while the JavaScript I built used plain old objects.

All Downhill

Once I made it over this last hurdle I was able to finish the proof of concept with relative ease. I found debugging using Google Chrome’s built in developer tools was straightforward and helped me around some simple issues. The error messages provided by Angular were much better than I remember from what were reported back in the fall, which helped me fix some random issues I would face when adding new components. Compared to compiling Apache Flex in Flash Builder the whole experience of quickly updating a file and being able to test the change within a few seconds was a breath of fresh air. I found the process of adding new components was pretty fast and the segregation of the templates (view) from the components (model) was great. Overall using Angular has been a great experience and meshes well with my Apache Flex experience.

Of course this isn’t the end of the story, because I had a few more things I wanted to learn about Angular. In the weeks that followed I worked on switching from JavaScript to TypeScript, integrated some third party JavaScript widgets and also switched to using the fantastic Angular CLI. I am happy to say things only got better!