An Angular Application is nothing more than a tree of Components.

How Angular Works

In this chapter, we’re going to talk about the high-level concepts of Angular. We’re going to take a step back so that we can see how all the pieces fit together.s

If you’ve used AngularJS 1.x, you’ll notice that Angular has a new mental-model for building applications. Don’t panic! As AngularJS 1.x users ourselves we’ve found Angular to be both straightforward and familiar. A little later in this book we’re going to talk specifically about how to convert your AngularJS 1.x apps to Angular.

In the chapters that follow, we won’t be taking a deep dive into each concept, but instead we’re going to give an overview and explain the foundational ideas.

The first big idea is that an Angular application is made up of Components. One way to think of Components is a way to teach 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 talk more about this distinction later on).

However, Angular Components have some significant advantages over AngularJS 1.x directives and we’ll talk about that below. First, let’s start at the top: the Application.

Application

An Angular Application is nothing more than a tree of Components.

At the root of that tree, the top level Component is the application itself. And that’s what the browser will render when “booting” (a.k.a bootstrapping) the app.

One of the great things about Components is that they’re composable. This means that we can build up larger Components from smaller ones. The Application is simply a Component that renders other Components.

Because Components are structured in a parent/child tree, when each Component renders, it recursively renders its children Components.

For example, let’s create a simple inventory management application that is represented by the following page mockup:

Inventory Management App

Given this mockup, to write this application the first thing we want to do is split it into components.

In this example, we could group the page into three high level components

  1. The Navigation Component
  2. The Breadcrumbs Component
  3. The Product List Component

The Navigation Component

This component would render the navigation section. This would allow the user to visit other areas of the application.

Navigation Component

The Breadcrumbs Component

This would render a hierarchical representation of where in the application the user currently is.

Breadcrumbs Component

The Product List Component

The Products List component would be a representation of a collection of products.

Product List Component

Breaking this component down into the next level of smaller components, we could say that the Product List is composed of multiple Product Rows.

Product Row Component

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

  • the Product Image component would be responsible for rendering a product image, given its image name
  • the Product Department component would render the department tree, like Men > Shoes > Running Shoes
  • the Price Display component would render the price. Imagine that our implementation customizes the pricing if the user is logged in to 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:

App Tree Diagram

At the top we see Inventory Management App: that’s our application.

Under the application we have the Navigation, the Breadcrumb and the Products List components.

The Products List component has Product Rows, one for each product.

And the Product Row uses three components itself: one for the image, the department, and the price.

Let’s work together to build this application.

You can find the full code listing for this chapter in the downloads under how-angular-works/inventory-app.

source https://www.ng-book.com/2/p/How-Angular-Works/

Posted on: May 30, 2019, by : ITC ITC_Admin

Leave a Reply

Your email address will not be published. Required fields are marked *