Продолжим тему быстрого питания. Вы хозяин небольшого кафе/магазина/чего угодно (кроме магазина покемонов, прошу), и у этого заведения есть возможность сделать заказ через интернет. В вашем приложении планируется две страницы: страница со списком всех товаров и страница с корзиной, в которой пользователь может ввести свои данные и отправить заказ. В течении нескольких домашних заданий мы постепенно соберем это приложение.
- Определитесь с тематикой вашего заведения, названием. Cоздайте приложение с этим названием (
ng new) - Создайте компонент карточки товара. Он должен выводить название товара и стоимость.
- Создайте компонент списка товаров. Он должен просто выводить карточки всех товаров.
- Вставьте компонент со списком товаров в app компонент. Данные, которые использует этот список, должны браться из app компонента.
Для реализации посмотрите, как работает @Input()(propety binding) и *ngFor.
- Карточка товара должна отображать количество выбранного товара с кнопкой
+. Изначальное количество - 0, каждое нажатие на+должно добавлять 1 товар. Для того, чтобы это сделать, посмотрите, как работает@Output()(event binding). - Помимо кнопки
+, добавьте кнопку-. Она вычитает 1 товар. Если товаров 0, то она disabled. - Поместите все данные о товарах в сервис.
- Карточка товара должна отображать количество выбранного товара с кнопкой
+. Изначальное количество - 0, каждое нажатие на+должно добавлять 1 товар. Для того, чтобы это сделать, посмотрите, как работает@Output()(event binding). - Если пользователь наводит курсором мыши на карточку товара, то она подсвечивается рамкой. Если пользователь уводит курсор с карточки, то выделение исчезает. Реализуйте это с помощью
@HostListener(). - Для компонента списка реализуйте следующее: если он пуст, то отображается html, переданный через Content Projection. Если в него передан непустой массив, то он отображает карточки с товарами.
- Добавьте на страницу второй список и передайте в него пустой массив. Добавьте для первого списка заголовок "Товары" (или что-то другое, что соотвествует вашему контексту), а второму "Корзина". Определите для каждого из них надписи, которые отображаются, если список пуст.
- Реализуйте добавление товаров в корзину, т.е. кнопку
Добавить в корзинуна карточке и обновление списка с корзиной. Учите, что кнопкаДобавить в корзинув корзине не должна отображаться.
- Все сущности, которые вы добавляете, должны быть сгенерированы при помощи
ng cli - Выберете с самого начала css препроцессор, который вы используете/хотите попробовать, и добавьте его в опции при выполнении команды
ng new(можно добавить и после создания проекта, если не разберетесь, как это сделать, пишите). Если вы никогда не имели дело с препроцессорами, то можно пропустить это требование - (не обязательно к выполнению, в первую очередь для тех, кто уже пишет на ангуляре) Используйте библиотеку Angular Material
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent