Angular has been around for almost 10 years now and the first version of angular came into existence from AngularJs back in 2009.
Angular is a framework introduced by Google and used by Google at scale to build software products and is one of the most popular front-end web development frameworks in use today globally.
To appreciate the pros of using angular for development one has to understand the architecture first since that is where lies all the magical plumbing which powers this framework and makes it one of the easiest to use to make an application for cross platforms.
The basic building block of angular are NGModules which provide all the functionalities done for users to use while developing their applications. Some of the top-level components of the architecture are as follows:
Angular ngmodules is where developers define out the entire domain, workflow and specific capabilities for an application.
Modules consist of:
Root module or Application module, which acts as the entry point where everything is orchestrated and bootstrapped. To give an analogy think of this part as the layer at which all the wiring is done.
Modules are where all the imports etc are defined for an application. To give an analogy think of the modules as an orchestrator of an ensemble.
Angular has several components which connect the dom [document object model ] with the “root component”. Components are like independent pieces of modules which can be
dependency injected into one another and developers can think of them as namespaces which hold the controller side logic in it for a part of the application.
Generally, every component of a class associates with one HTML template and serves to bind functionality for it.
You may also like Top 30 Interview Questions and Answers on Angular 5
c. Templates, directives and data binding
Templates are parts of the angular ecosystem that bind the Html in your front-end application with angular keywords or angular markups.
Remember templates live inside angular components. Think of one as a hero and the other its sidekick.
Template directives: Responsible for program logic, used with binding markups or angular keywords.
Event binding: Angular supports two-way event binding where changes reflected in your application code or inside HTML dom get reflected at both places.
d. Service and dependency injection
Angular architecture follows age-old principles of inversion of control via using dependency injection as a mechanism to do all the logic wiring across its components, making for a very loosely coupled architecture.
It enables code residing inside components to be lean, agile, mockable, making testing easy.
Enables developers to add and remove functionality from an application.
In angular, you can create a service class and use its @Injectable decorator to inject dependencies into your classes.
Routing classes are where all the URL direction, plumbing, and re-direction is handled.
This part of the architecture layer handles piping the URL to the view.
One of the smart features though provided in this is called lazy loading, where the router can load the module on demand and doesn’t have to do all the wiring at initialization, as in older routing architectures.
It is modeled to take care of the inherent hierarchies in your application as you build them out using the other components and built around the conventions/principles of how browser navigation works for end-users.
Overall Architecture Diagram Showcasing how the angular architecture is built.
1. Maintained by Google
One of the major reasons for angular being one of the most used js frameworks for web development is because it is being backed and maintained by Google and a huge community of developers worldwide.
Stats -: Stackoverflow report.
2. Job demand
One of the primary reasons to learn a specific framework in not just its complex architecture, features or support but its market value for a developer.
Due to widespread popularity and demand of the angular framework, it is a really good tool to have as a checklist item in your cv.
Looking at the demand via actual statistics gathered from various hiring sites and StackOverflow it clearly shows angular as one of the topmost preferred frameworks by developers and companies.
The data source for the above graph was based on
You may also like React vs. Angular: How are they different?
3. Two-way Data Binding
This is the one feature in angular which stands out and is the usp of the entire framework.
Two-way binding ensures any changes in the dom ( view) get reflected in the application and vice versa.
The underlying complexity is handled by the ngModule directive in angular and using these users can achieve this reflection of data and view in their applications.
It comes from a data binding technique to link your data to your view.
Any changes in your data are detected by the angular framework and updated in the view.
Angular hence provides this plumbing without the users having to end up writing a whole bunch of boilerplate code.
4. Faster Document Object Model [ HTML ] Manipulation
Because of the capability of two-way data binding inherent in the angular framework dom manipulation is the easiest in this framework. This is inherently not possible in a lot of js and jquery style frameworks and requires a lot of manual effort by the developer to implement all this.
It ends up saving developer time, effort, easing code complexity and standardizes the approach to manipulate views.
5. Faster Server Performance
Angular as a framework comes loaded with a ton of CPU performance-enhancing features and since everything is written in a type-safe manner via typescript the inherent framework in much faster than other native js ones.
It also supports caching out of the box and has various toolkits available to improve server-side performance. Some benchmarking results:
Transfer size on the client-side.
6. Ease of prototyping and iterative development support
Angular provides one of the fastest startup times to write a minimum viable app. It almost takes no time to spin up a full-fledged angular application and with a daemon server running in the background you can do iterative development.
Since users can quickly make apps, test them, see the changes in real-time getting reflected in the browser. Most systems built by google feature a really well thought out CI/CD flow [ continuous-integration & continuous-development ]. Angular is a prime example of that.
It provides all these features using ahead of time compilation concept -:
Fewer asynchronous requests
Small angular code size
Detects angular template errors early
Effective security against injection or cross-site scripting
7. Super ease of testing frontend angular applications
Since the angular architecture is built around dependency injection style of architecture it really helps in doing test-driven development which is all the buzz word these days.
It allows components to be mocked and isolated, leading to better writing of unit test cases and integration test cases for an application.
Also since it natively supports typescript you can catch more compile-time errors in your code due to incorrect variables etc.
Also offers tools like a protractor, jasmine, karma as testing tools to make your application robust and production-ready
8. MVVM Architecture
Model View Controller and Model View ViewModel architecture lay the foundation for a super responsive and fast application.
Since these are design patterns which stand the test of time and are generally the responsibility of the developer to implement or setup his codebase in this manner, which in cases of large codebases sometimes gets sloppy.
But in angular, all of that is so tightly bound to the architecture that it is very hard to deviate from the best practices.
9. Uses Plain HTML templates
Since angular applications use plain Html templates and not a custom version of them it makes development a really easy task. The framework passes the HTML as DOM elements to the compiler allowing easy re-usability, manageability, and extension of templates.
10. Component-based architecture coupled with smoother navigation using directives.
As mentioned in the architecture above all of the business logic in an angular app is segregated into multiple components where every component is responsible for a specific isolated task and has independent behavior.
There are three kinds of directives in Angular:
Components: Directives with an Html template.
Structural directives: Manipulate the DOM layout by adding and removing DOM elements.
Attribute directives: Manipulate the appearance or behavior of an element, component, or another directive.
1. A hierarchical tree-like architecture and Deep scopes.
Due to a layered architecture angular can end up being a slight difficult framework to debug sometimes and people who are not used to n-tier architectures can find some of the concepts as abstruse.
Especially debugging the scopes in a large angular application can be a pain point at times.
All the injectors into angular are also hierarchical in nature and cause angular to have deep nesting sometimes.
A problem called injector bubbling shows one of the problems with nested scopes.
A component requests another component and angular will try to meet the dependency with the components own injector, but if it can't find it, like constructors in object creation will pass that up to the chain to its parent injector and so on.
These requests keep bubbling up until angular cannot find an injector which can serve the request as it runs out of injectors to serve the request.
So in cases where it runs out of ancestors, it will throw an exception, this can be pretty painful to debug especially if you coded an error in one of the base classes.
Ways to cap this are there as well, but in general deep hierarchies do complicate matters for novice users sometimes.
Thus angular can have a steep learning curve for newbies to software development.
2. Concept of Dependency Injection and Inversion Of Control
It’s a pretty useful concept but something which developers more attuned to the traditional style of development can find a challenge.
One there are many ways to do dependency injection and in a lot of the frameworks the wiring etc is done at bean level or in a configuration layer and dependencies injected in via constructors or interface-based injection or using getters and setters.
But nonetheless, whichever approach is taken it is pretty difficult to get the hang of concept and how to manage dependencies in this manner for dom developers.
Sometimes the learning curve around DI can be a pain point for several teams.
3. Performance Tradeoff
Due to two-way data binding especially on old devices, angular dom-manipulation can also lead to a performance tradeoff since the browser will be super busy manipulating the dom elements and will take a lot of the compute resources.
Though this is not applicable to modern-day computers with enough RAM/CPU’s and even mobile devices but older versions can definitely experience a lag due to all the inherent abstraction built inside angular.
You may also like React Framework: The best choice to build modern web apps
Also, an application which is not polyglot in nature can be hard to be extensible for developers not used to a certain programming language.
5. Angular two-way binding can both be its biggest use but also its Achilles' heel.
It works on the principle of a digest-cycle, which is a recursive call to check the scope of each $scope variable or watcher in the HTML (dom tree).
In the case of huge nesting in the dom tree, this can have performance issues and developers should be careful with it.
Also, recursion has issues like consuming a huge amount of memory since the stack keeps getting filled up and can.
Also, the digest cycle works well with a limited number of watchers and angular recommendation is to have around 2000 watchers per page, but more often than not developers tend to exceed it and it can cause huge lags in the system.
6. Heavy weighted framework
A lot of competition from other lightweight and different architectures like react ( promoted by facebook ) and vue ( Alibaba ) also acts as a con for angular which is a pretty bloated and heavy framework.
Especially in the microservices world where the dev community is today, angular apps can be pretty bloated due to too much abstraction and features from the framework which can’t be wished away as they are bundled into the framework.
Also, these frameworks introduced a concept of virtual dom which made changes to views easy as compared to angular where this is missing.
7. Angular when it was designed was to conform to the MEAN Stack
Mongo [ no SQL database], Express [ Middleware ], Angular [ Frontend Framework ], Node js [ Runtime Environment ].
While developers can choose different flavors of other databases, middleware, etc too but angular is only an excellent fit in a stack very much like this.
For example, making a transactional style fintech application in angular is quite challenging due to an async based flow introduced by observables which are responsible for all the REST calls.
This has both its advantages and disadvantages, leading to a high learning curve.
One of the key reasons why angular is not in favor of enterprises style companies is the difficulty in porting legacy js/jquery based code to angular style architecture.
With a very fast and iterative development cycle with new versions of angular coming out and the community churning out new features enterprises find it challenging to keep up the pace with the system.
Also, each new release is painful to upgrade and a lot of them not backward compatible.
Also, development time and cost of resources allocated to achieve this have to be considered as well.
9. RXJs: Angular is built on two new languages typescript and RXjs.
Reactive programming is a different paradigm from a development standpoint and takes quite a bit of time to grasp and master.
Especially a lot of flattening operators, functional constructs, declarative style of programming take quite a bit of time to understand.
Rxjs is a huge library like the stl in itself and requires a lot of practice to master as compared to alternatives out there.
10. Opinionated Ecosystem
As Stephen Fluin, Developer Advocate on the Angular team writes:
Angular is opinionated, giving developers defaults for things like network connectivity, state management, language choice, build toolchain. These defaults are tested and validated with each other to ensure that the Angular platform moves forward at a steady and reliable pace.
While this may be great for people who can adhere to a particular style it is definitely something a lot of people cannot accept and do not prefer at all.
Developers especially love the flexibility and an example of the angular server page will show exactly what I mean, where user cant make out whether it's frontend code, or HTML code or backend code.
This comparison table comparing angular to the other most used and loved frameworks also highlights its strengths and weaknesses in comparison to its peers.