Introduction to Angular concepts https://angular.io/guide/architecture

angular_architecture.md

Modules

• An NgModule declares a compilation context for a set of components that is dedicated to an application domain, a workflow, or a closely related set of capabilities.
• An NgModule can associate its components with related code, such as services, to form functional units.
• The root module, AppModule, typically resides in a file named app.module.ts.

Metadata

An NgModule is defined by a class with the @NgModule() decorator, which is a function that tkaes a single metadata object. Some of the most important properties are:

• declarations: The components, directives, and pipes that belong to the module.
• exports: The subset of declarations that should be visible in the component templates of other modules.
• imports: Other modules whose exported classes are needed by component templates declared in this module.
• providers: Creators of services that this module contributes to the global collection of services.
• bootstrap: The main application view; only the root module should set this property.

Components and Templates

• A component controls a patch of the screen called a view, which is a component and its associated template.
• Has application logic to support the view.
• Interacts with its view through an API of properties and methods.
• Has a bunch of lifecycle hooks such as ngOnInit().

Component Metadata

A component is defined by a class with the @Component() decorator, which is a function that tkaes a single metadata object. The metadata for a component tells Angular where to get the major building blocks that it needs to create and present the component and its view. In particular, it associates a template with the component. This combination of a template and a component describe a view.

Some of the most important metadata properties for a component are:

• selector: The name of the tag in template HTML where the component should be inserted. For example, if the selector is foo, then an instance of the component is inserted between <foo></foo>.
• templateUrl: The module-relative address of this component's HTML template (the component's host view).
• providers: An array of providers for services that the component requires.

Template Syntax

A template looks like regular HTML, except that it also contains Angular template syntax.

Data binding

Data binding is a process that allows apps to display data values to a user and respond to user actions (such as clicks, touches, and keystrokes).

There are different types of data binding:

Interpolation

Embedded expressions into marked up text. By default, interpolation is denoted by double brackets {{. The expression within the brackets is first evaluated and then returned as a string to be embedded in the template.

Example:

<p>I am {{age}} years old</p>

Property binding

One-way data binding from a component's property into a target element property. Use property binding to set properties of target elements.

Example:

<app-item-detail [childItem]="parentItem"></app-item-detail>

Event binding

Binds an event handler to an event on a particular element. Event binding consists of a target event name within parentheses on the left of an equal sign, and a quoted template statement on the right.

Example:

<button (click)="templateStmt()">Save</button>

Attribute binding

Sets the value of an attributes directly. The name of the attribute in brackets must be prefixxed with attr followed by a dot (.).

Example:

<button [attr.aria-label]="actionName"></button>

Class binding

Adds and removes CSS class names from an element.

Examples:

<div [class.foo]="hasFoo">has class foo if hasFoo is truthy</div>
<div [class]="foo bar">div has classes foo and bar</div>
<div [class]="{foo: true, bar: false}">div has class foo</div>

Style binding

Sets inline style to an element dynamically.

Examples:

<p [style.color]="blue">blue text</p>
<p [style]="width:100px;height:100px;display:block;background:red;">red box</p>

Two-way data binding with NgModel

Click here to learn more about two-way data binding. In essence, the NgModel directive allows you to display a data property and update that property when the user makes changes.

Pipes

A class with the @Pipe decorator defines a function that transforms input values to output values for display in a view. To specify a value transformation in an HTML template, use the pipe (|) operator. Pipes can be chained (very similar to how they work on the command line).

Example:

<p>Today is {{today | date}}</p>

Services and dependency injection

A service is a broad category encompassing any value, function, or feature that an app needs. A service is typically a class with a narrow, well-defined purpose.

The distinction between components from services is important to increase modularity and reusability.

Ideally, a component's job is to enable the user experience and nothing more. A component can delegate certain tasks to services, such as fetching data from a server, validating user input, logging, etc. By defining such processing tasks in an injectable service class, you make those tasks available to any component.

Dependency injection (DI)

To define a class as a service, use the @Injectable() decorator. An injector creates dependencies, and maintains a container of dependency instances that it reuses if possible. A provider is an object that tells an injector how to obtain or create a dependency.

You must register at least one provider of any service you are going to use.