Теперь мы перейдем к
наше следующее упражнение, где мы создадим
новый компонент и добавим его в наше угловое приложение.
Затем мы будем использовать этот компонент для управления частью
экрана, который мы разработали для нашего углового приложения.
Экран для нашего углового приложения довольно скучный на данный момент.
Все, что у нас есть, это панель инструментов в верхней части, а затем пустой,
белый экран здесь, но это также дает нам идеи.
Теперь мы можем взять дополнительный контент, а затем
поместить его в эту часть экрана здесь. Как мы это сделаем?
Мы можем создать новый компонент, а затем передать
по этой части экрана этому компоненту и сказать:
«Вы заботитесь о том, чтобы сделать все, что вы хотите, в эту часть экрана.»
Таким образом, этот вид будет контролироваться новым компонентом.
Как мы это сделаем? Давайте пройдем упражнение сейчас.
Чтобы начать с упражнения,
перейдите к инструкциям по упражнению, которые следуют этому видео.
Затем в инструкции упражнения
вы увидите некоторые ресурсы упражнений,
, который является zip-файлом, доступным для вас.
Загрузите этот zip-файл на ваш компьютер,
, и это даст вам images.zip файлы.
Итак, просто сохраните его как images.zip файл в папку загрузок,
распаковать его, а затем это даст вам
папку изображений, содержащую
набор изображений, которые мы собираемся использовать в нашем приложении.
Распакуйте файл images.zip, который вы только что скачали,
и перемещайте этот файл images.zip в свой проект,
и внутри вашего проекта,
в папку источников и ресурсов здесь.
Итак, снова переместите папку изображений, которую вы получаете
распаковывая файл images.zip, а затем переместить эту папку изображений в ваше приложение,
так, внутри вашего приложения,
в подпапку источников и активов.
Эти изображения, поставляемые здесь, будут
доступны для использования в приложении Angular.
Теперь мы собираемся использовать угловой CLI для
автоматически генерировать компонент для нас и добавить его в наше угловое приложение.
Итак, в терминале
перейдите в папку, содержащую ваше угловое приложение и введите
ng генерировать меню компонента.
Итак, мы назовем этот компонент как MenuComponent.
Этот MenuComponent будет содержать меню для
ресторан, который мы готовим наше угловое приложение для.
Таким образом, когда вы вводите это,
это автоматически генерирует
MenuComponent, а затем добавит его в ваше угловое приложение.
Этот MenuComponent будет создан и добавлен в
папку источника/приложения/меню вашего приложения.
Таким образом, он создаст набор файлов в папке меню.
Таким образом, вы можете видеть, что он создает файл SCSS,
файл HTML, и файл ts,
, а затем что-то называется файл спектральных ts.
Мы вернемся к этому позже.
Затем, также, он обновит ваш файл module.ts.
Итак, давайте посмотрим, что только что произошло, когда вы
создали этот MenuComponent и добавили его в ваше угловое приложение.
Пойдем в редакцию.
Приходя в наш редактор,
вы теперь заметите, что,
в папке приложения,
есть новая папка называется меню там,
и эта папка меню содержит все файлы, связанные с MenuComponent.
Угловой интерфейс командной строки соответствует руководству по стилю Angular Standard.
Руководство по стилю предполагает, что каждый компонент должен быть помещен
в свою собственную папку, как видно здесь,
, и мне очень нравится это, потому что я очень навязчиво отношусь к
, сохраняя его чистую иерархию для моих папок приложений здесь.
Итак, это работает очень хорошо для меня.
Некоторые люди любят плоскую иерархию,
но я просто путаюсь с этой частью.
Итак, я предпочитаю хранить каждый компонент в своей собственной папке.
Итак, это хорошо работает для меня.
Теперь, если вы откроете файл app module.ts,
вы заметите, что файл app module.ts был обновлен
, включив другой импорт в файл app module.ts.
Итак, вы видите, что вместе с AppComponent
MenuComponent был автоматически добавлен в качестве импорта в ваш модуль приложения.
Таким образом, это означает, что MenuComponent теперь
доступен для вашего углового приложения.
Также, если вы проверите свойство объявлений внутри декоратора NgModule,
вы увидите, что в свойстве декларации
в дополнение к AppComponent,
у вас также есть MenuComponent.
Вот почему я люблю Angular CLI,
, потому что это упрощает все это работало для меня.
Если я должен был сделать это вручную,
мне придется вручную зайти в приложение module.ts, а затем ввести весь этот код там
, и есть большая вероятность, что я в конечном итоге допущу ошибки там.
Итак, мы спасаем себя много неприятностей, используя угловой интерфейс командной строки.
Итак, вот почему я влюбился в
Angular CLI для создания своих угловых приложений.
Таким образом, с этим, мы настроили
наш MenuComponent, чтобы быть доступным для нашего углового приложения.
Теперь, где я собираюсь использовать MenuComponent?
Я собираюсь использовать MenuComponent внутри моего шаблона AppComponents.
Итак, я перейду к шаблону AppComponents, а затем
включу MenuComponent здесь, в моем AppComponent.
Таким образом, это по существу передат эту часть экрана моему MenuComponent.
Как мы это сделаем?
Для этого сначала мы рассмотрим файл MenuComponent.ts.
Итак, когда вы открываете файл MenuComponent.ts,
вы увидите, что селектор для MenuComponent был определен как меню приложения.
Итак, это стандартное имя селектора, которое дает угловой CLI для ваших компонентов.
Вы можете изменить это, если хотите,
, но какой бы селектор вы ни указали здесь,
, который сформирует теги, которые вы используете, чтобы включить его в файл шаблона.
Итак, возвращаясь к AppComponent.html,
сейчас, если я хочу включить файл меню здесь,
, так что я просто скажу,
тег меню приложения и вуаля,
, что часть экрана теперь передается моему MenuComponent,
и это до MenuComponent, чтобы решить, что он хочет разместить там.
Итак, что бы ни было определено,
шаблон MenuComponents будет размещен здесь.
Итак, теперь все, что нам осталось, это пойти и подготовить
наш MenuComponent, чтобы показать соответствующую информацию для нас.
Давайте сохраним изменения
, а затем мы перейдем на
следующий шаг, где мы создадим меню для нашего ресторана с помощью MenuComponent.
Прежде чем я это сделаю,
, что я собираюсь сделать, это,
перейдите в папку приложения здесь,
, а затем в папке приложения,
я собираюсь создать новую подпапку и имя, что как общая подпапка.
Теперь, любые файлы, которые я собираюсь поделиться между различными компонентами,
Я собираюсь поместить его в общую папку здесь.
Теперь, внутри общей папки,
я собираюсь создать новый файл с именем dish.ts.
Внутри этого dish.ts я собираюсь создать класс, чтобы определить
блюдо и сделать его доступным для остальных компонентов для использования.
Итак, чтобы определить класс TypeScript здесь,
я скажу экспорт,
, поэтому я экспортирую этот класс TypeScript здесь,
класс экспорта, а затем я назовем класс как блюдо.
Внутри этого класса блюд
теперь я могу определить различные свойства.
Итак, для класса блюд
я определяю одно свойство,
, которое является идентификатором, который я определяю как строку.
Теперь обратите внимание, что если вы пришли из мира JavaScript,
в JavaScript, вам не нужно указывать тип любой переменной.
TypeScript вносит в этот объект для вас, чтобы указать тип для каждой переменной.
Итак, если вы укажете имя, столбец и строку,
это означает, что переменная имени всегда будет строковым типом.
Итак, если вы попытаетесь назначить целое число имени,
, то компилятор TypeScript автоматически
поймает это для вас, а затем скажет вам, что есть ошибка.
Вот почему, используя TypeScript,
вы можете уменьшить количество ошибок, которые вы можете вызвать.
JavaScript традиционно не выполняет эту ошибку
, потому что он не имеет понятия типов данных.
Но если вы исходите из традиционного языка программирования, такого как C ++ или Java,
вы очень знакомы с типами данных,
примитивными типами данных и
другими типами данных, которые уже определены в языке.
TypeScript приносит эту функцию в JavaScript или, скорее, как часть TypeScript,
и это позволяет вам определять переменные и присоединять типы к этим переменным,
отсюда имя TypeScript.
Итак, для блюда
я собираюсь создать свойство имени.
Затем я собираюсь создать свойство изображения,
, которое также является строкой.
Эта строка изображения будет строкой, которая указывает на
URL изображения, которое я собираюсь использовать для этого конкретного блюда.
Тогда я определяю категорию для этого блюда, а также другую строку, обозначаемую как Boolean,
label в виде строки.
Цена в виде строки, а затем описание в виде строки.
Итак, это свойства, которые я связываю с классом блюд.
Таким образом, это определит различные блюда в моем меню моего ресторана,
и для каждого блюда мне нужно указать все эти различные свойства.
Зачем мне это нужно?
Это поможет мне построить меню для моего ресторана, как вы увидите довольно скоро.
Итак, с этим мы завершаем определение моего класса там.
Давайте сохраним изменения в файле dish.ts.
Теперь этот файл dish.ts экспортирует класс.
Теперь я могу импортировать этот класс в любой из
файлов сценариев типа компонента моего приложения.
Далее я перейду к моему файлу menu.component.ts.
Внутри файла menu.component.ts в дополнение к импорту компонента
я также увижу, что вы импортируете OnInit туда.
Придем к части OnInit в одном из последующих упражнений.
Я объясню, что это делает в последующем упражнении.
Мы также импортируем новый класс, который мы создали под названием Dish class.
Почему мы импортируем этот класс блюд?
Чтобы мы могли использовать это как тип для переменной, которую я определяю здесь.
Итак, где этот класс блюд?
Это в../shared/dish папка.
Итак, это в общей папке с блюдом.
Тогда вы увидите, что мы определили компонент меню здесь.
Итак, вы можете видеть, что он говорит
«Экспорт компонента меню класса», а затем говорит: «Реализация на нем».
Мы вернемся к этому чуть позже.
Вы также видите, что есть конструктор, и есть еще один метод здесь называется ngOnit.
Мы собираемся использовать их в некоторых из последующих упражнений.
Итак, давайте просто оставим его там, и мы вернемся
, чтобы понять, что это за короткое время.
Также обратите внимание, что для этого компонента
шаблон определяется в элементе меню точки HTML,
и URL стиля, определенные там.
Теперь, кроме того, в мой класс компонентов меню
я собираюсь включить новую переменную под названием
блюда, которая будет массивом типа блюда.
Хорошо? Затем я просто включу набор блюд
в мою переменную блюд, которую я определил здесь.
Теперь, чтобы набрать все это вручную, у меня уйдёт много времени.
Поэтому вместо этого, то, что я бы предложил вам сделать, это просто пойти и скопировать
содержание непосредственно из инструкций, которые следуют этому видео.
Так вот, что я собираюсь сделать.
Тогда вернись и вставь это сюда.
Теперь вы можете видеть, что я вырезал и наклеил информацию для
все мои блюда из инструкции здесь.
Итак, это завершает массив всех блюд, которые определены в моих инструкциях.
Итак, это самый простой способ получить эту информацию.
Так что просто вырежьте и вставьте его оттуда.
Теперь обратите внимание, что для этого блюда
каждый из них является объектом JavaScript здесь.
Таким образом, это может быть сопоставлено с соответствующим классом скрипта типа.
Итак, вы можете видеть, что каждый объект JavaScript имеет свойства там,
, и эти свойства точно соответствуют свойствам, которые я определил для моего класса блюд.
Итак, как только я определяю это,
то эти блюда теперь станут массивом
блюд, и теперь это станет доступно для
мне использовать, когда я определяю свой HTML-шаблон для моего меню.
Давайте сохраним изменения, которые мы сделали до сих пор, а затем мы откроем файл menu.component.html.
Итак, мы перейдем к файлу menu.component.html.
Вы увидите, что в файле menu.component.html,
у вас в настоящее время есть только P с меню работает здесь.
Итак, если вы просто вставили его туда, а затем увидели, как работает приложение,
вы бы видели только это меню работает на экране.
Я собираюсь заменить это своим собственным кодом шаблона здесь.
Вот где я собираюсь воспользоваться помощью углового гибкого макета, чтобы помочь мне
хорошо выложить мой контент на моем экране.
Итак, чтобы начать,
я начну с div,
, к которому я буду применять класс, называемый контейнером.
Я собираюсь определить класс контейнера, используя
некоторый код CSS немного позже в этом упражнении.
Итак, я применим контейнер класса здесь.
Я также собираюсь определить свойство, называемое fxlayout.
Атрибут под названием fxlayt.
Теперь этот fxlayout является атрибутом
, который угловой гибкий макет позволяет мне применить к div.
Это указывает, должен ли различный контент
, который я включаю внутри этих div, быть выложен либо горизонтально, либо вертикально.
Итак, я собираюсь указать, что это будет столбец.
Итак, независимо от содержимого, которое я включу в этот div,
будет выложен вертикально один ниже другого на моем экране.
Если вы видели сетчатый способ работы с контентом в Bootstrap,
вы увидите, что это, по сути, говорит мне, что я собираюсь
сложить все в один столбец.
Не путайте этот столбец со столбцом Bootstrap из сетки Bootstrap.
Это две разные вещи.
Здесь атрибут fxlayt, и я указываю столбец.
Я также могу указать это как строку
, что означает, что контент будет выложен горизонтально.
Теперь также, еще один атрибут, который я собираюсь указать для этого, - fxLayoutGap,
, который я буду указывать как 10 пикселей.
Итак, это означает, что любой контент, который я включу здесь
, будет отделен друг от друга 10-пиксельным разрывом между каждым из них.
Из знаний Bootstraps, вы видите, что такое отсечение.
Это определяет разделение среза между
двумя частями содержимого в моем шаблоне приложения.
Итак, с этим мы закроем div здесь.
Теперь, внутри этого div,
я собираюсь определить фактическое содержимое, которое войдет в мой файл menu.component.html.
Теперь здесь, я собираюсь использовать другой компонент, который
дизайн материала предоставляет мне называется компонентом списка ковриков.
Таким образом, этот компонент позволяет мне создать список
элементов, которые я включаю в свой шаблон здесь.
Итак, это компонент списка угловых материалов.
Из Bootstrap вы замечаете, что в Bootstrap у нас был медиа-объект.
Итак, список матов похож на медиа-объект в некотором смысле из Bootstrap.
Теперь к этому я собираюсь применить класс
атрибут, называемый fxFlex.
Теперь, это означает, что все это будет рассматриваться как одна единица или одна часть контента
, что они будут выложены моим гибким макетом здесь.
Итак, если вы знакомы с CSS flex макетом.
Итак, это один кусок контента, который будет выложен моим макетом CSS flex.
Итак, примените fxFlex здесь,
, а затем внутри здесь я собираюсь определить mat-list-item.
Итак, это пункт списка.
Итак, из ваших знаний HTML,
, если тег LI, который вы используете в HTML, похож на это здесь.
Итак, это пункт списка мг здесь.
Итак, очевидно, внутри этого элемента списка
вы будете определять список вещей.
Теперь angular предоставляет некоторые структурные директивы, которые вы можете применить
к вашим тегам здесь, что позволяет создавать ваш контент.
Теперь я собираюсь использовать одну структурную директиву под названием ngFor.
Посмотрим, как мы используем его в этом шаблоне.
Затем, после этого упражнения,
я кратко объясню вам, что такое структурные директивы и
, какова цель они служат при определении ваших шаблонов здесь.
Итак, внутри этого пустого элемента списка, я собираюсь сказать,
звезда, обратите внимание на синтаксис, звезда ngFor.
Итак, это структурная директива,
ngFor структурная директива в угловом.
То, что эта структурная директива ngFor позволяет вам сделать, это
для итерации по массиву элементов.
Помните, что мы определили блюда как массив объектов блюд в нашем коде.
Теперь, в моем шаблоне,
я буду иметь доступ к этому объекту посуды.
Так что здесь, если я хочу перебирать его,
как я указываю это, я скажу,
«Пусть блюдо блюд».
Вот как работает синтаксис для структурной директивы ngFor.
Итак, пусть блюдо из блюд.
Это означает, что блюда являются массивом предметов посуды.
Когда мы выбираем скажем пусть блюдо блюд,
это позволит мне получить доступ к каждому элементу
массива, а затем он помогает мне перебирать массив.
Это похоже на цикл for,
, если вы знакомы с циклами программирования.
Итак, это действует как цикл for для вас, а затем он помогает вам перебирать
по всем элементам массива посуды здесь.
Это блюдо становится объектом JavaScript, который позволяет мне
получить доступ к каждому элементу этого массива.
Теперь, из этого, мы также можем получить
доступ к свойствам каждого отдельного объекта внутри моего массива посуды.
Итак, я могу использовать их для определения моего шаблона здесь.
Позвольте мне выложить шаблон, а затем мы вернемся и
посмотрим, как эти два взаимосвязаны здесь.
Теперь, внутри моего пустого элемента списка,
я могу включить изображение с атрибутом как matListAvatar.
Таким образом, это позволяет мне включить изображение, а затем с указанным здесь источником.
Теперь интересно, посмотрите на синтаксис, который я использую здесь.
Внутри двойных брекетов, я собираюсь сказать dish.image.
Это означает, что это односторонняя интерполяция, о которой мы говорим.
Здесь, когда я указываю это,
, что это означает, что этот источник получит значение dish.image, которое определило в
мой объект JavaScript, который я определил в
мой класс скрипта типа там и который доступен для меня, чтобы сделать макет здесь.
Итак, что значение dish.image будет доступно мне, а также для этого изображения,
я буду указывать альтернативное значение как dish.name.
Вспомните, что мое блюдо также имело свойство имени, доступное
мне, так что определяет изображение для моего списка здесь.
Вы скоро поймете, как выглядит этот список на
экрана, когда мы закончим этот шаблон здесь.
Кроме того, я собираюсь использовать h1 с тегом matLine.
Опять же, это использование
компонента углового материала списка для определения моего шаблона здесь.
Итак, я говорю h1 matLine, поэтому это помогает мне определить строку здесь, а затем внутри,
Я собираюсь использовать двойные скобки и сказать dish.name здесь.
Итак, это позволяет мне получить значение названия блюда там.
Итак, это определяет одну строку, а затем в следующей строке я собираюсь сказать p matLine.
Итак, я собираюсь использовать p тег здесь, а затем закрыть
с тега p, а затем внутри p тега,
Я собираюсь использовать диапазон для определения dish.description.
Итак, если вы знакомы с объектами JavaScript,
вы теперь видите, как я обращаюсь к свойствам
моего объекта JavaScript здесь, dish.description здесь.
Для примечания, запуск через это еще раз
атрибут ngFor позволяет мне перебирать массив объектов здесь.
Итак, блюда здесь представляет собой массив предметов посуды.
Итак, когда я говорю пусть блюдо блюд,
это блюдо даст мне доступ к каждому элементу
мой массив блюд, и я перебираю каждый элемент массива
, а затем я буду создавать этот контент для каждого из них.
Итак, этот пустой элемент списка,
по существу действует как цикл for от
вашего традиционного компьютерного языка, а затем он перебирает
список блюд, а затем выкладывает каждый из них на моем экране.
Итак, с этим изменением
давайте сохраним файл компонента меню.
Далее мы переходим к app.module.ts и нам нужно импортировать модуль matList в это.
Итак, мы говорим, импортировать MatListModule
из угловой/материал/list.Once мы импортировали это там,
то мы идем вниз, а затем обновляем импорт в
Ng модуль декоратор и добавить в
модуль matList к списку импорта там.
Это мое приложение module.ts теперь обновляется, а затем также
Я собираюсь перейти к файлу styles.scss, а затем добавить
в класс контейнера здесь.
Что определяет класс контейнера здесь?
Класс контейнера имеет поле 20 пикселей
и отображает гибкий и сохраняет изменения.
Теперь пойдем и посмотрим на нашу веб-страницу.
Перейти на нашу веб-страницу.
Вуаля. Вот ты идешь.
Меню для нашего ресторана показано во всем своем великолепии на экране.
Вы видите, как было создано это меню.
Посмотрите на массив объектов JavaScript, который вы видели.
Посмотрите, как было использовано каждое из свойств массива объектов JavaScript и
сопоставлено с четырьмя элементами в моем списке.
Посмотрите, как соответствующие изображения были включены здесь
с помощью matListAvatar здесь.
Таким образом, это создает круглые изображения здесь, а затем обратите внимание, как имя
блюдо отображается здесь, а затем описание блюда, включенного здесь.
Замечательно. Теперь у нас есть меню для нашего ресторана на
экран, используя компонент меню в Angular.
Это завершает это упражнение.
В этом упражнении мы научились создавать новый компонент.
добавить его в наше угловое приложение,
как включить этот компонент в шаблон
другой компонент, чтобы создать иерархию компонентов.
Затем мы увидели, как мы можем использовать угловой гибкий макет, а также
компоненты дизайна материала для разработки
шаблон для нашего компонента меню для отображения содержимого здесь.
Теперь, если ты спросишь меня, как я помню все эти вещи.
Ну, если честно,
вы не можете вспомнить все, но нужно понимать подход.
Это важнее, чем пытаться запомнить любую из этих вещей.
Теперь, если вы спросите меня, где я могу получить информацию о
компоненте списка из углового материала.
Мы можем отсортировать документацию углового материала и там у вас
будет подробная информация о том, как должен быть подготовлен компонент списка.
Теперь, где мы получаем подробности о том, как мы разрабатываем компонент в угловом?
Мы только что изучили немного этого, а затем в этом упражнении
мы узнали, как создать новый компонент, а затем применить его в нашем угловом приложении.
Итак, это хороший момент для вас, чтобы сделать
получить комментарий с компонентами сообщения первой части.
В следующем упражнении
мы собираемся улучшить это немного больше, используя другой вид
углового материала компонента для выкладки содержимого на моем экране.