Explain Angular 5 like I'm five

#explainlikeimfive #angular

Can someone please explain angular like I'm five? I'm coming from react, so its been really confusing! Thanks!

Top comments (4)

Angular is a "batteries included" framework. Whereas React is really just responsible for rendering and updating elements, Angular is a framework that includes rendering, model binding, an event system, a routing engine, dependency injection, a testing/mocking framework built on top of karma and jasmine, etc.

I'm actually the opposite of you—I started out with Angular and have been in the process of learning React. It's been a lot of work to figure out all the additional frameworks needed to accommodate all the things that come builtin with Angular. When building a React act, in addition to React itself, most applications will typically need additional frameworks:

Model/event binding: Redux/Flux, etc
Routing: react-router, etc
Testing: Jest seems to be the de facto standard
Dependency injection: I'm not aware of anything enabled dependency injection inside react

I've also found that in React, there are often times multiple ways to accomplish the same thing. For example, you can declare components by extending a base component class, or returning a function that accepts a properties object and returns a ReactNode. There are also multiple base components that can be inherited from, for example Component and PureComponent.

All the choices available in React definitely make it a bit daunting to get started with. It also makes it hard to google for a problem and find a solution that is relevant for your specific React setup.

I've been going on a bit about React, and you're asking about Angular, so what gives? I'm ultimately trying to convey the fact that when trying to figure out how to do something in Angular, there is usually a pretty consistent or prescribed way to accomplish any given task. Ultimately, Angular is a much more approachable framework that's easier to set up and get up to speed with.

I do really like React though. JSX is really cool, and I like the fact that I can include only the things I want, and it's nice that there are competing implementations of things so that I can choose the one that works best for me. For example, I really like The Elm Architecture typically used by Elm applications, and I was able to accomplish something similar using Redux.

henAutumn • May 1 '18

Thank you so much for the response! I can see how a lot of the things react needs to bring in, angular already has, which is pretty cool! This breakdown definitely helped!

Lars Gyrup Brink Nielsen • Aug 7 '18

Similar concepts:
Props -> @Input and @Output properties
State -> Other properties
componentDidMount -> ngOnInit
componentWillUnmount -> ngOnDestroy
Higher-order components -> Attribute directives
shouldComponentUpdate returning false -> ChangeDetectionStrategy.OnPush

Angular uses constructor injection. It uses the TypeScript type of a constructor argument as a token to request a dependency from the app. Dependencies are configured using NgModules, providers and the component tree.

NgModules are the mechanism used to define which other components, directives and pipes that are available in a component's template. A component can only be declared by one NgModule. That NgModule imports other NgModules which have exported components, directives and pipes that are made available in the component template.