Когда я начал изучать Angular, мне было трудно понять, как мне изменить свое мышление с предыдущих версий на новый подход. Сдвиг немного сбивает с толку, и перевод того, что я узнал из руководств, в свои собственные проекты, был трудным и полным ошибок. Все, что я смог найти в Интернете, — это набор примеров кода и способы их генерации с помощью angular-cli. Не то чтобы они были бесполезны. В конце концов, мне удалось узнать из этих руководств. Но я чувствовал, что не хватает руководств, которые помогут нам понять, как спроектировать и создать угловой проект для нашего собственного проекта.

В этой статье я хочу показать, как создать проект Angular с проблемой и проектом в руках. Я считаю, что этот учебник будет полезен после того, как вы прочитаете некоторые примеры, такие как официальный учебник по героям Angular.

Большая фотография

Прежде чем идти дальше, я хочу создать общую картину того, что мы хотим осветить и как мы хотим это сделать. Сначала мы должны изучить концепцию компонента и модуля. Что они означают и как они работают. Во-вторых, я хочу поговорить о различных типах компонентов в нашем проекте. Затем мы поговорим о маршрутизации и, наконец, об услугах. Я стараюсь не включать коды как можно больше. Поскольку, если вы чем-то похожи на меня, есть большая вероятность, что вы пропустите статью и скопируете код. Кроме того, я хочу, чтобы все было как можно проще. Итак, давайте копать.

Во-первых: компоненты и модули

Компонент управляет видом. Вы определяете логику каждого представления и способы управления ими. Компонент управляет данными, которые необходимо отобразить на экране. Возьмем, к примеру, имя компонента users. В этом компоненте вы отвечаете за отображение пользователей, определение того, какие пользователи должны отображаться, и управление действиями, которые могут произойти с этими пользователями.

Каждый компонент состоит из трех частей:

CSS компонента

шаблон компонента

и файл сценария типа компонента.

Файл сценария типа компонента — это файл, который отвечает за адресацию файлов css и шаблонов, а также за управление данными, которые необходимо заменить.

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

Но я должен сказать, что чрезмерное использование модулей может оказаться ловушкой. У вас должно быть представление о том, что вы хотите использовать повторно, а что нет. Я поклонник простого кодирования, и код, который можно легко прочитать, намного лучше, чем код, который трудно понять (даже несмотря на то, что его можно использовать повторно). Так как все-таки нам, людям, приходится их развивать. В Angular есть модуль приложения, который отвечает за обработку модулей. Я предлагаю не определять наши компоненты в модуле приложения. Вы можете определить разные модули для разных доменов и один модуль для своего проекта.

Второе: различные типы компонентов

Теперь мы знаем домен наших проектов и какие модули мы хотим использовать повторно, а какие нет.

Теперь нам нужно решить, какие компоненты нам нужны. У нас есть два разных компонента. Компоненты, отвечающие за создание наших страниц, и компоненты, отвечающие за объекты. Рассмотрим пользовательский объект. У вас может быть страница в вашем проекте, которая показывает пользователей и показывает каждого пользователя, когда вы наводите указатель мыши на любого пользователя. Итак, на этой странице у нас есть два компонента: список пользователей и сведения о пользователе. Но каждого пользователя можно просматривать, читать, редактировать, добавлять и удалять (ХЛЕБ). Для каждого из этих действий мы могли бы создать компонент, который ими управляет. Например, компонент для добавления пользователя, компонент для удаления пользователя и… И затем мы могли бы создать компонент страницы, который объединяет эти компоненты.

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

Третий шаг: маршрутизация

Это простой шаг. Я что-то понял об angular, когда прочитал о маршрутизации. Все сошлось, когда я узнал об этом.

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

Последний шаг: услуги

Услуги — это единственная часть, которую я предлагаю изучать, читая коды. Все зависит от вашего бекенда. То, как вы справляетесь с этим, может измениться. В angular вы можете определять объекты и машинописный текст, чтобы избежать любого анти-шаблона. Но есть хороший шанс, что ваш бэкенд не основан на вашем шаблоне, и вам следует использовать тип объекта Devil -any- для обработки вашего бэкенда. После того, как вы написали свои службы, вы вызываете их в компонентах каждой страницы и назначаете их нужным компонентам.

Вывод

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