DEV Community

Explain Angular to Me

Ben Halpern on November 05, 2019

Angular has been around a while and has been through a journey of iterations and new approaches.

Can folks explain to me the state of Angular, its core concepts and possible future plans?

Before I start I have to point out that Angular is version 2+ of the framework, where-as AngularJs is version 1 of the framework. They have similar ideas (modules, directives, services) but the underlying code and tooling is totally different. I've heard Vue is closer to AngularJS 1 in many regards, where-as Angular is its own thing in most cases.

I will only be talking about Angular, as AngularJS has been a legacy framework for a while now, and is now more or less in LTS.

Angular is a web application framework

Angular's goal isn't necessarily to build SPA apps, but applications using web technologies.

Angular provides top of the line tooling, to the point you can use its tooling to build React and Nodejs applications using the same commands as you would to develop an Angular app. By default it uses webpack under the hood, but is flexible enough to use other build systems such as bazel (Google's builder for most projects). The tooling also supports mono-repo development and library sharing out of the box.
Angular is built for scale of apps. Almost every major standout feature was added to support building large complex apps.
- TypeScript scales better than normal JS
- Dependency Injection system to better facilitate sharing code and testing
- Reactive code (rxjs) provides more power to handle more complex use-cases.
- The module system provides more context to the build system, thus providing stuff like lazy-loading support out of the box
- built in or 1st party support for web-workers, service workers, and server-side rendering
- the entire framework was re-written (from AngularJs) due to AngularJs' issues with scaling, a newer render engine has been written (ivy) and should help improve performance of apps in most cases (who knows when Ivy get's here tho, since its been in development for years haha)
Angular's goal isn't really to focus on UI's, or even components. It's to build apps. This explains a lot of the verbosity for many use-cases that are solved with simpler syntax in the other two frameworks, but simply put taking the out of the box approach is usually better for larger projects, rather than rolling your own solution with VueJs or React.

Disadvantages of Angular

Reactive Programming/rxjs is complex as hell
The framework has a huge API surface
It's more verbose than necessary for most simple use-cases, and is simply overkill most of the time
Angular doesn't provide any out of the box opinionated state management solution. Its easy to build your own, but its not structured like the rest of the approaches that are already picked in the framework.

I'm an Angular developer and I personally like Angular's structured approach to building applications. Its very easy to run into a problem and find a solution already built into the framework. No need for external libs for important use-cases. (besides state management hehe) Angular's got your back, as long as you stick through learning all the core bells and whistles.

Edit I never noticed anything of the usual like "explain it to me like I'm five" when writing this reply. I personally don't think 5 year olds are a very good target audience for Angular so I wrote my reply for anyone interested in web development, with enough experience under their belt to be able to google-fu their way to understanding hehe. Sorry to any 5 year old reading this, but this post isn't for you. ;)

Antony Garand • Nov 6 '19

Regarding state management, NGRX is the de-facto library for redux-like state management on Angular: ngrx.io/

I particularly like the effects mechanism on ngrx, which is used to trigger side-effects in the store in a clean way!

Also, I'd like to point out that NestJS is a backend strongly inspired by the Angular architecture, and they go very well together!

Brad • Nov 6 '19

Oh man I totally forgot about mentioning which state management solutions are available and most popular, thanks for pointing it out! 😄

I also like NestJS for the same reasons I like Angular :D

Thomas Junkツ • Nov 5 '19 • Edited

Angular is what you get, when a Java developer shoehorns best practices into Javascript to give your JS mess at least a bit of structure and accidentally creates one of the three biggest and most successful frontend frameworks to build contemporary web applications.

(vis comica 😉)

negue • Nov 5 '19

I'm glad you didn't wrote "AngularJS" 🎉

As it was already mentioned, it forces you think a bit more structured.

You can split everything into components / services / redux (ngrx, ngxs and many more) but if you like you can also put everything in just one AppComponent (not recommended xD)

You can use dependency injection, if you have a shared component, which uses a data-service (interface) you can provide a different service implementation based on what different app / place you want to use it.

Thanks to TypeScript you are also forced to be type-safe, which helps a lot! (Unless you want to type everything in : any , please don't do it xD)

Hmm..., guess I can't explain it to a 5yo.

Sandeep Balachandran • Nov 5 '19

Framework .
Especially for SPAs.
Contains modules consist of components (templates) , services .
Follows MVC .
Child components can be lazy loaded for good performance.
Differential loading is supported with the new IVY engine.

For a 5 year old i would say Its maybe like your school bag. Inside there are different notebooks for different purposes. You can write english in english notebook or math in math notebook. You dont need to take all at once . You can take one by one when the corresponding subject tutor enters the class . Everything stays inside your bag which comes with a super cool features.

Angular devs, Gather around here

Nans Dumortier • Nov 6 '19 • Edited

To me it's not really clear that Angular follows "MVC". We can consider the HTML to be the view, the component.ts file to be the controller, but then, what's the model ?
I'd simply say that Angular is focused on Components, and that it brings Modules to organize them in cohesive blocks.
Then, Angular enables us to build Services, that provide functions and data to Components (thanks to Dependency Injection).

To a 5 y.o., I'd say that components are Lego blocks. We use multiple blocks to build applications. Angular is a tool that helps building those blocks, and then helps putting all those blocks together.

(Photo by James Pond on Unsplash)

Holy-Elie Scaïde • Nov 5 '19 • Edited

I've learned AngularJS as my first frontend framework, then moved to React. But I have learned Angular as part of an intership last year.
My Understanding:
When designing a web app with React, it boils down to a component tree. You can hook things in the various node of the tree or pass extra objects to it via the context. it feels like writing HTML. But Angular feels like writing Java Code. You have modules that are very similar to packages, they are basically a complete subset of the business domain. Inside those modules, you have services that are the core logic of the app, and components which are responsible for the views.

Jonathan Apodaca • Nov 5 '19

Yeah, you are spot on. Angular is like Spring for frontend: you define services, modules, etc, and then tell Angular the bits you want it to fill in (i.e., dependency injection) using, surprise surprise, annotations.

This may just be personal preference, but I quite dislike it.

Chad Collins • Nov 5 '19

Walking a tight rope of SEO testing with phrases with this one. But here goes! Checkout my article called "Explain Explain to Me" to test the algo-rhymes offered by the great google bot and the weight of Dev.to and this cool series of posts by Ben of Dev.to dev.to/ratherbsurfing/explain-expl...

Sriram.Mahadevan • Nov 6 '19

I am sort of a newbie here but I will try to explain it simply.

It lets us write single page applications.
Basically angular lets you DOM manipulation.
Above point can be done thru data binding (kinda like states in react)
Obviously routing is core concept
we can write html tags called components and can reuse the same
The architecture is like i. Application can contain one or more modules ii. A module is a collection of components (or pipes or services and so on) iii. A basic component consists of a template, its typescript and a stylesheet

Oh yeah! I forgot , it first loads the index.html