#angular #module #components
#angular #модуль #Компоненты
Вопрос:
Я смотрел видео и читал статьи, но эта конкретная статья меня так смущает, в начале статьи говорится
Приложения в Angular соответствуют модульной структуре. Приложения Angular будут содержать множество модулей, каждый из которых предназначен для одной цели. Обычно модуль представляет собой сплоченную группу кода, которая интегрирована с другими модулями для запуска ваших угловых приложений.
Модуль экспортирует некоторые классы, функции и значения из своего кода. Компонент является фундаментальным блоком Angular, и из нескольких компонентов будет состоять ваше приложение.
Модуль может быть библиотекой для другого модуля. Например, библиотека angular2 / core, которая является основным модулем библиотеки Angular, будет импортирована другим компонентом.
Являются ли они взаимозаменяемыми терминами? Является ли компонент модулем? Но не наоборот?
Ответ №1:
Компоненты управляют представлениями (html). Они также взаимодействуют с другими компонентами и службами, чтобы обеспечить функциональность вашего приложения.
Модули состоят из одного или нескольких компонентов. Они не управляют никаким HTML-кодом. Ваши модули объявляют, какие компоненты могут использоваться компонентами, принадлежащими другим модулям, какие классы будут введены инжектором зависимостей и какой компонент будет загружен. Модули позволяют вам управлять своими компонентами, чтобы придать вашему приложению модульность.
Ответ №2:
Ну, слишком поздно публиковать ответ, но я чувствую, что мое объяснение будет легко понять новичкам с Angular. Ниже приведен один из примеров, которые я привожу во время своей презентации.
Рассмотрите свое угловое приложение как здание. В здании может быть N несколько квартир. Квартира рассматривается как модуль. Затем квартира может иметь N количество комнат, которые соответствуют строительным блокам приложения Angular с именем components .
Теперь в каждой квартире (модуле) будут комнаты (компоненты), лифты (услуги), чтобы обеспечить более широкое передвижение в квартирах и из них, провода (трубы), чтобы трансформироваться и сделать их полезными в квартирах.
У вас также будут такие места, как бассейн, теннисный корт, которые являются общими для всех жителей здания. Таким образом, их можно рассматривать как компоненты внутри SharedModule.
По сути, разница заключается в следующем,
Вот моя сессия по Building Blocks of Angular for beginners
Следуйте моим слайдам, чтобы понять строительные блоки приложения Angular
Комментарии:
1. Очень простой и хороший пример. Но меня снова смущает одна вещь: вы сказали, что каналы перемещают данные (транспортируют), это правильно? Насколько я знаю, каналы предназначены для преобразования данных.
2. Это правильно, вероятно, с отредактированным ответом он был изменен. Спасибо, что напомнили!
3. аналогия с Трубами по-прежнему неверна (transform = change). Я бы сказал, что трубы подобны кухням в здании, где вы можете превращать сырые ингредиенты (необработанные данные) в различные виды пищи, которые вы хотите (вареные, перченые, жареные, запеченные и т.д.). Или вы могли бы сказать, что трубы подобны мастерским в здании, где вы можете использовать различные автоматические машины чтобы легко изменить ваш объект по мере необходимости — вставьте их и извлеките измененные 🙂
4. @Prid спасибо, что поделились своими мыслями! Не стесняйтесь изменять ответ
5. В целом, это действительно хорошая аналогия. Просто, как это работает с модульностью и вложенностью модулей и компонентов? У вас есть квартиры внутри квартир или комнаты внутри комнат?
Ответ №3:
Самое простое объяснение:
Модуль подобен большому контейнеру, содержащему один или несколько небольших контейнеров, называемых Компонентом, Сервисом, каналом
Компонент содержит :
- HTML-шаблон или HTML-код
- Код (машинописный текст)
- Сервис: это повторно используемый код, который совместно используется компонентами, так что переписывание кода не требуется
- Канал: он принимает данные в качестве входных данных и преобразует их в желаемый результат.
Ссылка: https://scrimba.com /
Комментарии:
1. Не без ума от всего этого. Да, ваш компонент будет использовать сервис, но сервис должен быть указан в модуле, в массиве поставщиков. Ваша диаграмма этого не показывает.
2. Могу ли я добавить дочерний модуль внутри компонента и несколько компонентов к этому модулю?
3. Это неправильно. Компонент СОДЕРЖИТ шаблон (html), стили (css / less / scss), контроллер (typescript) и файл спецификации для тестов (typescript). Он ИСПОЛЬЗУЕТ канал или службу, которая находится в том же модуле, что и компонент, или экспортируется другим модулем.
Ответ №4:
Угловой компонент
Компонент является одним из основных строительных блоков приложения Angular. Приложение может иметь более одного компонента. В обычном приложении компонент содержит файл класса страницы просмотра HTML, файл класса, который управляет поведением HTML-страницы, и файл CSS / scss для оформления вашего HTML-представления. Компонент может быть создан с помощью @Component декоратора, который является частью @angular/core module .
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 { }
Ответ №5:
Картинка стоит тысячи слов !
Концепция Angular очень проста. В нем предлагается «построить» приложение с помощью «кирпичей» -> модулей.
Эта концепция позволяет лучше структурировать код и облегчить повторное использование и совместное использование.
Будьте осторожны, чтобы не перепутать угловые модули с модулями ES2015 / TypeScript.
Что касается углового модуля, то он представляет собой механизм для:
компоненты 1-й группы (но также службы, директивы, каналы и т. Д.)
2- определите их зависимости
3- определите их видимость.
Угловой модуль просто определяется с помощью класса (обычно пустого) и декоратора NgModule.
Комментарии:
1. Angular создает веб-приложения с компонентами
Ответ №6:
Модуль в Angular 2 — это нечто, состоящее из компонентов, директив, сервисов и т.д. Один или несколько модулей объединяются, чтобы создать Приложение. Модули разбивают приложение на логические фрагменты кода. Каждый модуль выполняет одну задачу.
Компоненты в Angular 2 — это классы, в которых вы пишете свою логику для страницы, которую хотите отобразить. Компоненты управляют представлением (html). Компоненты взаимодействуют с другими компонентами и службами.
Ответ №7:
Компонент есть 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 , чтобы у вас могли быть фрагменты функциональности, которые затем могут выполняться независимо. Например, приложение может иметь модули для функций, для группировки компонентов для определенной функции вашего приложения, например, панели мониторинга, которую вы можете просто захватить и использовать внутри другого приложения.