Angular is a full-fledged MVC framework from Google that supports Typescript and Web Workers out of the box, as well as a great CLI that allows you to generate templates for components, routes, and services using simple command line commands.
Angular is no longer just a library for working with the DOM, but a full-fledged framework that is guided by the principles of MVVM application development and includes out-of-the-box features such as
- CLI for generating the file structure of various Angular constructs, npm library structure, testing, linting, etc.
- A number of libraries for a wide variety of tasks – router, libraries for working with forms, animation, and others.
- When initializing a project, you can fine-tune what of the available libraries will be added to it.
- Linking tools.
- Karma + Jasmine for Unit and End to End testing.
Historically, Angular, although it appeared a little later than React, is actually a rewritten from scratch version of the AngularJS framework that existed before it. At the beginning, there were even some misunderstandings among front-end developers, as no one understood the difference between the names Angular and AngularJS.
As a result, the framework’s development team started using the names Angular version 1 (for AngularJS) and Angular version 2 (for Angular) to distinguish them more clearly.
If you compare Angular with React, its structure is much more complex. In addition to components, the following elements also appear here, each with its own purpose:
- Pipes – a kind of auxiliary functions for transforming the visual appearance of data in HTML templates. For example: formatting numbers, dates, currencies, etc.
- Directives – classes that are used to provide additional functionality to other elements of the application. They are also divided into several types, depending on the form of interaction with the elements (I’ll skip this point to avoid going into details). They are mainly used as custom attributes of markup elements.
- Components are elements for visualizing data. They combine styles, an HTML file with markup, and JS or TS with component logic.
- Services – for the possibility of centralized data storage and utilitarian methods. They can be used by Pipes, Directives, Components, and even other Services by adding them using Dependency Injection.
- Modules are a way to group all of the above elements. In most cases, by functionality or pages.
To dilute this flow of information a little bit visually, below is an example of the same simple “Hello World” application as in the section on React, but implemented with Angular.
It is worth noting that simply adding a link to the library in index.html will not do. The example was preceded by initializing the project structure using the Angular CLI. The structure already has all the necessary files (including the root AppComponent, which I built as a simple example) with the application binding to the DOM, as well as the settings for linters, tests, Typescript, and the like.