- 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 namedapp.module.ts
.
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 ofdeclarations
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.
- 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()
.
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 isfoo
, 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.
A template looks like regular HTML, except that it also contains Angular template syntax.
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:
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>
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>
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>
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>
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>
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>
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.
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>
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.
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.