Angular

Angular is a framework from Google for creating advanced, seamless (single-page) web applications — SPA (Single Page Applications) — in the programming languages ​​TypeScript, JavaScript, and Dart.

The framework is open-source and freely available. Source files and additional information can be found in the framework’s official GitHub repository.

The name is pronounced “Angular” and translates into Russian as “angular.” The framework is named after the angle brackets that surround HTML tags. 

How is Angular different from AngularJS?

Angular is the successor to AngularJS, which is written in JavaScript. Despite their similar names, these are different frameworks. AngularJS is also known as version 1.x. The framework has been around since 2009. It is currently in long-term support mode. This means it continues to be supported, but new features are no longer being added to the framework. A lot of legacy code is written in AngularJS.

The new version is Angular, also known as Angular 2.x and later. The framework is written in TypeScript and is incompatible with AngularJS. It was released in 2016 and has been under development ever since. Angular has a different architecture, and it can be written with both TypeScript and JavaScript. 

The structure of the Angular framework

Components

Components are large, independent parts of an application. For example, one component is a news feed, another a website header. The application is built from them, like blocks. Typically, each component is stored in a separate file. Each component can have its own HTML template and CSS styles. These can be located in the same file as the component, or they can be included separately. This creates a ready-made interface block with structure, styles, and defined behavioral logic.

Modules

These are also components of the application, but different ones. They manage components. If a component is an area of ​​the application, then a module is responsible for managing it. The entry point to the application, the code for animation or navigation—these are all modules.

Every project has a core module. Additional modules are added as needed to perform specific tasks. They are needed to avoid overloading the core module with unnecessary functionality and making it too cumbersome.

Forms

Most Angular applications are form-based. A form is a structure where the user enters data and then submits it to the server. A comment or feedback block is a form.

Angular makes working with forms easier: you don’t have to write them from scratch. Templates are already created for them, and you just need to adapt them to your needs.

Services

They are similar to components, but more specialized. They can be defined at the module, component, or application level. Services implement specialized logic. They are connected to the application as a regular class and are used to store the global application state. They are also used as data providers.

Directives

These are application components that change the structure or behavior of a page. Components are also considered directives. However, there are two other types: structural directives and directives that change the appearance or behavior of elements. These are used to apply a single action to all instances of a single component—for example, changing the currency in all product pages.

What is needed to work with Angular?

Node.js

This is a platform for working with JavaScript and TypeScript.  Node.js is required to install and run Angular.

Npm

This is a package manager that allows you to download the required data package with a single command. It is commonly used to install frameworks and libraries. Its packages are also required for Angular to function properly. npm is usually already included with Node.js.

TypeScript

You can write Angular using both pure JavaScript and other variations. However, since TypeScript is the framework’s core language, it should be possible to work with it.

Advantages of Angular

An abundance of opportunities

Angular helps connect application components, transfer data, animate interfaces, and more. For simple projects, its functionality may be redundant, but for complex SPA applications, it is indispensable.

Universal application

A detailed style guide

Angular’s defining feature is its detailed documentation. It contains recommendations for building and developing applications, as well as a style guide for Angular programming style. This is convenient for developers new to the framework. Consistency in style helps programmers better understand each other’s code.

Support from Google

Angular’s developers are Google employees, and the support of a large corporation helps the framework develop. Meanwhile, thanks to its free license and open source code, third-party developers can also contribute to it.

Disadvantages of Angular

Difficulty in learning

Angular is considered one of the most complex front-end frameworks. It can be challenging to learn from scratch on your own. Furthermore, getting started requires knowledge not only of pure JavaScript but also of TypeScript, which is based on it.

Lack of compatibility between the old and new versions

Despite their similar names, AngularJS and Angular are incompatible and fundamentally different. Therefore, developers working with legacy AngularJS code need to learn the basics of working with the outdated framework. The concepts and rules of the new Angular will not apply.

How to get started with Angular

The developers recommend starting by installing the Angular CLI. It can be downloaded and installed using the npm package manager:

npm install -g @angular/cli

The CLI allows you to create and configure new projects, download and install packages for each project, and build and deploy applications. CLI commands begin with “ng.”

For example, the “Create new application” command would look like:

ng new <application_name>

After this, you can enter additional flags. The ng serve command, executed from the project folder, builds and runs the application for debugging.

Briefly about the main thing

• Angular is an open-source framework from Google for creating SPA applications using TypeScript, JavaScript, and Dart.
• AngularJS is a previous version of the framework, written in JavaScript. It differs from Angular.
• Components are large constituent parts of an application, modules are control components, forms are the basis for data entry, services are highly specialized components, and directives are constituent parts of an application.
• To work with Angular, you need Node.js, NPM, and TypeScript.
• Angular’s advantages include: a wealth of features, universal applicability, a detailed style guide, and support from Google.
• Disadvantages of Angular: difficulty in learning, lack of compatibility between the old and new versions.
• It is recommended to get started with Angular by installing the Angular CLI.