Jaka jest różnica między komponentem Angular a modułem

Oglądałem filmy i czytałem artykuły, ale ten konkretny artykuł wprawił mnie w zakłopotanie, na początku artykułu, który mówi

Aplikacje w Angular mają budowę modułową. Aplikacje Angular będą zawierać wiele modułów, każdy przeznaczony do jednego celu. Zwykle moduł to spójna grupa kodu, która jest zintegrowana z innymi modułami w celu uruchamiania aplikacji Angular.

Moduł eksportuje niektóre klasy, funkcje i wartości ze swojego kodu. Komponent jest podstawowym blokiem Angulara i wiele komponentów będzie tworzyło twoją aplikację.

Moduł może być biblioteką dla innego modułu. Na przykład biblioteka angular2 / core, która jest podstawowym modułem biblioteki Angular, zostanie zaimportowana przez inny komponent.

Czy są to warunki wymienne? Czy komponent jest modułem? Ale nie na odwrót?

Widoki kontrolne komponentów (html). Komunikują się również z innymi składnikami i usługami, aby zapewnić funkcjonalność Twojej aplikacji.

Moduły składają się z jednego lub więcej komponentów. Nie kontrolują żadnego kodu HTML. Twoje moduły deklarują, które komponenty mogą być używane przez komponenty należące do innych modułów, które klasy zostaną wstrzyknięte przez wstrzykiwacz zależności i który komponent zostanie załadowany. Moduły umożliwiają zarządzanie komponentami w celu nadania modułowości Twojej aplikacji.

Cóż, jest już za późno, aby opublikować odpowiedź, ale wydaje mi się, że łatwo będzie zrozumieć, kto jest początkującym użytkownikiem Angular. Oto jeden z przykładów, które podaję podczas mojej prezentacji.

Rozważ swoją aplikację kątową jako budynek. Budynek może zawierać Nkilka mieszkań. Mieszkanie jest traktowane jako moduł. Apartament może mieć wtedy Nliczbę pokoi, które odpowiadają blokom konstrukcyjnym aplikacji Angular o nazwie komponenty.

Teraz każde mieszkanie (moduł) będzie miało pokoje (komponenty), windy (usługi), aby umożliwić większy ruch do i z mieszkań, przewody (rury) do przenoszenia informacji i uczynienia ich przydatnymi w mieszkaniach.

Będziesz mieć również takie miejsca jak basen, kort tenisowy, które są wspólne dla wszystkich mieszkańców budynku. Więc można je traktować jako komponenty wewnątrz SharedModule.

Zasadniczo różnica jest następująca:

Postępuj zgodnie z moimi slajdami, aby zrozumieć elementy konstrukcyjne aplikacji Angular

Oto moja sesja Building Blocks of Angular for beginners

Najprostsze wyjaśnienie:

Moduł jest jak duży kontener zawierający jeden lub wiele małych kontenerów zwanych komponentami, usługami, rurami

Komponent zawiera:

• Szablon HTML lub kod HTML

• Kod (TypeScript)

• Usługa: Jest to kod wielokrotnego użytku, który jest współdzielony przez Komponenty, dzięki czemu nie jest wymagane przepisywanie kodu

• Potok: Pobiera dane jako dane wejściowe i przekształca je w żądane wyjście

.

Komponent kątowy

Komponent jest jednym z podstawowych bloków konstrukcyjnych aplikacji Angular. Aplikacja może mieć więcej niż jeden składnik. W normalnej aplikacji komponent zawiera plik klasy strony widoku HTML, plik klasy, który kontroluje zachowanie strony HTML, oraz plik CSS / scss do stylizacji widoku HTML. Komponent można utworzyć za pomocą @Componentdekoratora, który jest częścią @angular/coremodułu.

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

i stworzyć komponent

@Component({selector: 'greet', template: 'Hello {{name}}!'})
class Greet {
  name: string = 'World';
}

Aby utworzyć komponent lub aplikację kątową, oto samouczek

Moduł kątowy

Moduł kątowy jest zestaw kątowych podstawowych elementów, takich jak skład , dyrektyw , usług itd. Aplikacja może mieć więcej niż jeden moduł.

Moduł można utworzyć za pomocą @NgModuledekoratora.

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Moduł w Angular 2 to coś, co składa się z komponentów, dyrektyw, usług itp. Jeden lub wiele modułów tworzy Aplikację. Moduły dzielą aplikację na logiczne fragmenty kodu. Każdy moduł wykonuje jedno zadanie.

Komponenty w Angular 2 to klasy, w których piszesz logikę dla strony, którą chcesz wyświetlić. Komponenty kontrolują widok (html). Komponenty komunikują się z innymi składnikami i usługami.

Obraz jest wart tysiąca słów !

Koncepcja Angulara jest bardzo prosta. Proponuje „zbudowanie” aplikacji z „cegieł” -> modułów.

Ta koncepcja umożliwia lepszą strukturę kodu oraz ułatwia ponowne wykorzystanie i udostępnianie.

Uważaj, aby nie pomylić modułów Angular z modułami ES2015 / TypeScript.

Jeśli chodzi o moduł Angular, jest to mechanizm:

1- komponenty grupowe (ale także usługi, dyrektywy, rury itp.)

2- zdefiniuj ich zależności

3 - określ ich widoczność.

Moduł Angular jest po prostu definiowany za pomocą klasy (zwykle pustej) i dekoratora NgModule.

Składnik jest the template(view) + a class (Typescript code) containing some logic for the view + metadata(to tell angular about from where to get data it needs to display the template).

Moduły, basically group the related components, services togetherdzięki którym możesz mieć fragmenty funkcjonalności, które mogą następnie działać niezależnie. Na przykład aplikacja może mieć moduły dla funkcji do grupowania komponentów dla określonej funkcji aplikacji, takiej jak pulpit nawigacyjny, który można po prostu pobrać i użyć w innej aplikacji.