Originally, websites were only static. And clicking on a link made all the page content reload completely. However, this significantly slowed down the loading of certain types of websites, for which only a small part of the page had been modified.
In addition to creating dynamic websites, Angular is also among the mobile development technologies dedicated to building dynamic and immersive web applications. These are websites that look like applications, with a few differences. Let’s learn more about Angular right now!
What is the Angular framework?
The technical characteristics of Angular
An Angular application is comparable to a building (App Angular) with several apartments (modules) and many elevators (services) facilitating travel between apartments. And each apartment (module) of this building has several bedrooms (components).
The main building blocks of an Angular application are:
- the components;
- the modules;
- the services.
The Angular components
The basic constituents of an Angular application, the components, represent the entire visual part of the application. Each component participates in creating the user interface (UI, for User Interface), through which the user can interact with the application.
A component can be an entire page, an element, a sub-element of a menu, a header, a footer, or a dialog box.
A component consists of several elements, including:
- a template file in the form of an HTML file, which is, in a way, the mold of the user interface;
- a CSS-style file, allowing you to customize the visual skin of the component;
- a TypeScript file that defines the behavior of the component and manages all the logic of the visual rendering of the application.
To modify or extend the behavior of a component in order to change one or more visual elements of the application, Angular makes several tools available to the developer: Guidelines, Pipes, and Data Binding (unidirectional or bidirectional).
Angular organizes components inside stand-alone blocks called modules. An Angular application has at least one module, which, by convention, is called “AppModule.” A module can depend on other modules and can be shared.
The role of a service is to provide the application, among other things, with the value or functionality it needs. A component should ideally use “services” for features that do not concern the user experience.
The service is thus used mainly for three reasons:
- component-independent features;
- access to data shared between components;
- external interactions.
The functionalities of the services are made available to the components through the so-called “dependency injection.”
What can be achieved with Angular?
In addition to websites, Angular also allows the realization of:
- web applications;
- single-page web applications or Single Page Applications (SPA);
- progressive web applications or Progressive Web Apps (PWA);
- cross-platform mobile applications.
A web application, also called Web App, is an application software hosted on a server. It is accessible from any web browser.
Unlike a mobile application, a web application does not require download or installation on a computer or mobile device. On the other hand, to access this tool, an Internet connection is required.
Single Page Application (SPA)
Single-page applications are web applications that simply dynamically update only a single page.
Progressive Web App (PWA)
Progressive Web App (PWA) refers to web applications that behave like native applications. A PWA combines a number of qualities. It is indeed:
- installable on desktop or mobile platforms;
- adaptive because it adapts to the capabilities of the browser used;
- immersive because it works in full screen;
- progressive because it works on all screen sizes.
A PWA can also work in offline mode. In addition, it is lighter than a native application which, however, retains the advantage of a high number of functions.
Even if Progressive Web Apps behave a lot like native applications, they do not have an installer bundle allowing them to be distributed via platforms such as the App Store or Google Play. This means that, unlike native applications, PWAs lack visibility.
Cross-platform mobile application
A mobile application is a downloadable application software that is installed on a mobile device. Some mobile applications can work in offline mode, while others may not.
To create a mobile application with Angular, it is necessary to use it with another framework, such as NativeScript or Ionic. Coupled with Angular, these two frameworks allow the creation of multiplatform mobile applications, in other words, applications that can run on several platforms (iOS, Android, Blackberry, Windows Phone, and many others).
Originally, Ionic was closely linked to AngularJS, then to Angular. Using Angular was, therefore, mandatory to create a mobile application under Ionic. But since version 4, Ionic also supports two other popular frameworks: React and Vue.js.
Powerful and open source, the Angular framework is a complete solution, which allows you to create websites and web applications (Web Apps and PWA), as well as cross-platform mobile applications: it is one of the best options to choose for your website tech stack. It is more mature than its main competitors, namely React and Vue.js. In addition, it has the support of a large community of contributors.