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
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.
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:
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
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 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:
AngularJS is component based, therefore you can use TypeScript and ECMAScript 6. You don’t have controllers and scopes anymore.
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.
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.
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.