Hello, guys. Angular 10 is already released and you are still stuck to the JavaScript version of it? Well, well, don’t you think that it is time to make some changes? Then this article is definitely for you.
First of all, let’s determine key features of AngularJS that make it so beloved by the programmers.
Table of Contents
AngularJS
Looking back, it was possible to create very advanced web applications using the pure JavaScript API, but it was very difficult to maintain and test the source code.
What Has Made Angularjs So Good?
The first thing that comes to my mind is that the production of the code was incomparably fast and the pleasant fact that each application was easy to test. What is more, such a technological gian as Google was behind the project.
There are other things that make Angular so good for programmers. We can talk a lot about amazing data binding, directives and components. Furthermore, the learning curve is also very good and quite short.
All of these benefits are definitely good, but the appearance of new Angular releases have led more and more companies to rewrite their applications from their own solutions, built on top of other libraries, to new versions of Angular.
And finally, the review of the latest versions of Angular. Below you can read about all the changes implemented and find for yourself some serious reasons as to why you should migrate from AngularJS to Angular.
Angular 2+: Long-Awaited Release
Fast, intuitive Angular frontend framework has won the respect of a huge number of developers. After all, it allows you to build interactive dynamic web applications that require much less effort and much less code.
In September 2014, the Angular team announced that they planned to create Angular 2. They worked tirelessly, and in September 2016, a new version was finally released. AngularJS has changed a lot! And I will describe some of these changes right now.
-
Great Mobile Support
The new version of Angular was created from the beginning with an emphasis on mobile-oriented architecture. Significant improvements have been made to issues such as boot time, memory efficiency, CPU cycles, etc. (They will also be useful for desktop development). Angular 2 and later versions offer a high level of touch and gesture support on a variety of mobile phones and tablets. Angular 2 libraries, such as Native script, significantly speed up mobile development.
-
Component-Oriented Programming
It’s time to say goodbye to the controllers and $ scope and get acquainted with the components and directives. Angular 2 is a completely component-oriented approach to development, making it easier to build complex applications. You can create more independent and faster entities, as well as individual component classes.
You Can Create A New One Like This:
ng generate component playground / player
This command will create a player directory in the playground with the minimum required component code:
- Implementation File;
- template file;
- a style file with the extension of the used CSS preprocessor;
- unit test file.
No copy-paste – the source of evil and mistakes! The generated component implementation code will be like this:
import {Component, OnInit} from ‘@ angular / core’;
@Component ({
selector: ‘app-player’,
templateUrl: ‘./player.component.html’,
styleUrls: [‘./player.component.styl’]
})
export class PlayerComponent implements OnInit {
constructor () {}
ngOnInit () {}
}
@ + Component here is an example decorator. Ultimately, this is a simple function that takes the constructor defined below as an argument and modifies it based on the described configuration, in this case it is:
selector – defines how the component element will be named in application templates (<app-player> </app-player>),
templateUrl – path to the template file of the current component,
styleUrls is an array of paths to the component’s style files.
In addition to the listed parameters, there are others that allow you to write template code and styles in the same file, configure the encapsulation of the styles of this component, etc.
-
TypeScript
Angular fully supports the TypeScript language, although you are free to choose other languages such as ES5, ES6 and Dart to build the application. You can now take full advantage of TypeScript functionality and its libraries. TypeScript offers a variety of tools for code refactoring, navigation and more. It is especially useful for large-scale projects.
-
Two-Way Binding
The key feature of Angular is two-way binding. How is it implemented in Angular 2?
<app-player [(position)] = “playerPosition”> </app-player>
Such a template entry will pass the value of the playerPosition property of the current component and will change it when the position property changes inside the player component. This is two-way binding.
Angular 2 introduces a new syntax that allows property values to be passed to child components (one-way binding). It uses square brackets:
<app-player [position] = “playerPosition”> </app-player>
Actually, this is how the two-way binding is implemented in Angular 2:
- passing the original property value,
- subscription to an event with the name “property name inside a child component” + “Change”,
- changing a property in the parent component when an event occurs.
And the entry [(position)] = “playerPosition” is just syntactic addition that does everything described automatically and saves time on building a house, planting a tree and raising a son.
-
Increased Productivity
Compared to AngularJS, version 2.0 has a significant increase in performance. This is so cool due to the fact that Bootstrap can now fit perfectly on a specific platform. For example, a mobile browser will use a different Bootstrap compared to a desktop browser.
-
SOLID Principles
Angular 2+ solves many problems associated with a high level of code cohesion, a powerful new implementation of Dependency Injection, and the ability to abstract from the implementations of various interconnected components using interfaces (TypeScript).
For example, you can write a construction like this:
class SomeComponent {
constructor (public someService: SomeService) {}
}
And when you instantiate this component, an instance of the SomeService service will be automatically created and passed to the SomeComponent constructor. This greatly reduces the level of cohesion and allows you to test them separately from each other.
-
Form Validation
The pattern-based validation is a new additional implementation. Its configuration takes place entirely in JavaScript, which allows you to form a set of rules dynamically, create reusable validators and completely manage the process, including filtering user input.
An example of implementing a new password entry form with checking its complexity and confirming:
let passwordControl = new FormControl (”, [
Validators.required,
CustomValidators.complexPassword,
]);
let passwordConfirmControl = new FormControl (”, [
Validators.required,
]);
this.formGroup = new FormGroup ({
password: passwordControl,
passwordConfirm: passwordConfirmControl,
}, CustomValidators.match (passwordControl, passwordConfirmControl));
Validator (Validators.required and the like) is a simple function that passed a value and returns null or an object with an error description.
In the form template, you need to specify the formGroup:
<form [formGroup] = “formGroup”>
Input fields need to specify the corresponding names of the formGroup controls:
<input type = “password” formControlName = “password”>
<input type = “password” formControlName = “passwordConfirm”>
And that’s all. Whether the form is valid, all errors and states can be obtained through the formGroup object, which will be updated every time the user interacts with it.
Conclusion
To sum everything written above up, the update of Angular is very good news for developer’s community. Significant improvements in data linking, dependency and routing, the transition to semantic versioning, changes in the structural syntax of directives, and other “pleasures” are designed to make life much easier for the developer. So, migrate to new versions without any doubt!
