Angular is a design pattern.

With the rapid approach of Angular 2.0, parallel to the existing with a large number of other frontend frameworks, a lot of unrest is in the air about the upcoming costs (both temporary and financial) associated with the transfer of their projects to the new version. Do you think developers have a desire to learn another new framework?

Let's figure it out. I ask under the cat.


Several development teams spent a fair amount of time with Angular 2.0, about as much as ours ( Approx. Lane: Ionic team ). We returned to the design of Ionic 2 , when Angular 2 was still in pre-alpha status, hoping to get even faster, more compatible with standards, and a promising mobile web framework — even better than Angular 1.
')
The most important thing that we realized when working on Ionic 2 is how Angular 2 and Angular 1 are at a high level, and how understanding this will help developers make it much easier to move from Angular 1 to Angular 2. In many ways, Angular 2, to Indeed, it is not a new framework per se. This is just a new standard Angular, with whom we are familiar and who are so loved.

One framework, many standards

Together with Angular 1, Angular 2, and Angular Dart, Angular has gone from a framework based on one ES5 standard to a conceptual framework, or a design pattern with many standards.

You can design the user interface and Angular-style frontend application based on at least three main languages: ES5, ES6 / TypeScript and Dart, although ES6 / TypeScript is becoming the de facto Angular standard.

If we take a closer look at how Angular applications work in each of the above languages, we will start to notice a lot of similarities. Let's take a look at an example.

Example

To display a property from our scope or context, we can do this:

Angular 1:

<span> {{todaysDate | date}}</span> 

Angular Dart:

 <span> {{todaysDate | date}}</span> 

Angular 2:

 <span> {{todaysDate | date}}</span> 

Did you notice anything? They are absolutely the same! Let's try a more complex example. Imagine that we have a list of songs:

In Angular 1 and Angular Dart it will look like this:

 <ion-list> <ion-item ng-repeat="song in songs" ng-click="openSong(song)"> {{song.artist}} - {{song.title}} <span ng-if="song.isFavorite"><i class="icon ion-heart"></i></span> </ion-item> </ion-list> 

And this is how in Angular 2 (along with Ionic 2):

 <ion-list> <ion-item *ngFor="#song of songs" (click)="openSong(song)"> {{song.artist}} - {{song.title}} <span *ngIf="song.isFavorite"><ion-icon name="heart"></ion-icon></span> </ion-item> </ion-list> 

Well, well, here we already see more differences. But these differences are clearly defined: ng-repeat is now turned into ngFor , with an asterisk * , which is used to designate this element as a template (which will be repeated N times).

Loops now use " of " instead of " in " to get list values. Even closer to the standard ES6 and TypeScript. Starting with Angular 2, we no longer use kebab-casing ( Note: this is when we write “here-and-so” ) for writing attributes (that is, ng-repeat, ng-if, ng-show etc.). The developers decided to move to a clearer name. ( more on this (eng) )

If we apply the standard Angular 1 to the syntactic transformation of Angular 2, then we have a code that is, conceptually, identical to Angular 1 and Angular 2. If we assume that we are already familiar with Angular, then we can look at this code and immediately understand that he does.

Component example

Most Angular users will find patterns right in Angular 2 itself. Much more change comes with a new component model, which replaces the installation directive / controller from Angular 1.

In Angular 1:

 .controller('HomeCtrl', function($scope) { //    }) .directive('profileImage', [function() { // ...    }]) 

In Angular 2, given that everything is a component, we can apply a simple transformation: include controllers in the components, as well as include directives in them.

Since Angular 2 lives and breathes with TypeScript and ES6 standards, we define “components” as classes that can contain templates. Similar to the example above (Angular 1), the code in Angular 2 might look like this:

 import {Component} from 'angular2/core'; @Component({ selector: 'home', template: '<div> </div>' }) export class HomeComponent { } 

And the directive from Angular 1 as a component of Angular 2:

 @Component({ selector: 'profile-image', template: '<div>profile image</div>' }) export class ProfileImageComponent { } 

But what about scop (scope)?

In Angular 1, the scop was actually just the “context” available in a specific area of ​​the user interface. For example, our profileImage directive refers to the current user as part of its scoop, or context, and renders the user profile picture.

This concept is exactly the same as in Angular 2, except that we use the natural concept of instance data from ES6 class! Angular has gone from a conventional contextual system to a standards-based approach. This is due to the fact that JavaScript evolved, making it possible (with a little decorative TypeScript magic, which makes the code even cleaner):

 export class ProfileImageComponent { @Input() user; clickFace() { //      this.user,  ,   $scope.user    Angular 1 } } 

In Angular 2, we no longer need to use the usual $ scope system to process data for a component. Now we get them freely *, thanks to ES6 and TypeScript!

* a very simplistic concept, of course, but for the end user, this is really freedom of action!

Lower entry threshold

Our veterans of Angular 1 tend to forget how difficult it was to deal with Angular 1. I had to take a month’s break from a lot of my other work, just to understand what kind of strange terms such as: tranclusion, directive, binding, scopes, and what they really mean.

A developer who is new to Angular and who already starts with Angular 2 will not need a lot of special knowledge to learn it. He can skip all these esoteric terms from Angular 1, and immediately jump straight into the ES6 / TypeScript specification code.

Plus, with the absence of the usual modular system, the Angular 2 code easily gets along with the rest of the ES6 ecosystem, making it deadly easy to install and import by a third party ( Note: here, I suppose I mean, support of the code by someone on the side third-party developers ).

Is there life after Angular 1?

After the developers make the psychological transition from Angular 1 syntax to Angular 2 syntax, we think they will find that, it turns out, they already know Angular 2. Both concepts are almost identical, and the similarities are not limited to patterns and components; As soon as users dig deeper into pipes , dependency injections, services, they will discover a ton of similar similarities.

Since there are so many coincidences, we tried to make Ionic 2 look like Ionic 1, since it is based on Angular. But now only new, even better implementation! So far, the transition has been proceeding very well, and I am optimistic that Angular 2 is becoming a hit, right now, at the moment when the dust settles and the API Angular 2 becomes really stable.

Angular 2 is definitely the best Angular!