If you are a front-end web developer, there is no shortage of Javascript frameworks for you to choose from. In this post, I’d like to highlight the strengths of one of them: AngularJS (or just Angular for short).
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
First, though, let’s walk through the core features that Angular shares in common with most other Javascript front-end frameworks, such as React and Vue:
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.
Routing: SPA routing is internal and handled by Javascript — meaning that when users click on a new link, a round-trip to the server is prevented, and the application state is updated. The changed state will ultimately result in a different view of the webpage. This could be the rendering of a new component, or even a request to a server for some data that the application will turn into HTML elements.
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
Now, here’s a look at features that set Angular apart from most other Javascript frameworks.
TypeScript support: It is easy to spot and eliminate errors in Angular because of its TypeScript support. Angular is written using TypeScript language, which is basically a superset for JavaScript. It fully compiles to JavaScript. Large enterprise-scale applications challenge developers to make their code cleaner and verify code quality more often, making TypeScript a go-to choice.
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.
Conclusion
At its core, Angular shares many of the same foundational design concepts and features as other Javascript frameworks. But in other important ways, Angular is unique. If you’re deciding between Angular and a competing framework, consider the standout Angular features listed above, and whether they make Angular a better fit for your needs than the alternatives.
