Создание интернет магазина — часть 7 — Routing

Автор Ivan Samoilov
Создание интернет магазина — часть 7 — Routing

Мы хотим продолжить разрабатывать наш ishop и мы продолжаем разработку нашего магазина мы добавим ему сейчас и сделаем чтобы страница менялась то есть место списка продуктов.

У нас появился вовремя checkout A запрашивал данные. То есть у нас поменялся часть страницы давайте начнем с того, что я хочу разделить большой наши страницу. Яндекс части чтобы заголовок был в отдельном файле.

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

Давайте созданием новой файлы HTML и домами домами в. Вов добавим его в то же самое место только мы хотим чтобы — это была отдельным файлом потому, что наши страница становится сложная и мы хотим и поделить на несколько кусочков на HTML, но визуально — это всё будет в одном и. Мы создали новый файл. И сейчас мы просто вырезаем наш заголовок вставляем его в новой и говорим отгулял. Что именно туда куда. Вот именно в этом места нам надо вставить новый новый файл — это делается с помощью HDMI include говорит нам ставь вот в конкретное место в листе всю внутренность страницы HTML именно — это мы сейчас и сделаем следующий этап нашего развития. Когда мы увидим. Как — это работает мы начнём подменивать вот этот вот файл с другим файлом то есть вас быть несколько файлов и мы их будем подменивать, но не заголовок, а там где список продуктов. Сначала мы видим, что такое include include. Включи внешние файлы HTML внутрь этой странице вот здесь вот и мы видим, что визуально у нас всё работает мы видим остался. В правильном месте прекрасно функционирует то есть мы взяли кусок нашего файла. Яндекса и перенесли в отдельный файл этим самым облегчая работу дальше я смотрю, что у меня не очень красивый внешний вид, что она здесь есть пробелы по бокам сейчас мы — это будем устранять здесь просто надо немножко сделать порядок в дизайне — это будет на следующий этап, но принципиально кроме дизайном. Мы хотим сделать angular routing causing, что он делает он говорит при нажатии на ринг под мини мне кусок страницы на другую страницу. Вити мы — это уже обсуждали один раз — это называется Single page application. Где в том, что у нас во-первых есть. Ленки которые начинаются с клеточки как будто бы — это внутри страницы. Ленки то, что называется букмекерские сокращение внутри страницы прыгнуть. Найди ошибку какую-то внутри страницы и там где я живу там день. Пью вставляется как раз то страница как мы попросили загрузить внешние и у нас здесь есть список когда. Нажали на какой день. Какую страницу загружать — это сделано с помощью внешнего инструмента потом. Раут и. Он загружает внутрь ng-value конкретной страницы при нажатии на. Ленка и главная страница конечно загружается 1 давайте мы сейчас именно этим и будем этот пример My Perry копируем к себе и начнём польза пацан. У нас есть две темы у нас есть вот этот enderal надо сделать и немножко сделать покрасивее наш сайт заметьте, что при загрузке, но сначала загружается страница Main на слэш то есть мы всегда мы на Webasto не то прекрасна то есть Angel клубном подходит для статичного текста или тексты который будет меняться использовать так во-первых насчёт внешнего вида надо разметку то есть колонки сделать в главном 2 внутреннего уже делать — это разметка говорит, что нас есть 12 виртуальных мы говорим, что когда у нас экран очень маленький и используя например там 12 колонок все 12 для для для первого как бы компонента. А если экран не такой уж. Маленький большой. Да только. Восемь первых колонок то есть мы как бы делаем. Это называется Grid то есть делим экран на между вами мы — это уже обсуждали в предыдущей лекции предыдущих лекциях поэтому я не буду повторяться. Я просто делаю сейчас быстренько колонки были внутри главного девау и только в них внутри были панельки. То есть у нас есть контейнер на контейнер и есть по правилам bootstrap A и строка 1С строка в которой 12 главных коронных делится между в моём случае двумя компонентами первый компонент занимает 8 300 вступом на один с условием, что он большой когда к маленький каждый из компонентов занимает целую строку то есть один под другим становится вот прекрасно то есть контейнер с он всегда главный и один. Нельзя вложенные контейнеры. Также можно сделать контейнер флюид — это контейнер без боковых магазинов полей маковых полей то есть контейнер у него есть боковые поля контейнер flood у него нету маковых полей потом внутри есть строка. В каждой строке из 12 колонок. Я говорю, что для маленьких экрана 12 возьми для первого компонента. А если к вам большое только 8 1 2 компонента для второй колонки в случае маленького экрана возьми все 12 то есть они будут один под другим большого экрана redmi 3S отступаем на одну колонку в общем сумме у нас всегда должна быть 12 колонок для каждого типа экрана у меня есть два типа большой. Как можно в принципе поделить на 4 типов который встроенный внутрь ангуляр. Мы видим, что у нас внешний вид стал лучше видим, что есть действительно уступ на одну колонку кнопка Check Out я вижу кнопка Check Out выглядит плохо. Мы сейчас зайдём на bootstrap и посмотрим. Как сделать красивую таблицу. Как сделать красивую кнопку.

0 комментариев
0

Читайте также