В чем разница между угловым компонентом и модулем

Я смотрю видео и читаю статьи, но эта конкретная статья приводит меня в замешательство: в начале статьи написано

Приложения в Angular следуют модульной структуре. Приложения Angular будут содержать много модулей, каждый из которых предназначен для одной цели. Обычно модуль - это сплоченная группа кода, которая интегрируется с другими модулями для запуска ваших приложений Angular.

Модуль экспортирует некоторые классы, функции и значения из своего кода. Компонент является фундаментальным блоком Angular, и несколько компонентов будут составлять ваше приложение.

Модуль может быть библиотекой для другого модуля. Например, библиотека angular2 / core, которая является основным модулем библиотеки Angular, будет импортирована другим компонентом.

Это обменные условия? Является ли компонент модулем? Но не наоборот?

Компоненты управления представлениями (html). Они также взаимодействуют с другими компонентами и службами, чтобы обеспечить функциональность вашего приложения.

Модули состоят из одного или нескольких компонентов. Они не контролируют любой HTML. Ваши модули объявляют, какие компоненты могут использоваться компонентами, принадлежащими другим модулям, какие классы будут внедрены инжектором зависимости, а какой компонент загружен. Модули позволяют вам управлять своими компонентами, чтобы внести модульность в ваше приложение.

Что ж, уже слишком поздно отправлять ответ, но я чувствую, что будет легко понять, кто новичок в Angular. Ниже приведен один из примеров, которые я привожу во время своей презентации.

Рассмотрим ваше угловое приложение как здание. В здании может быть Nнесколько квартир. Квартира считается модулем. В квартире может быть Nколичество комнат, соответствующих строительным блокам приложения Angular, называемых компонентами.

Теперь каждая квартира (Модуль) будет иметь комнаты (Компоненты), лифты (Услуги), чтобы обеспечить большее движение внутрь и наружу квартир, провода (Трубы), чтобы перемещать информацию и делать ее полезной в квартирах.

Вы также будете иметь места, такие как бассейн, теннисный корт, которые являются общими для всех жителей здания. Таким образом, они могут рассматриваться как компоненты внутри SharedModule.

В основном, разница заключается в следующем,

Следуйте моим слайдам, чтобы понять строительные блоки приложения Angular

Вот мой сеанс на Building Blocks of Angular for beginners

Самое простое объяснение:

Модуль похож на большой контейнер, содержащий один или несколько небольших контейнеров, которые называются Компонент, Сервис, Труба

Компонент содержит:

• HTML-шаблон или HTML-код

• Код (машинопись)

• Сервис: это повторно используемый код, который используется Компонентами так, что перезапись кода не требуется

• Труба: принимает данные в качестве входных данных и преобразует их в желаемый выходной

,

Угловой компонент

Компонент является одним из основных строительных блоков приложения Angular. Приложение может иметь более одного компонента. В обычном приложении компонент содержит файл класса страницы представления HTML, файл класса, который управляет поведением страницы HTML, и файл CSS / scss для стилизации вашего представления HTML. Компонент может быть создан с использованием @Componentдекоратора, который является частью @angular/coreмодуля.

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

и создать компонент

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

Чтобы создать компонент или угловое приложение, вот учебник

Угловой модуль

Угловой модуль установлен угловые основные строительные блоки , таких как компонент , директивы , услуги и т.д. приложение может иметь более одного модуль.

Модуль может быть создан с использованием @NgModuleдекоратора.

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

Модуль в Angular 2 - это нечто, состоящее из компонентов, директив, сервисов и т. Д. Один или несколько модулей объединяются в приложение. Модули разбивают приложение на логические кусочки кода. Каждый модуль выполняет одну задачу.

Компоненты в Angular 2 - это классы, в которых вы пишете логику для страницы, которую хотите отобразить. Компоненты управляют представлением (html). Компоненты связываются с другими компонентами и сервисами.

Одна картинка стоит тысячи слов !

Концепция Angular очень проста. Предлагается «собрать» приложение с помощью «кирпичиков» -> модулей.

Эта концепция позволяет лучше структурировать код и облегчить повторное использование и совместное использование.

Будьте осторожны, чтобы не перепутать угловые модули с модулями ES2015 / TypeScript.

Что касается углового модуля, это механизм для:

1-группа компонентов (но также услуги, директивы, трубы и т. Д.)

2- определить их зависимости

3- определить их видимость.

Модуль Angular просто определяется с помощью класса (обычно пустого) и декоратора NgModule.

Компонент есть 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).

Модули, basically group the related components, services togetherтак что вы можете иметь функциональные блоки, которые затем могут работать независимо. Например, приложение может иметь модули для функций, для группировки компонентов для определенной функции вашего приложения, такой как панель инструментов, которую вы можете просто взять и использовать в другом приложении.