While Angular might not be the best framework for all situations, it has certain features and design components that make it an excellent choice for certain scenarios. Let’s explore those strengths.
How Angular is not unique
The SPA Architecture: Single-page apps are distinguished by their ability to redraw any part of the UI without requiring a server round-trip to retrieve HTML. This is achieved by separating data from the presentation of data by having a model layer that handles data and a view layer that reads from the models.
A typical SPA should possess four or more of these layers:
- Application Domains
- Application store
- Application service
- View components
The domain describes the state and the business logic. It represents the core of our application as required by the view layer.
The application store holds the current state of the app. It is modeled after the business logic and holds current data being transacted in the application.
The application service is where all kinds of operations are performed. The application service layer acts as an interface between the view components and the application store.
The view layer serves the conventional aspects of front-end development, rendering HTML to the browser. It is made of reusable logic referred to as components. Components are critical in building larger applications. Without components or component-based UI development, our applications become monolithic.
Dataflow and state management: It is essential that the application renders the current state of the app. When methods and functions are executed that change the application state, management libraries modify and update the application store.
Testing: Component testing ensures that the app methods, functions and components perform their expected functions. Large applications require that all components be tested to identify points of failure.
Working with the backend: A full-scale application requires a persistent data store; client-side applications require API query libraries to request and query data as needed by the application.
Angular’s special features
Mobile-first approach: Angular is designed with a mobile-first approach, making it perhaps the ideal framework to share your codebase and engineering skills across web, iOS, and Android applications. The Angular and NativeScript frameworks are focused on building a close-to-native mobile app experience.
Angular CLI: The Angular CLI has become extremely robust. It now enables you to complete tasks such as:
- run a development server with LiveReload support to preview your application during development
- add features to your existing Angular application
- run your application’s unit tests
- run your application’s end-to-end (E2E) tests
- build your application for deployment to production.
Angular elements: Angular elements are Angular components packaged as custom elements, which can be used as web standards for defining new HTML tags. Angular elements can be used just like regular HTML. Usage of these elements is not limited to Angular alone — They can be used in other frameworks and libraries.
When used with other frameworks/ libraries, the element tags function just like an Angular component would, and can perform Angular-based operations without integrating Angular into a project.
Dependency injection: Angular dependency injection offers a unique way of modulating dynamic applications. Dependency injection is used to provide new Angular components with pre-existing services. Services can be injected into a component, giving the component access to service classes.
When Angular creates a new instance of a component class, it determines which services or other dependencies that component needs by looking at the constructor parameter types.
When Angular discovers that a component depends on a service, it first checks if the injector has any existing instances of that service. If a requested service instance doesn’t yet exist, the injector makes one using the registered provider, and adds it to the injector before returning the service to Angular.
When all requested services have been resolved and returned, Angular can call the component’s constructor with those services as arguments.