Written on 9/17/2014 in Web development
Part 3 of the Requestor series is here. And this one will be about AngularJS. I'm new, so this won't be an how-to-use-angular tutorial. But I want to share my thoughts and how I handled things. One small thing to mention is that I have used JQuery a lot in the past after banishing it to the depths of hell1. The Vorpal blog is written without JavaScript framework, the vanilla Javascript took over the job to make me curse a lot.
Angular !== JQuery
I read this tutorial from the AngularJS website, then got bored and started fiddling about. The first thing I realised was that AngularJS and JQuery aren't even on the same planet. I would even say, the only thing they have in common is Javascript.
Now, what I always hated about JQuery is that there was no clear link between the html and the javascript. I would load the html, this would load jquery and a javascript file. And whenever the dom was ready, I would do some stuff on the page, bind events, make some spaghetti(code) and eat it. They were almost completely separated, and it worked well as long as you kept it structured and clean. Let me rephrase: As long as you could keep it structured and clean.
In JQuery, most of the time, the files are separate and have no meaning, looking at the HTML does not give you the feeling there's anything going on there. With AngularJS I had the opposite feeling from the beginning. You declare your app and controllers in the html code. You create scopes, directives, ... and if you follow even a limited naming convention, you can easily track down what's happening in which Javascript file by looking at the html.
AngularJS requires a whole different mindset to work with, and has its setbacks as well. For me, it was the difference between services, modules, controllers and whatever more demons there are. I read some documentation, not all of it, but I still didn't see a clear difference between them. They all have a scope, they all execute Javascript, they all have dependencies that are being resolved, ...
Architecture
I like how ASP.Net MVC works with the Model-View-Controller stuff happening on the server. There's a lot of control and it's a clear way of thinking. You get a request, you route it to an action in a controller, the action will do stuff and return a view. The view can use a model to display information. Angular however runs on the client side which means that when you need data from the server, you should implement a REST API, or any means to fetch and submit JSON data. Another option is managing data locally and completely disconnecting pages from the server.
So the landscape looks something like this:
Views:
Angular architecture (modules, controllers and services)
You can see it's nothing big and it's quite clear what everything does. With some exceptions:
- $sce: Service used for injecting html
- RequestStorageService: Service for adding, editing, getting or deleting request collections in localstorage
- RequestStorageController: Controller for managing request collections and request history
- PersistenceService: Service for interaction with localstorage (serializing / deserializing strings for storage, managing 'tables')
- SharedObjectsService: Shared objects between the requestorController and the requestStorageController
- $http: Service for making http requests
- AppHttpService: Service for making http requests, wrapper around $http for a single point of handling requests that are made by the user
Final points
So this is a very simple app, yet I already use a lot of controllers, and the dependencies for services already look like spaghetti. I'm saying this because I'm not using a very good JavaScript IDE and when I change anything there is almost no validation, something I've grown accustomed to while writing in strongly typed languages.
That being said, the app reacts quick, everything works, and everything is rather flexible. To top it off, I'm not reluctant to change any of the code. Probably because I've kept it single-responsibility as much as I can and try to keep my controllers and services under 100 lines of code. But it's angular's accomplishment for making that possible, by making it easy to segregate your content3 without using classes.
I can definetly see a future for Angular, but I'm still reluctant to fully embrace it. This is already a lot of stuff to do on the client in my opinion. I am not anxious to add routing and templating to it. Perhaps I will, one day. :)
The source code for Requestor can be found here: