Angular is a super heroic JavaScript framework for building frontend Web Applications, Angular was created and released by Google in September of 2016, it is not to be confused with Angular JS which is the prequel to Angular. Angular and Angular JS are two completely different ways of doing the same thing. Angular JS is the first version of the MVC (Model View Controller) web application development framework, while Angular is used to collectively represent further releases to the framework starting from version 2 of Angular JS. The shift from Angular JS to Angular represents a major break away from version 1 and the team at Google had to rewrite the framework from scratch.
What Is Angular?
Angular is a JavaScript framework for building client side web applications, it is a super heroic framework that allows users to build very robust applications, it is built with TypeScript and has out of the box support for TypeScript. Angular has a very strong opinion about how your web app should be built and structured. It implements an MVC approach to building a web application. Angular comes loaded with a powerful CLI that can be used to scaffold new applications, generate components, services, route gaurds, etc. The CLI also allows us to test, run and build our applications. Angular has out of the box support for Test Driven Development (TDD) which is configured with Jasmine and Karma. It also supports end to end testing with Cypress. Angular is a full fledged frameworks and it comes baked with everything you'd need to build a frontend web app.
It has a powerful router, it is reactive by default and supports two way data binding and since it is built with TypeScript, you get all the extra features of that comes with using TypeScript, Angular also has a custom state management solution built directly into it. In Angular, there is a component which is a class that's decorated with the @Component decorator, this encapsulates component logic and is regarded as the controller, there is a UI which is built with handlebars and it is known as the view while our data is the model.
Features Of Angular
Angular is a very powerful framework and it is used every week by 2 million developers. Applications that are built using Angular implements the MVC approach and this is a great thing from an architectural perspective, since application architecture is quite a problem for new Devs and large teams. You can be sure of what to expect when handed an existing Angular project to manage, this does not automatically mean that all projects built with Angular are top notch, the strict application architecture can become quite limiting as we discover other architectural patterns, this is arguably one of the pitfalls that comes with Angular. The more you build with it, the deeper you get stuck with it and IMHO being restricted to one way of doing things, isn't a great feeling. Let's examine in detail some features of Angular.
Supports TypeScript
Angular is built with TypeScript, and has full support for it, in fact I am yet to see an Angular application this is built using plain JavaScript, this is one of the best things about Angular. Since we are using TypeScript we are sure that most of the nerve racking bugs that we get when using JavaScript, is actually avoided. We get a good IDE support and auto-completion with it, the development experience is nothing short of superb due to TypeScript support. TypeScript is a super set of JavaScript that was built my Microsoft, it extends JavaScript by adding types to it. TypeScript introduces to JavaScript all the capability of a strong Object Oriented Language and static typing. If you already know how to use TypeScript then you'd get a good experience with it, however for beginners, you find out that you have to learn TypeScript in order to fully grasp Angular.
Two Way Data Binding & Reactive By default
By Default angular keeps track of the changes in our data and it will re-render the UI whenever there is a change in our application state, the MVC approach of angular allows the UI to be a proper reflection of the data or state so whenever there is a change in our data, angular will automatically detect the change and render the correct UI for it, this is quite impressive considering that some frameworks has not been able to achieve this.
Powerful CLI
The Angular CLI is another strong feature of Angular, this CLI comes baked with the full power of Angular and it allows us to run some commands on our terminal that greatly reduces certain repetitive tasks, there's ng new angular-app for creating a new angular application, there's also ng g component folder/Name for generating new angular components, ng test for testing our application and lot's of other commands, collectively these helps us to greatly simplify some mudane tasks and keeps our focus on building our application.
Dependency Injection
This is a design pattern that allows a class to request for modules that it depends on form an external source as opposed to the class creating those dependencies itself. The Dependency Injection allows Angular to be highly flexible and increases the modularity of our code base, this helps in upgrading our apps and adding new features to it. The angular CLI can be used to create a provider or service ng g service folder/Name, which is decorated with the @Inejectable decorator, It is the decorator that specifies that the service can be injected to our components, it also helps us to limit the scope of the service and the modules or components that can have access to it.
Directives
Angular extends HTML by adding custom directives to simplify some common operation we would need to carry out, these directives are simple classes that extends the behaviour of certain elements in our Angular application, there are tons of built in directives that we could use to manage forms, lists and lots more. Some example of built in directives include [NgIf] for conditional template rendering, [NgFor] for repeating a node for each item in a list. [ngClass] conditional classes or [ngStyle] for adding inline conditional styling, [ngModel] for binding to a form element.
MVC
I personally think that the MVC approach that Angular enforces is also one of the benefits of using the framework, this solves a big problem that most developers face when building applications, inexperienced developers often struggle with choosing an application structure so it is an extra benefit to have that problem already solved for you. Even some experienced developers appreciates this approach, as it helps to achieve a level of consistency when working with a team, as per everyone are on the same page and you have an idea of what to expect.
Rxjs Support
I was learning how to use Angular to build UIs when i had to learn the Rxjs library, it isn't something that I use quite often but I appreciate the library and it's approach to handling asynchronous events that happens in our application. By allowing us to treat our data as a stream, Observables allows us to keep emitting values and any subscription to that Observable will be notified of new data, allowing our application to reactive. A single Observable can be shared across different components in our application, thus sharing a single source of data, almost eliminating the need for introducing custom state management solution.
Should You use Angular
We have examined some of the obvious features of the Angular framework, but should you use it? This is an important question that frontend developers need to ask. Let's discuss some of the things you need to consider if you are planning on learning or using angular;
You see all the benefits that comes with using angular can be achieved with most frameworks, the time curve needed to come to terms with the framework is not justified at all IMHO, first you have to learn how to use TypeScript, then you have to learn how to work with Observables all this while learning how to use the framework, from a beginners perspective this can easily become just too much.
The MVC approach limits you when designing your application architecture, you have to stick to this approach even when it does not clearly fit the situation or when another approach is more practical. I hate the restrictive feeling that I get when I work with Angular, I like the freedom to choose whatever that makes sense to me, instead of being locked in to one approach.
I feel like building an application is not really straight forward with Angular, there are so many unnecessary things you need to account for when you want to build an application with Angular, I think that the framework gets in your way and that it doesn't just allow you to go straight forward to building your application.
Applications built with Angular are notorious for having large bundle sizes, you will surprised at the bundle size of a very small application, this is not ideal as we want to keep the JavaScript we ship to the browser as small as possible, this helps our apps to be more perfomant. I have built apps that total as much as 5MB with angular and this application was ridiculously simple.
In 2022 there are lots of frameworks that does what Angular does albeit with less restriction, friendlier introduction to beginners and simplicity, most frameworks now supports development with TypeScript. So you can get started with JavaScript and progresively move to TypeScript when you feel more comfortable with it.
If you are interested in learning how to build UI with angular then you can visit the official Angular documentation to start coming to terms with the framework.
That said, this article is not intended to discourage you from using Angular or to take anything away from what we can accomplish with angular, I'm just a guy on DEV that is giving his opinion with using angular. Angular is a super heroic framework that can build robust and reactive applications, what are your experience with Angular? what are your thoughts about it? After reading this, do you think that in 2022 it is a great idea to build your UI with Angular? please leave your thoughts down below and definitely add in anything you feel like i left out about the framework. Would love to see your comments down below, thank you!
Top comments (17)
Angular dev here!
I moved from React to Angular and the learning curve is way steeper, as you mentioned.
The tutorial for beginners is not great either. I was so fed up that I started to write one of my own: vitainbeta.org/2022/07/21/angular-...
On the good side, once you are into Angular you don’t need to think about which library to use for most use cases. This can be a cons as well, of course.
In big organisations, standardisation matters. Angular has an opinionated folder structure, way of doing http requests etc. I can start to work on other apps without thinking about the structure.
Just to answer your question: it depends:)
Some things should really be simple and straight forward, especially for beginners.
What do you think about the material in the link I posted? Does it seem simple?
I'll follow your tutorial to build a small app. I'm very new with Angular but I have some experience with NestJs (the project structure 90% same as Angular).
Cool! Let me know if some parts aren’t clear:)
How did you learn NestJS? Any good resource you’d like to recommend?
I've learned NestJs with this tutorials: wanago.io/2020/05/11/nestjs-api-co.... You can have a look at this link, it's very details about NestJs.
Interesting! It seems well done. Thanks for sharing:)
I went the other way, I was doing Angular and switched to React. Career-wise there were a lot more opportunities where I was with React at the time (and still today). I don't think one is better than the other, but I feel like React as a library isn't enough for most projects, enterprise or not. Instead of adopting a React based frame work every project devolves into a mish mash of random decisions with some major flaw, like performance, pipeline issues, etc. I like React better, but 5 years after switching, I think I would recommend Angular over React because of the opinionated nature; except that the cult of functional programming and anti-Angular is very strong in a lot of development houses.
Very informative answer! Thanks for your comment!
Complete bullshit.
Unlike React, Vue and some others - Angular really follows rules. In Angular logical layers are coming OOTB. In Angular it's very difficult to write shitty, unmaintainable spaghetty code, like you can do in React.
Angular requires from developers to have some knowledge of software architecture, and in its turn provides an excellent organization of this structure: modules, components, services, pipes, routes, etc. Everything on it's place and works like a fine-tuned mechanism.
If you have problems with Angular - it problem in your hands, not it the framework.
The amount of energy you put into constructing this comment is the amount of energy I summon up whenever I want to work on an Angular code base.
And if you need angular to write clean code then you need to learn about project architrcture.
Yes. And this is the problem: I met only couple of people in my entire career who had decent knowledge of software architecture from those dozens of FE developers I worked with.
So answering to your statements:
and
At first, these statements conflict with each other.
At second, probably, you simply have not enough software architecture knowledge if you really have problems working with Angular code base, because anular usualy makes work on architectural solutions WAY easier than any other framework.
Also, considering the information in your profile - you do not have a major education in information technology, so to argue that one framework or another is not needed to support the correct application architecture is at least incompetent on your part. To comply with and maintain a scalable application architecture, you either have to be a very experienced developer or be educated in the subject.
This is not the kind of thing you can be taught by videos from YouTube.
This is why such frameworks were created by more experienced engineers (than you and I) to prevent their peers from making repeated architectural mistakes.
Otherwise there wouldn't be so many projects with shitty legacy code, where developers like me would be called with a request "we're willing to pay you XXX.XXX$ a year, just clean up our code.
So answer to the question of this topic is still: Yes. You may use Angular in 2022 (and later) for mid-large projects, and you will not regret it.
The fact that you highlighted my educational background and experience to prove your point.
I have built projects with angular and react, so for what's worth angular is a great way to build an application, however I don't agree with the strictness in application architecture imposed by angular. If I was not knowledgeable in the matter as you said I'd stuck to what works but experience is the best teacher and there are other ways of doing things. What I'm really worried about is toxic people like you that don't argue from their experience and skill. The fact that I didn't major in IT while in school should make you put more respect on my name and what I ship out there.
Angular is very opinionated about how it does things. This can be a pro for very big teams or teams where the members changes frequently. Also it is good for very big projects.
I develop angular and vue apps.
And with vue 3 I must say I now prefer vue over angular.
Vue has a very good documentation.
The angular documentation mostly didn’t help IMO and you need to find an SO post or a tutorial.
Also vue is much faster in compile time and faster in runtime.
Also vue (or react) are more straight forward when implementing things. In Angular you often need to write mich more code. For example Value Accessor Pattern needs a lot of stuff.
But one of the most annoying things in angular is, that they often didn’t use the community best practices for things and invent there own way of doing things.
So a lot of cool things like vite, most monorepo tools etc. are not compatible with it or it takes some work to get it working.
In vue (or react) the things just run.
So for 95% of the projects I would prefer vue.
But one thing I love in angular are the reactive forms.
But as always. Everyone should work in a few frameworks and see which fits best for him and also gain experience to choose the right framework for the job.
Angular.js was my first ever front end framework, but when I started working with it, controllers (the early primitive version of components) were a whole new concept to me and I wrote some very sloppy code. As newer frameworks were coming in, I wanted to stick to Angular, but TypeScript got in my way and I had to leave.
Eventually I came back after learning the basics of TypeScript and I liked the overall structure of Angular apps, but I had several gripes with the framework:
Seeing that these things outweighed the pros for me, I ditched Angular and went with React. At the time, React ecosystem was still based on class components, and I preferred their simplicity over Angular, but hen I started to miss writing separate templates as opposed to sticking all html and css in JavaScript, which is a philosophy I quickly came to oppose.
Then I checked out Vue and immediately fell in love with it. I realized this is what was needed in the industry, a simple framework that you can use directly without a bundler and had some kind of structure to it while maintaining flexibility. Plus single file components meant no file hell. It was just a win-win for me all around. Spent several years with Vue and got used to it. Eventually I came back to React (my last experience with it was a redux project so I was aware that functional components were gaining more traction) and I found out everyone had migrated to hooks. I was appalled at how bad components looked now. Components were so sloppy, no separation of concerns whatsoever and there's a million ways to do the same things, so every React app looked way too different.
So ultimately I never came back to Angular and React and stuck with Vue, but currently there's a huge rift in that community because Vue 3 became a major breaking change for many libraries. That and because Vue 3 introduced composition API, which looks like a ripoff of React's hooks, I decided it was finally time to try out Svelte.
Now, my default framework is Svelte due do its simplicity and high performance, with Vue as a fall back for when I need a bigger ecosystem or to work on an enterprise app with other developers.
Very nice article just a few thing I would change is the for bundle size the way I manage my project in my main bundle there is only angular and the utilities for api calls and store management nothing else nothing more needed.
I am an Angular developer and currently learning other frameworks. What I miss the most is the Angular state management, reactivity by default. btw nice summary 🙂