Meet AngularJS

 

Recently, AngularJS has gained quite a lot of popularity in the js frameworks field, and this trend is expected to continue also in the near future. Released relatively recently, AngularJS has enjoyed Google support and extremely active community under ongoing growth.

 

In terms of popularity, AngularJS ranks quite easily on top of the list, as we can see in the comparison hereunder.

Metric AngularJS Backbone.js Ember.js
Stars on Github 40.2k 18.8k 14.1k
Third-Party Modules 1488 ngmodules 256 backplugs 1155 emberaddons
StackOverflow Questions 104k 18.2k 15.7k
YouTube Results ~93k ~10.6k ~9.1k
GitHub Contributors 96 265 501
Chrome Extension Users 275k 15.6k 66k
Open Issues 922 13 413
Closed Issues 5,520 2,062 3,350

Source: https://www.airpair.com/js/javascript-framework-comparison

Convinced that this framework’s popularity is not based only on Google’s popularity, we have attempted to develop a small project in which we intended to make use of its capabilities.

A demo application

We have developed thus a small application to report the worked hours on various projects. The application was  supposed to use also a repository (we used localStorage for this) and to allow adding hours, project modification (CRUD) and display of entries.

We have started with zero knowledge about AngularJS, and this has helped us understand how abrupt the learning curve is, and how much may the Internet help us learn the secrets of this framework within a short time.

Even if the learning curve is a little bit abrupt, mostly during the phase while we get familiar with the used concepts, there is quite an extensive base of materials, tutorials, articles and examples available on the internet, therefore the learning difficulties may be quite easily overcame.

The fact that AngularJS uses the MVC concept simplifies a bit things for the ones who had contact with other frameworks following this pattern, even if the programming language used was not Javascript.

The MVC model

The models may be represented as POJOs (Plain Old Java Object), which means that we have simple objects represented by fields (properties) with getters and setters that include the unitary logic connected strictly to the object itself.

The controller uses again a simple syntax, providing methods towards the view which allow pattern modifications. As well as other frameworks, the AngularJS capabilities may be extended by module inclusion. The applications themselves are actually defined as new modules which may depend in their turn upon other modules. We have used the ngRoute module to transparently display the appropriate template for each and every url and the xeditable module, to implement an editable table (this module comes with directives specifically created for this purpose: e.g. editable-text, e-form, etc.). For our project, we have used as a repository localStorage, but integration with a REST service may be easily achieved from the controller, using $http.

The view is represented strictly by easy-to-maintain HTML templates plus the AngularJS directives as assigned to HTML tags. Such directives allow addressing the controller methods quite easily, pattern mapping by HTML elements as well as error control.

The AngularJS integration with other template engines is not regarded as a best practice, even though, in theory, it is possible. On the other hand, the fact that it uses HTML is an advantage when working with already defined mockups, the effort being consistently smaller.

The errors in AngularJS are presented quite intuitively. Moreover, apart from the error stack, the user is generated an url to a page that contains several details related to the arose error.

Example:

Error: [ng:areq] http://errors.angularjs.org/1.2.19/ng/areq?p0=projectsController&p1=not%20a%20function%2C%20got%20undefined

   at Error (native)

   at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:6:450

   at Bb (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:19:68)

   at Ua (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:19:155)

   at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js:67:405

This facilitates, quite a lot, error detection and correction, especially in case of beginners.

Conclusion

AngularJS results thus as quite a powerful framework, but at the same time flexible enough to match an extensive range of projects. The list with the sites that already use it is impressive (https://www.madewithangular.com/#/), covering a variety of areas.

We like the fact that it uses HTML for the template part, that each (MCV) layer is well delimited and that this paradigm is required. The variety of already developed modules and the abundance of materials is again very useful.

A big minus of this framework, consists of the huge difference between version 1.x (we have used 1.2) and version 2 (currently beta). AngularJS2 is almost totally rewritten, and the migration of an application from AngularJS 1.x to AngularJS 2 will require its rewriting.

Leave a Reply

Your email address will not be published. Required fields are marked *