Can I learn the latest version of Angular.js to understand and upgrade the code written in older versions?

Issue

I know I am asking a general question and not something that is specific or something that can be reproducible through code. But I needed some clarity regarding this.

A developer in my company wrote the front end with HTML, CSS, and Angular js (v1). But now I need to take over the maintenance and so I need to learn Angular.js too. But I found plenty of versions of Angular.js out there, the latest being v6. I also read that v2 differs from v1 as the developers of Angular js introduced type script in v2 and also changed the architecture.

So I am wondering whether I need to learn Angular js (v1) first to understand the code and then move to v6 and perhaps change the code base altogether.

I am sorry if the question is too general and the topic.

Solution

Angular v1 and angular v2 are different, the common reference is:

• AngulerJS - below angular 2 (v1)
• Anguler - Angular 2 and above.

---

The difference between the two:

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.
• 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 - This is mainly a semantic change rather then logical functionality change.
• Angular has couple of more changes from the old version.
  • 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.

As you can see, the major difference between AngularJS and Angular is the change of concept between controller and component. While in AngularJS you had a controller and you could $scope variables in that controller and even define custom directives, in angular the component is a directive with a template and there is also a hierarchy of components.

Answered By - Barr J