Everything created was created to solve a problem. So why was Angular created in the first place? What problems was it created to solve?
Angular is a TypeScript-based open-source web application framework, developed and maintained by Google. It offers an easy and powerful way of building frontend web-based applications.
When Google released Gmail in 2004, it showed the world that web apps really could replace complex desktop applications. Google even open-sourced the Closure toolkit - a set of libraries and an optimized compiler that it used to build Gmail.
As a result, a few enterprising developers began to work on frameworks that would bring Gmail-like apps within reach of web developers.
Fun fact: Did you know where Angular got its name from? It was from the
< >in HTML 🙂
Angular offers the following features:
- Out-of-the-box features: Several built-in features like routing, state management, rxjs library, and HTTP services are straight out of the box services provided by Angular.
- Two-way data binding: Built with Model-View-Controller (MVC) architecture, Angular synchronizes the Model (JavasScript variables) and the View (HTML). As the data in the Model changes, the View does too. Two-way data binding allows developers to reduce development time as they don't need to write additional code to provide continual View and Model synchronization. Prior to this, most developers had only seen this kind of data binding in desktop frameworks like WPF and Windows Forms.
- Directives: Directives allow developers to assign special behaviors to the DOM in order to create dynamic and rich content with HTML. Directives also provide an easy way to create reusable HTML + CSS components.
- Dependency Injection (DI): Dependency defines how different pieces of code interact with each other and how the changes in one component impact the other one. Usually, dependencies are directly defined in the components themselves. Therefore, every change in dependency requires changing components as well. With Angular, we can use Injector to define dependencies as external elements, which in turn decouples components from their dependencies. DI makes components more reusable and easier to manage and test. Need an HTTP client? No problem! Angular has a built-in service for that. Just ask for them, and Angular would inject it into your components. No need to instantiate anything yourself.
Angular is one of the most well-known solutions for SPA development besides React and Vue.js. It has been around for over 10 years and it has gone through countless adjustments since then. AngularJS was the first version of the framework which laid the foundation for today frontend application development.