Hello, readership! The wait is finally over relatively long ago: Version 2 of Angular has already been released. Now the question arises: What is now? What is the best way to approach the framework? What can you do with it? What does the ecosystem around the framework look like? I will try to answer these and numerous other questions in this article. In doing so, I am giving you the opportunity also to get to know the benefits of the framework using a small practical example and to see that getting started doesn’t have to be that difficult.
What Are The Features of The New Angular?
In most cases, you will be writing your Angular application in TypeScript. Compared to implementation in pure JavaScript, this has the advantage that the source code of the application is much tidier. You can also create clean interfaces, which makes working in a team much easier; You also get support from your development environment in the form of autocomplete. In addition, the TypeScript compiler warns you if you violate the type system. Another very pragmatic reason to use TypeScript is that most of the code examples and problem solutions you will find on the Internet are in TypeScript.
Unlike other frameworks, Angular requires a little more effort for the initial project set-up. The first thing you should do in your new application is to create a package.json file. You can do this quite quickly with the npm init command. If Angular was not yet set to a package manager in version 1, Angular 2 strategically relies on npm to manage the dependencies. Angular is no longer just a package, but a collection of several packages. This makes it possible to use the framework not only in the browser, but also in combination with NativeScript on mobile devices. With this strategy, parts of the framework can be exchanged, which, for example, also enables server-side rendering of an application.
But back to the package structure. The core packages of the framework are identified by a preceding @ angular /. For example, you can find the core of Angular in @ angular / core or the HTTP service in @ angular / http. In addition to the dependencies, the package.json file contains further meta information about your project. As a best practice, it has meanwhile become established that some helpful commands are summarized in the scripts section of the file. Among other things, you will find the commands for the installation, for the execution of the TypeScript compiler and for starting the tests.
In addition to the package.json file, you need additional files so that your application can run. For example, tsconfig.json contains the information for the TypeScript compiler. typings.json indicates where the TypeScript definitions for certain packages can be found. Depending on which library you are using for module support, you also have to configure this. Once you have met these requirements, define a starting point for your application in the form of an HTML and an initial JavaScript file.
So you see: In order to use Angular as the basis for your application, it is not enough to just include a JavaScript file. Fortunately, this complex set-up process is a point of criticism that has bothered several people during the development of the framework, so there are some very elegant solutions for this. The approach that comes straight from the Angular developers is a command-line tool called the Angular CLI.
Why Do You Need Migration?
- Basics of TypeScript
TypeScript is a statically typed scripting language that contains the design of JavaScript, also known as a superset of it, with which JavaScript is supplemented with additional features. The big difference and especially the main advantage is that TypeScript has a type system, similar to C ++, Java or Python.
That means that variables, function parameters, return values are defined with a certain type (string, number, boolean …), which is not necessary or not possible in JavaScript.
Compiled from the TypeScript files, which are created with the extension .ts, you get JavaScript again. Because TypeScript code cannot run in the browser and must be transpiled with the TypeScript compiler, i.e. transferred into another language.
- Advantages of TypeScript
The specific advantages over non-typed languages such as JavaScript are:
- Readability is increased for the developer
For us developers, the code is also more understandable and readable. Variables, function parameters and return values can better be seen when defining the application or use.
- Runtime errors can be better identified during development
Runtime errors caused by programming errors can be identified in the browser before execution.
- Fewer runtime errors during development
This actively prevents runtime errors, which makes development more efficient.
- The code analysis is more precise
For working with the IDE, this means better code completion, better navigation between the methods and classes and refactoring support.
- Examples of Typing
I will show the typing of variables, function parameters and return values using a few examples. This also includes briefly mentioning the class declaration and the constructor method:
- Variable declaration and initialization
TypeScript
const city: string = ‘London’;
const capital: boolean = true;
const population: number = 9000000;
JavaScript
const city = ‘London’;
const capital = true;
const population = 9000000;
- Array declaration and initialization
TypeScript
const cities: string [] = [‘London’, ‘Manchester’, ‘Newcastle’]
JavaScript
const cities = [‘London’, ‘Manchester’, ‘Newcastle’]
- Class declaration and initialization of their properties
Classes contain three main parts, the properties, the methods, and the constructor. Properties can still be declared with the access modifiers public, private, static, protected and readonly, with public being set as the default value.
TypeScript
class City {
name: string;
capital: boolean;
population: number;
}
- Methods and the initialization of their parameters and return values
Methods are called functions of classes. You can transfer parameters and return values that can be typed just like variables.
TypeScript
class City {
…
populationGrowth (nextYear: number): number {
this.population + = nextYear;
return this.population;
}
}
- Constructor Method
The constructor method is used to declare properties for later use.
TypeScript (basic notation)
class City {
private population: number;
constructor (population: number) {
this.population = population;
}
}
const myPopulation = new City (9500000);
TypeScript (shorthand)
class City {
constructor (private population: number) {}
}
- Important features
- Arrow functions
An arrow function, also called a lambda function, is an anonymous function and can be written in abbreviated form in one line using the arrow (=>). The following four variants can be used, whereby the fourth is the now known notation in TypeScript and thus also in Angular:
1st variant
function (population) {
return population * 2;
}
2nd variant
(population) => {
return population * 2;
}
3rd variant
population => {
return population * 2;
}
4th variant
population => population * 2;
Conclusion
So, I reckon that you definitely need to migrate from AngularJS to Angular, as the use of it is really worth it. With migration you will see how your company or just projects benefit from it. Thank you for reading and good luck on your programming path!