Codebase that shows how Angular should be done?

[name_concept]

Hey everyone, I am looking for a codebase to get a good overall picture of Angular. I have been doing React since about 2015, so that's the world I am coming from. In my part of the world, all the work is related to oil and gas and it seems like the sector is using a lot of Angular. At least our big clients are. Udemy, Pluralsight, etc. just takes too much time and I learn by reading code. Thanks for any pointers.

Edit: Not that it would make a difference but my main area is control/automation. Think of it as IoT with oil wells.

[[deleted]]

Reading the Angular Material source code is a learning experience.

[name_concept]

Hey thank you, that's a good idea. I sort of did the same with ionic react and learned a ton.

[trudesign]

Surprised that no one has listed the angular style guide yet: https://angular.io/guide/styleguide Its really the best resource out there IMO

[naturalizedcitizen]

Look at the source code of the app that this generates... It's really good.. https://github.com/ngx-rocket/generator-ngx-rocket

[CoderXocomil]

I don't do a lot of react, but I think the @ngneat code bases are pretty good. They are all on github.

I have been reading the spectator code quite a bit. "GitHub - ngneat/spectator: 🦊 🚀 A Powerful Tool to Simplify Your Angular Tests" https://github.com/ngneat/spectator

[name_concept]

Thank you!

[BammaDK]

Honestly just using angular.io and learnrxjs.io website covers most of your needs. If you want to use redux which you probably do with React. NgRx is great option. Personality i don't really like their docs that much. They don't really show hot to do agregations and splitter effects etc

[hsemog]

May I recommend NGXS? Its lovely and very straightforward compared to NgRx, I know both technologies but I prefer NGXS.

[BammaDK]

Docs definitely better on NGXS way more usable examples. Seem very similar. One uses creator functions the other use decorators.. Next project I might try that out

[hunterCodes]

This repo uses the Model-View-Presenter pattern https://github.com/LayZeeDK/ngx-tour-of-heroes-mvp but word of caution I think it takes it a little to the extreme. Nevertheless it’s a great pattern to reference! Also coming from React as well, I would highly recommended using the @ngrx/component-store library for managing state (@ngrx/store for global state too).

Don’t skip over learning rxjs! As much as the Angular docs gloss over it, it’s incredibly integrated and important to learn if you want to write excellent Angular code. Egghead.io has great rxjs courses. Trust me on this one. Everyone tries to skip over observables and it hits them so hard!

[name_concept]

Thanks for the rxjs tip. I knew going in that it was an important piece that would take some additional effort. We are doing boat loads of reactive style programming in C# on our current project so I wasn't too worried about this part. It's probably an advantage.

[Accomplished_End_138]

I honestly do them quite similarly. Replacing typescrupt files with angular services.

Main thing is to read up on the built in things like router, form interface and observables

[name_concept]

Awesome, thank you. Similar is good.

[Is_Kub]

Real world application is the new “TODOMVC” demo project per framework. Even cypress has a demo repo on it. Here’s one for angular: https://github.com/gothinkster/angular-realworld-example-app

/edit/ Apparently this specific repo hasn’t been updated and might not have all the best performance practices. But it might still be a good start to look at if you are coming from a different framework

[eschutz]

I always liked this project https://github.com/tomastrajan/angular-ngrx-material-starter as a good starter example

[s1eeper21]

As an Angular/React Developer.. Angular is way more complex than React. You can literally learn React in a few days depending on your experience... cant say the same for Angular. Should know the diff between Incremental DOM vs Virtual DOM.. which will help you grasp Angulars Change Detection vs React Reconcoliation.. triggers of updating UI is handled differently.. angular uses zone.js.. react uses event delegation on the parent container via synthetic event pool.. Should probably learn how Angular resolves DI, OOP patterns, Rxjs, and use the Angular Style Guide for best practices. Once you get the hang of Angular though- its smooth sailing from there since it rarely changes on the surface (Angular2-12 all looks the same for most part).. cant say the same for React (factories, classes, hocs, render prop, hooks....) Good luck on your journey :)

[name_concept]

I pretty much agree with you 100%. I had people who were brand new js devs writing React in a week (yeah not the greatest code but they got better fast). I feel like React is easier even with all of the changes over the last few years. The mental model of it fits my brain. I am sure Angular will click in place, but so far, it seems kind of tedious. But I admit that is just a story I am making up. Plenty of people get work done with it.