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

У Angular сложная история. Разработчики использовали JavaScript для создания первой версии этого фреймворка (AngularJS). Разработчики Angular позже использовали TypeScript для создания всех последующих версий Angular (из-за количества ошибок в первой версии).

По состоянию на 2021 год последняя версия Angular - 12.0. В этой статье вы узнаете все, что вам нужно знать об Angularframework.

Что такое Angular?

Многие люди описывают Angularas как фреймворк, и, хотя это определение не неверно, Angular - это не просто фреймворк. Angular также является платформой для разработки. Это означает, что у него есть аппаратная и программная система, на которой запускаются приложения Angular.

Хотя он построен на TypeScript, вы можете написать большую часть кода платформы на JavaScript. Как и большинство фреймворков, Angular основан на компонентах. Это означает, что каждый раздел пользовательского интерфейса Angular рассматривается как независимый объект, что приводит к созданию повторно используемого кода и масштабируемых приложений.

Чтобы использовать Angular, вам необходимо быть знакомым с HTML, CSS и JavaScript (знание TypeScript является активом, но не обязательным требованием). Angular часто сравнивают с VueJS и ReactJS, и одна из основных жалоб заключается в том, что у Angular более крутая кривая обучения.

Связанный: Что такое ReactJS и для чего его можно использовать?

Это неудивительно, поскольку Angular (будучи платформой разработки) имеет большее количество основных структур, с которыми вы можете ознакомиться. Эти структуры включают:

• Модули
• Компоненты
• Шаблоны

А понимание этих основных функций гарантирует, что вы на пути к тому, чтобы стать разработчиком Angular.

Изучение файлов Angular

Приложение Angular генерирует множество файлов в папке вашего нового проекта (как вы можете видеть на изображении ниже). Посетите официальный сайт Angular, чтобы узнать, как установить Angular на свой компьютер..

Одним из наиболее важных файлов в основной папке проекта является package.json файл. Этот файл сообщает вам название вашего проекта, как начать ваш проект (нг подавать), как собрать свой проект (ng build), и как протестировать свой проект (нг тест) среди прочего.

Ваша основная папка проекта также содержит две папки:node_modules а также src. В src папка - это то место, где вы будете выполнять всю вашу разработку; он содержит несколько файлов и папок.

Папка src

В styles.css файл, в который вы поместите все свои глобальные настройки стиля, а index.html файл - это единственная страница, которая отображается в вашем браузере.

Изучение файла index.html

Единственное, что вы хотели бы изменить в index.html файл выше - это название приложения. В в теле HTML-файла над ссылками на app.component.ts файл, который находится в папке приложения (как вы можете видеть на изображении ниже).

Изучение файла app.component.ts

