AngularJS – A Superheroic JavaScript MVW Framework

Logo of AngularJS

Introduction

AngularJS is an open source JavaScript Framework from Google used to write web applications. It is a great tool to structure a single page application, in which all needed data is loaded dynamically. But you can use it just as well for small parts of your app. Its concept is often viewed as MVW (Model View Whatever), although it provides functionality to serve as a typical MVC (Model View Controller) framework as well. Its strength lies especially in making HTML more expressive and readable.

Concept of AngularJS

AngularJS is based on the client-side generation of html-views and extends the html vocabulary. This way it is possible to use more functionality in the frontend without changing the DOM via jQuery. The main concept of AngularJS is underlined by controllers and directives. Additionally, AngularJS relies on the concept of “Single Source of Truth” which is realized with two way data binding. It is achieved with so-called “dirty checking”, which regularly checks for changes on a scope variable.

  • extension for html
  • abstraction of low-level-operations
  • Readability of the HTML code
  • A very good testability

AngularJS concept overview graphic

Controllers

These build the basic structure of an application in AngularJS. They connect the views and the functionality of your app and control the data flow. You can use scopes to pass variables to the view and interact with them. Also you can define functions in the controller which then can be executed in the view.

Scopes

Scopes are special JavaScript objects to connect the controllers with the view. They contain the data models, every controller usually has its own scope. There is also a root scope which contains a data model available to all controllers globally. You also can use scopes in your AngularJS directives. It is possible to add variables and functions to your scope:

Directives

As already said, AngularJS excels at making HTML code expressive and readable. The main reason for this are the directives, a powerful tool to manipulate, extend or even replace elements of the DOM. You can think of the directives as templates: You can write element and attribute directives (there are other types of directives but these aren’t used that much) which you can include in your HTML code as own tags and attributes. So instead of several tags like you can simply have with its content being laid out in a seperate file. Directives offer developers many ways to accomplish functionalities in a simple, efficient, and testable manner. The overall point of a directive is to hide DOM-related complexity and create a solid medium between the model and the view.

Services, Factories, Providers

A lot of the functionality of a web app in AngularJS lies within these three parts. Since this is a complex topic we won’t go far into details, it should only be mentioned that each provides its own way of handling data across your app and different controllers. For example you can use them to get data from an external API. Here’s a simple example of a factory:

Filters

AngularJS offers filter functions which go through records and filter them according to certain criteria. A filter can change a list or  value dynamically. AngularJS brings some filters but custom ones can be created as well.

Why not jQuery instead of AngularJS?

Well, you cannot compare these two very well. While AngularJS can be used as a whole framework which determines the way you build your app, jQuery is just a library. You can include it in your web app (even when using AngularJS).

But since Angular can be used on single parts of an app as well, it makes sense to compare them:

Reasons for Angular

  • two way data binding
  • expressive code
  • excellent for single page applications
  • possibility to work with models
  • use of modules

Reasons for jQuery

  • file size is smaller, so loading the small jQuery library for simple tasks might be better
  • Angular might be hard to master because of its slow learning curve
  • often you cannot use known libraries in Angular, even though there are often Angular-based alternatives
  • two way data binding of Angular can cause performance issues if two many objects are binded

General differences to other frameworks

A key difference is AngularJS’ way of the two way data binding: dirty checking. While most frameworks rely on listeners for this purpose. But there are also some other JavaScript frameworks which have a double data binding, for example: ReactJS, JSViews or ember.JS.

Strengths of AngularJS

AngularJS has a lot of strengths compared to some other Frameworks:

  • easy to use two way data binding
  • writing own extensions for html
  • abstraction of low-level-operations
  • readability of the HTML code
  • very good testability

AngularJS 2

AngularJS 2 is announced to be released at the late end of 2015. It is still in Alpha version, so we won’t cover it too much, but briefly go over the main differences to AngularJS 1:

Language

While in AngularJS 1 you only use JavaScript, AngularJS 2 offers more flexibility. You can write your applications in normal JavaScript (ECMA5 or ECMA6) as usual, TypeScript, or Dart.

General structure

AngularJS is component based, therefore you can use TypeScript and ECMAScript 6. You don’t have controllers and scopes anymore.

Browser Support

AngularJS 2 is said to be the technology of future web. Therefore, older versions of Internet Explorer aren’t supported. The oldest version supported will be IE10. Also, Angular will focus more on mobile devices, especially on using touch.

Performance Improvement

The performance of AngularJS is lacking when too many objects are binded. Since the data binding changes in AngularJS 2, this will be greatly improved.

Conclusion

AngularJS is very powerful for writing single-page-applications. You can do more stuff in less time. AngularJS handles a lot of situations automatically or with small code. It’s easier to do animations and DOM manipulation.

In following blog posts we will cover the technical aspects as well as the implementation of the modules mentioned above.

Sources:

Sharing is caring!

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.