3

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, i.e. each component contains only elements with related functionality. They are also well encapsulated and loosely coupled.

How modules are different from components?

overexchange
  • 15,768
  • 30
  • 152
  • 347
  • 1
    Possible duplicate of [What's the difference between an Angular component and module](https://stackoverflow.com/questions/40073941/whats-the-difference-between-an-angular-component-and-module) – Dhyey Nov 15 '17 at 12:11

3 Answers3

4

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

Pac0
  • 21,465
  • 8
  • 65
  • 74
3

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.

Community
  • 1
  • 1
Joe
  • 6,773
  • 2
  • 47
  • 81
  • Does Angular2 encourage single page app, with root component? – overexchange Nov 15 '17 at 13:01
  • Yes. Or libraries of functionality that can be imported - but the project that imports it will very likely be an SPA with a root component. – Joe Nov 15 '17 at 13:06
  • For example: How would you differentiate `HttpClientModule`(@angular/common/http) from `HttpClient`(@angular/http)? Why first one is called the module? We need both for http facility. Am trying to understand the purpose of module with this example – overexchange Nov 16 '17 at 12:01
  • I've added some explination in an edit to the answer. – Joe Nov 16 '17 at 12:31
  • When we already import httpclientmodule in app.module.ts, why do we need to import httpclient service again? Can’t the module import provide it’s service? – overexchange Nov 16 '17 at 12:55
  • You don't import the httpclient service like you import an Angular module, you *inject* it as a dependency into the constructor. That provides your component or service an instance to actually use. Are you refering to the typescript `import { HttpClient } from...`? That's not Angular modules, but Typescript modules - and is much more generic and nothing to do with Angular (https://www.typescriptlang.org/docs/handbook/module-resolution.html). Typescript modules are what you do with the `export myThing...` in all your typescript files, and how they use each other. – Joe Nov 16 '17 at 12:58
  • Okay, tha's understandably confusing. Like I said, the Typescript Modules are a separate thing to Angular Modules, it's just how all typescript is composed. Angular Modules are specific classes with the `@NgModule()` decorator (they are also exported as a typescript module, like almost all the typescript you'll use). – Joe Nov 16 '17 at 13:03
  • As you said, any component that is injectable thru constructor. What is `@Input() x`, `@Output() y`? – overexchange Nov 16 '17 at 23:32
  • `Inputs` are things that can be set in the template by a parent component. Say you have a component with the selector "my-custom-input" and had an `@Input() text` you could set the child component in the root component's template: `<\..` Output is similar, but works like events, so `..` the documentation provides good examples of all these in the heroes tutorial. – Joe Nov 16 '17 at 23:37
  • In your example of `RouterModule`, i do not see importing that module in `@NgModule(imports: [..])` of `app.modules.ts` but used in `app.routes.ts` directly as `RouterModule.forRoot()`. how do I understand this? – overexchange Nov 16 '17 at 23:40
  • I'd have to see more of your code than those two snippets, and this is a whole new question, I suggest you post it as a new question. – Joe Nov 16 '17 at 23:55
0

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

Aakriti.G
  • 656
  • 1
  • 10
  • 26