Angular2 - 模块与组件有何不同？

Question

In the below code from ../src/app/app.module.ts ,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

---

Component consists:

• view( ../src/app/app.component.html )

• logic( ../src/app/app.component.ts )

• style( ../src/app/app.component.css )

Angular application is a tree of components. Good components have high cohesion , ie each component contains only elements with related functionality. They are also well encapsulated and loosely coupled .

---

How modules are different from components?

Answer 1

A component is just a class with the @Component() annotation. Note that .html and .css files might be referenced by the component, certainly not mandatory. The component template might very well be 'inlined' directly in the component configuration, or there simply might not be any html template at all for a given component.

A module is a structural element of an Angular application (and maybe other classes and interfaces). It is also "just a class" with the @NgModule() annotation.

It acts as a logical 'container' for your components, directives, services, pipes, etc... to help you structure your overall source code better.

You can have a look at this existing question : What's the difference between an Angular component and module

Answer 2

A module is something that has components. It wraps them up so you can import and manage them.

Notice when you make a component you can put anything that's decorated as @Injectable in your constructor:

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor(private myService: MyService) { }

  ngOnInit() {
  }

}

And magically you will have a myService to use. This is dependency injection, which is built into Angular - but it's managed on a Module level. In your module you import what other modules you want to be able to use:

imports: [
  BrowserModule,
  FormsModule
],

define what your module includes:

declarations: [
  AppComponent,
  HeroesComponent,
  MyService
],

export any components (so other modules can import them)

exports: [
  HeroesComponent
],

They help organize an application into blocks of functionality. Components are things that tell angular how to render something. Modules compose Components, Pipes, Services etc into 'blocks' that can be compiled by angular or imported and used by others.

Edit to address comment

Taking your specific question about HttpClient . The HttpClient is the service you are using to perform the actions. The HttpClientModule is the module you import into your module, so you can use the service it contains.

You import the module:

@NgModule({
  imports: [
    BrowserModule,
    // Include it under 'imports' in your application module
    // after BrowserModule.
    HttpClientModule,
  ],
})

And use the service:

@Component(...)
export class MyComponent implements OnInit {

  // Inject HttpClient into your component or service.
  constructor(private http: HttpClient) {}

  ...
}

The HttpClientModule contains within it all you need for the HttpClient to work, and packages it up so you can use it in your own projects.

This particular module only wraps up that one service, but the module could contain a bunch of related services, components, pipes or directives. For example, the RouterModule allows you to use the RouterOutlet and RouterLink directives.

Answer 3

Module in angular is set of Components, Services, Filters, or some another smaller modules too, or we can say where you import all these in order to use later in the app for future use. in a single app there can be one or more than one module may exist.

Whereas, A component controls a patch of screen called a view. You define a component's application logic—what it does to support the view—inside a class. The class interacts with the view through an API of properties and methods.

Refer this guide for more details:

https://angular.io/guide/architecture