How Angular Works

By Author: meenati biswal
Total Articles: 3
Comment this article

If you’ve used AngularJS 1.X, you’ll notice that Angular has a new mental-model for constructing applications. Don’t panic! As AngularJS 1.X customers ourselves we’ve found Angular to be both sincere and familiar.

In the chapters that follow, we won’t be taking a deep dive into each concept, but as a substitute, we’re going to offer a top-level view and give an explanation for the foundational ideas. The first huge concept is that an Angular utility is made from Components.

One manner to consider Components is a manner to educate the browser new tags. If you have an Angular 1 background, Components are analogous to directives in AngularJS 1.X (it turns out, Angular has directives too, but we’ll communicate more approximately this difference later on). '

Application
An Angular application is nothing extra than a tree of Components.

Attherootofthattree,thetoplevelComponentistheapplicationitself.Andthat’swhatthebrowser will render when “booting” (a.K.A bootstrapping) the app.

OneofthegreatthingsaboutComponentsisthatthey’recomposable.Thismeansthatwecanbuild uplargerComponentsfromsmallerones.TheApplicationissimplyaComponentthatrendersother ...
... Components.Read AngularJS Online Training

Because Components are structured in a parent/toddler tree, when each Component renders, it recursively renders its kids Components. For example, let’s create an easy inventory management utility that is represented by the subsequent page mockup:

Given this mockup, to write this application the first thing we want to do is split into components.
In this example, we should institution the page into three excessive degree components
1. Navigation Component 2. The Breadcrumbs Component 3. The Product List Component

TheNavigationComponent

This issue might render the navigation section. This could permit the consumer to go to other regions of the application.

TheBreadcrumbsComponent
This might render a hierarchical representation of where in the application the person presently is.

The Product List Component
The Products List thing would be an illustration of a group of products.

Breaking this thing down into the next stage of smaller components, let's imagine that the Product List is composed of multiple Product Rows.

And of course, we could hold one step further, breaking every Product Row into smaller pieces:

• theProductImagecomponent might be chargeable for rendering a product photograph, given its picture name
• the Product Department component would render the branch tree, like Men > Shoes > Running Shoes
• the Price Display component could render the price.

I Imagine that our implementation customize s the pricing if the user is logged into include system-wide tier discounts or include shipping for instance. We could implement all this behavior into this component.

Finally, putting it all together into a tree representation, we end up with the following diagram:

At the top we see the Inventory Management App: that’s our application. Under the utility, we have the Navigation, the Breadcrumb, and the Products List components.

The Products List factor has Product Rows, one for every product.

AndtheProductRowusesthreecomponentsitself:onefortheimage,thedepartment,andtheprice.

Let’s work collectively to construct this application.

You can find the full code list for this chapter inside the downloads beneath how-angular-works/inventory-app.

Get in-depth knowledge to follow us Angular Online Training

tableau online training