Building Blocks of Angular Applications


Every component must be declared in exactly one NgModule. Components shouldn't fetch or save data directly. They should focus on presenting data and delegate data access to a service.



Defining a new Module


import { Component } from '@angular/core';

    selector: 'foo',
    template: '<span>Hello from Foo!</span>'
export class Foo {}


import { NgModule } from '@angular/core';
import { Foo } from './foo.component';

    declarations: [Foo],
    exports: [Foo]
export class MyModule {}


imports: [BrowserModule, MyModule]


Services are a great way to share information among classes that don't know each other.

  providedIn: 'root',

When you provide the service at the root level, Angular creates a single, shared instance of HeroService and injects into any class that asks for it.


Angular requires at least one component and one module. A component is the basic building block of Angular applications and acts much like any other HTML element. A module is a way for Angular to organize different parts of the application into a single unit that Angular can understand.

Angular in Action

Services are objects that abstract some common logic that you plan to reuse in multiple places.

Using ES2015 modules, these classes are exported, and so any component can import them as necessary. They could also have functions or even static values, like a string or number, as a way to share data between various parts of your application.

Angular in Action