[MUSIC]
Мы только что создали наше первое угловое приложение в предыдущем упражнении.
Вам должно быть интересно, как выглядит типичное угловое приложение?
Какова его структура и архитектура, и
как мы создаем угловое приложение?
Давайте поговорим об этих вещах шаг за шагом, начиная с этой лекции.
Быстрый взгляд на папку приложения в редакторе.
Вы сразу заметили, что угловой CLI создал целую кучу
файлов в различных папках в нашем приложении.
Что содержат эти файлы?
Как они представляют собой угловое приложение?
Давайте рассмотрим их шаг за шагом, чтобы понять типичную архитектуру
углового приложения.
Как мы уже поняли,
Угловые приложения построены как комбинация
HTML и TypeScript или JavaScript.
В этом курсе мы будем использовать TypeScript в качестве языка выбора для
построения нашего углового приложения.
Угловой сам состоит из нескольких библиотек,
некоторые из них называются библиотеками, а другие являются необязательными библиотеками.
В зависимости от типа углового приложения, которое вы пытаетесь создать,
вы включите некоторые из них в свое приложение.
Как мы уже узнали, Angular - это фреймворк JavaScript, и
мы будем использовать его для создания нашего приложения.
Подводя итог, угловое приложение является модульным по своему характеру и будет состоять из
нескольких компонентов, вместе с их шаблонами, которые составляют приложение.
Мало того, что эти компоненты и другие части Angular приложения,
подобные сервисы, будут организованы в модули.
И эти модули, в свою очередь, будут использоваться модулями более высокого уровня.
Таким образом, вы можете посмотреть на угловое приложение, являющееся модульной архитектурой
с корневым модулем сверху,
, который использует другие модули, организованные в вашей иерархии моделирования.
Давайте рассмотрим наше приложение, чтобы понять, как это создается.
Прежде чем мы продолжим, корневой модуль по умолчанию
в Angular обычно называется модулем приложения.
Перейдя к нашему коду, давайте начнем наше путешествие и index.html.
Таким образом, в этом файле index.html вы можете видеть, что у нас есть типичный html код здесь,
вместе с этой конкретной строкой, которая говорит app-root.
Вы сразу же узнаете их, это не похоже на типичный HTML-тег.
Итак, давайте начнем с вопроса, что это означает, и
почему это включено в страницу index.html?
Как мы уже видели, типичное Угловое приложение
представляет собой иерархию модулей с корневым модулем.
Ваше угловое приложение загружается путем загрузки корневого модуля
для запуска приложения.
Итак, как мы загружаем угловое приложение?
Мы уже видели страницу index.html, и вы видели там элемент, называемый app-root.
Итак, давайте зададим себе еще несколько вопросов.
Сопутником страницы index.html является файл main.ts.
Если вы откроете этот файл, вы увидите, что он содержит набор
операторов импорта в TypeScript, как написано здесь.
Давайте не будем слишком много вдаваться в детали, но
я вернусь, чтобы объяснить это в ближайшее время.
Но, в частности,
позвольте мне обратить ваше внимание на эту конкретную строку в файле main.ts.
Который говорит platformBrowserDynamic () .bootstrapModule
, а затем обратите внимание на параметр здесь, который говорит (AppModule).
Итак, как я уже упоминал, ранее модуль приложения - это типичное имя
, данное корневому модулю в угловом приложении.
Если вы посмотрите на иерархию файлов,
вы уже видите файл с именем app_module.ts.
Мы собираемся посетить этот файл за короткое время, чтобы увидеть, что он содержит.
Теперь, возвращаясь к этим импортам,
вы можете видеть, что давайте возьмем пример первого импорта здесь.
Он говорит, что импорт enableProdMode из '@angular /core'.
Таким образом, это указывает, что мы будем импортировать этот конкретный модуль
из библиотеки Angular Core.
И аналогичным образом, вы видите второй, говорящий об импорте platformBrowserDynamic
из '@angular /platform-browser-dynamic'.
Таким образом, из этой библиотеки вы импортируете этот модуль на место.
Теперь модуль platformBrowserDynamic позволяет вам загружать
ваше угловое приложение, взяв ваш корневой модуль в качестве параметра.
Очевидно, что есть много других файлов в этой папке и подпапках там.
Давайте не будем слишком беспокоиться о них в данный момент.
Мы узнаем о некоторых из них по мере прохождения этого курса.
Теперь Angular CLI помогает создать эту иерархию папок и
файлов, с необходимыми настройками для
, чтобы иметь возможность загружать угловое приложение и начать работу.
Делать это вручную — немного утомительная задача.
Таким образом, Angular CLI упрощает подготовку
папки для вашего приложения Angular.
Итак, снова, перейдя в файл app_module.ts.
Как я уже упоминал, это корневой модуль для вашего углового приложения.
Теперь, как правило, корневой модуль будет именоваться как файл app.module,
, но это только предлагаемое имя в Angular.
Вы увидите, что многие из файлов, которые составляют угловое приложение,
есть предлагаемые способы именования этих файлов.
По мере прохождения курса мы узнаем конкретно о каждом из этих
файлов.
Итак, взглянув на содержимое app_module.ts,
внутри там вы видите набор операторов импорта.
Кратко взглянув на них, он говорит, что импорт {BrowserModule} из
'@angular -platform-browser'.
Импорт {NgModule} из '@angular /core'.
И NgModule является угловым модулем.
Мы узнаем немного больше об этом позже.
Кроме того, вы видите еще один оператор импорта здесь,
, который говорит импорт {AppComponent} из './app.component '.
И взглянув на файлы здесь,
вы уже видите app.component.tsfileware, а
то несколько других файлов здесь, включая app.component.acss,
app.component.acss и другие файлы.
Теперь это утверждение указывает, что этот корневой модуль будет включать этот компонент
и будет формировать корневой комплимент вашего углового приложения.
Типичное угловое приложение, как мы видели, состоит из ряда
модулей с корневым модулем в качестве основного модуля,
, который помогает вам загрузить ваше угловое приложение.
Корневой модуль является угловым модулем с функцией или является классом.
Итак, вот где вы видите использование класса TypeScript здесь,
, поэтому, если вы спуститесь в красный модуль ниже, вы увидите
это заявление под названием export class AppModule.
TypeScript добавляет классы в ваш типичный код JavaScript.
Если вы знакомы только с ES-5 JavaScript,
то классы там еще не введены, но
новые версии JavaScript будут вводить поддержку классов.
TypeScript также поддерживает классы.
Так что если у вас есть опыт работы с объектно-ориентированным программированием,
вы уже знакомы с классами.
Таким образом, такой подход внедряется в JavaScript с введением
классов в TypeScript и будущих версиях JavaScript.
Кроме того, вы заметите, что этот класс имеет
декоратор Ngmodule, связанный с этим.
Таким образом, декоратор - это, опять же, функция
, которая изменяет классы JavaScript.
Мы увидим использование декораторов во многих местах в нашем угловом приложении.
Это Ngmodule.
Декоратор этого позволяет вам указать некоторые подробности об этом модуле приложения
.
Таким образом, эта функция декоратора принимает определенный набор
метаданных, чтобы помочь вам описать этот модуль.
Таким образом, этот объект метаданных здесь содержит, как вы можете видеть,
объявления, импорт, провайдеры, бутстрап.
И также будет содержать экспорт, если этот модуль экспортирует что-то, что может быть
использован другим модулем.
Поскольку это корневой модуль, у нас нет экспорта из этого модуля.
Таким образом, вместо этого у нас есть только декларации, импорт, поставщики и бутстрап.
Итак, вот этот довольно прямолинейный, чтобы понять.
Он указывает, что для загрузки этого углового приложения
нам нужно загрузить AppComponent.
Таким образом, AppComponent является корневым компонентом нашего углового приложения.
Кроме того, часть импорта определяет свойства,
видя, что все эти модули должны быть импортированы для использования с этим модулем приложения.
Таким образом, этот модуль приложения теперь зависит от этих других модулей.
Таким образом, это модули, которые будут импортированы в модуль приложения как
часть иерархии, поэтому причина, по которой мы импортировали эти модули здесь.
Поэтому, когда вы импортируете модули,
вы указываете здесь, говоря, что модуль приложения будет использовать этот модуль.
Таким образом, свойство import указывает те модули, которые должны быть импортированы, или
те модули, от которых зависит этот конкретный модуль.
Объявления здесь, свойство деклараций,
является свойство, которое объявляет классы представлений
, которые принадлежат этому конкретному модулю.
Таким образом, классы представлений в случае углового модуля будут
в виде компонентов, директив и труб.
Мы поговорим о директивах и трубах немного позже в этом курсе,
мы поговорим о компонентах в следующем уроке.
Поставщики указывают все услуги, которыми будет пользоваться этот
конкретный модуль.
Услуги, о которых мы поговорим чуть более подробно в модуле
на следующей неделе.
Мы поговорим больше о сервисах, как мы их создаем,
и как мы можем использовать их с нашим приложением Angular.
Чтобы обобщить то, что мы узнали до сих пор, мы понимаем, что модуль
в угловом приложении может состоять из набора компонентов и сервисов
, которые будут требоваться от этого модуля путем их импорта.
И они будут объявлены с помощью свойства деклараций
декоратора Ngmodule в нашем модуле приложения.
Теперь сами эти компоненты могут зависеть от
других компонентов, услуг или директив, или
труб, как мы увидим в остальной части этого конкретного курса.
Таким образом, у нас есть примерное представление о том, как структурировано типичное угловое приложение.
Возвращаясь к нашему коду, пришло время изучить
этот файл app.component.ts и файл app.component.html.
Который объявляет шаблон для нашего компонента,
и файл app.component.ts,
, который определяет TypeScript часть нашего компонента.
Теперь мы сделаем это в следующем уроке, где мы будем иметь дело с компонентами и
, как мы можем создавать новые компоненты и добавлять их в наше угловое приложение.
[МУЗЫКА]