импортировать {Компонент} из '@ angular / core';
@Составная часть({
селектор: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'мое-приложение';
}

В app.component.ts файл использует корень приложения селектор, который находится в index.html файл выше. Он использует app.component.html файл как шаблон и app.component.css файл для стиля.

В app.component.css файл пуст, когда он создается, потому что все настройки стиля, наряду с макетом HTML, находятся в пределах app.component.html файл.

Запуск приложения Angular с ng serve --open команда отобразит в вашем браузере следующее:

Чтобы изменить то, что отображается в вашем браузере, вам нужно отредактировать app.component.html файл.

Заменив содержимое этого файла следующим кодом:

Привет, мир

В вашем браузере будет отображаться следующий результат:

Понимание модулей Angular

Каждый Угловой приложение построено на базовой модульной системе, известной как NgModules. Каждое приложение содержит как минимум один NgModule. Угловой генерирует два модуля из нг новый команда (app-routing.module.ts а также app.module.ts).

В app.module.ts Файл содержит корневой модуль, который должен присутствовать для запуска приложения.

Изучение файла app.module.ts

импортировать {NgModule} из '@ angular / core';
импортировать {BrowserModule} из '@ angular / platform-browser';
импортировать {AppRoutingModule} из './app-routing.module';
импортировать {AppComponent} из './app.component';
@NgModule ({
объявления: [
AppComponent
],
импорт: [
BrowserModule,
AppRoutingModule
],
провайдеры: [],
бутстрап: [AppComponent]
})
класс экспорта AppModule {}

В приведенном выше файле используется JavaScript Импортировать заявление об импорте NgModule, то BrowserModule, то AppComponent, а AppRoutingModule (который является вторым модулем NgModule в проекте).

В @NgModule декоратор идет после импорта. Это указывает на то, что app.module.ts файл действительно NgModule. В @NgModule декоратор затем настраивает несколько массивов: декларации, то импорт, то провайдеры, а бутстрап.

В декларации в массиве хранятся компоненты, директивы и каналы, принадлежащие определенному NgModule. Однако в случае корневого модуля только AppComponent хранится в декларация массив (как вы можете видеть в приведенном выше коде).

В импорт массив импортирует другой NgModules который вы используете в приложении. В импорт массив в приведенном выше коде импортирует BrowserModule (что позволяет использовать специфичные для браузера службы, такие как рендеринг DOM), и AppRoutingModule (что позволяет приложению использовать Угловой роутер).

Связанный: Скрытый герой веб-сайтов: понимание DOM

В провайдеры массив должен содержать службы, компоненты которых в других NgModules можешь использовать.

В бутстрап массив очень важен, потому что он содержит компонент ввода, который Angular создает и вставляет в index.html файл в основной папке проекта. Каждое приложение Angular запускается из бутстрап массив в корне NgModule к самозагрузка в NgModule (который включает в себя процесс вставки каждого компонента в бутстрап массив в DOM браузера).

Понимание угловых компонентов

Каждый компонент Angular создается с помощью четырех определенных файлов. Если вы посмотрите на изображение папки приложения выше, вы увидите следующие файлы:

• app.component.css (файл CSS)
• app.component.html (файл шаблона)
• app.component.spec.ts (файл спецификации тестирования)
• app.component.ts (компонентный файл)

Все файлы, указанные выше, связаны с одним и тем же компонентом. Если вы используете нг генерировать команда для создания нового компонента, будут сгенерированы четыре файла, аналогичные приведенным выше. В app.component.ts файл содержит корневой компонент, который связывает различные аспекты компонента (например, шаблон и стиль).

Изучение файла app.component.ts

импортировать {Компонент} из '@ angular / core';
@Составная часть({
селектор: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'мое-приложение';
}

В app.component.ts файл использует оператор импорта JavaScript для импорта «Компонента» из ядра Angular. Тогда @Составная часть декоратор идентифицирует класс как компонент. В @Составная часть декоратор содержит объект, состоящий из селектор, а templateUrl, а styleUrls множество.

В селектор говорит Угловой для вставки экземпляра компонента приложения в любой шаблон HTML, имеющий тег, соответствующий селектор (так что ярлык). И если вы посмотрите на код в index.html файл выше вы найдете ярлык.

Основной файл компонента приложения также ссылается на файл шаблона с помощью templateUrl имущество. Это app.component.html файл, в котором описывается, как конкретный компонент должен отображаться в приложении Angular.

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

Понимание шаблонов Angular

В app.component.html файл является примером шаблона Angular. Этот файл представляет собой файл HTML, а также файл компонента (компонент приложения). Следовательно, у каждого компонента должен быть шаблон HTML просто потому, что он описывает, как компонент отображается в DOM.

Что дальше?

Понимание DOM - ваш следующий лучший шаг. Взять на вооружение платформу и фреймворк Angular, несомненно, непросто. Однако это возможно, и, учитывая, что Angular отображает свои компоненты в DOM, изучение DOM - как вы пытаетесь освоить Angular - это еще один отличный шаг.

Скрытый герой веб-сайтов: понимание DOM

Изучаете веб-дизайн и хотите узнать больше об объектной модели документа? Вот что вам нужно знать о модели DOM.

Читать далее

Об авторе