What’s the difference between AngularJS and Angular?

Introduction

Probably, for most of front-end developers, Angular is a well known framework made for building web applications. If we want to use Angular in our project, we have to choose one of its versions – AngularJS or other.
AngularJS – or as some may prefer: Angular 1 – was created in 2009. It brings us two‑way data binding and lets us see data changes in JavaScript automatically shown on the UI. Furthermore, AngularJS has directives that let us create more separated and reusable code than ever before. Generally it allows us, programmers, to write applications in MVC or MVVM architecture (sometimes called MVW architecture (Model-View-Whatever) in simpler way. It made a step forward in testing front-end applications, because of its dependency injection mechanism which helps mock dependencies.

The beginning

I must say that I was really fascinated in Angular. Over time it has gained support from many developers. They’ve created a lot of useful packages that made coding even faster. More and more things were added to the core, so the Angular team decided to create a completely new framework. At first, the new framework was named Angular 2. It sometimes may cause understatements, because after time, beta version was renamed to Angular. Now, when people want to find some pieces of AngularJS code, they may find stuff connected with Angular 2 or higher. Higher, because Angular 4 was announced on December 2016. Creators purposely skipped number 3 to avoid a confusion due to the misalignment of the router package’s version, which was already distributed. Angular in 4th version is backward compatible with Angular 2.

Controllers vs components

So what’s the difference between AngularJS and Angular? First of all, Angular is based on TypeScript while AngularJS is based on JavaScript. TypeScript is a superset of ES6 and it’s backward compatible with ES5. Angular has also benefits of ES6 like: lambda operators, iterators or reflection’s mechanism.
AngularJS uses terms of scope and controller. To scope a variable you can add many variables that will be visible in View as well as in Controller. AngularJS has also a concept of rootScope. Variables in rootScope are available on all throughout application. Angular does not have a concept of scope or controllers. Instead of them it uses a hierarchy of components as its main architectural concept. Component is a directive with a template. That is a similar approach as in ReactJS – another library used for building user interfaces.

Differences in template engine

AngularJS has many directives and every developer can also specify custom new directive. Angular also has standard directives, but they are used in a bit different way. For example: ng-model in AngularJS means that you want to create two-way binding. If you want to create one-way binding, you should use ng-bind. Angular occurs only ngModel, but if you would write it only in: “[ ]”, you’ll get one-way binding. If you want to create two-way binding you must write it in: “[( )]”. We have to write it this way because of the fact that “[ ]” is used to property binding and “( )” is used to event binding. In Angular, some directives have changed their names like ng-repeat to ngFor. When I’ve started working on projects with Angular 2 in beta version, I’ve been making common mistakes at the beginning liken trying to use ng-repeat or ngModel only in square brackets when I wanted two-way binding.

What else have changed?

Of course if Angular is newer version you can suspect that has some advantages over the old version. That’s right, Angular has many advantages. The first is modularity. Much core functionality was moved to different modules. That caused lighter and faster core, dynamic loading, asynchronous template compilation and added support for reactive programming. After beta version creators added really great thing: angular cli. With that package you can easily create scaffolding of your Angular project which will be all configured.

So AngularJS or Angular?

Wondering about version that will be the best for you? The newer version of Angular is a popular solution. Moreover, mostly it will be a better choice. Anyway, before you choose one of them to your new project, try to answer some questions:
What libraries would you like to use?
Are they compatible with Angular?
What web browsers we want to support? (this one is really important)
If you choose only new browsers, then Angular is the best. It’s because it is a forward-looking library, but don’t forget about other browsers. For example: IE8 for which you should definitely use AngularJS from version 1.3 that supports IE8 and higher.

Summary

Angular is a great framework. It has many improvements in terms of AngularJS. It will become more and more popular and I think that it is well suited to small as also to bigger applications, so it is really worth learning and using. As we talk about Angular, I want to notice that there is also ReactJS which is a little bit opponent to Angular and I will write some more about it in the next article.