Добро пожаловать в новую эру интерфейсной разработки. Google всегда на первом месте во всех областях технологий, таких как поисковая система Google, Gmail, GMaps бла-бла-бла. Сейчас мы говорим о фронтенд-разработке, 20 октября 2010, Google выпускает AngularJS, и сейчас мы работаем над Angular 4. Несомненно, Angular - это самый известный фреймворк JavaScript в настоящее время. В настоящее время только React, другая библиотека JavaScript, разработанная Facebook, составляет серьезную конкуренцию Angular.
Если вы хотите получить подробные знания об Angular, прочтите Начало работы с Angular.
Варианты настройки проекта для приложений Angular 4:
Есть три способа настроить приложения Angular 4:
- С помощью Webpack
- Автор System.js
- Автор angular-cli
Webpack:
Webpack - широко известный инструмент и стандарт для создания приложений Angular. Используя webpack, мы можем создавать структуру проекта приложений angular с нуля, и вы знаете каждый аспект настройки приложения angular. Если вы хотите узнать больше об установке webpack для приложений Angular, обратитесь к этой ссылке на документы angular https://angular.io/guide/webpack.
Системный JS:
System JS используется как инструмент настройки приложений для angular в начале и в бета-версии Angular 2. В настоящее время он не используется ни одним разработчиком. . Webpack обогнал этот метод настройки проекта приложения Angular.
Angular-CLI:
Angular CLI в основном используется для создания приложений angular. Это инструмент для создания нового приложения, основанного на angular 2+. Помогает в создании компонентов, каналов, служб , поставщики и подготовьте сборку к развертыванию. Простота - единственная причина его популярности.
Необходимые вещи для приложения Bootstrap Angular 4
1. NgModule.
2. Корневой компонент.
3. Браузер Bootstrap.
NgModule:
NgModule
наиболее важен в приложении Angular. Это класс, в котором все части углового приложения подходят друг к другу. В каждом приложении есть как минимум один NgModule
для начальной загрузки приложения angular.
В приведенном выше коде фрагмента мы используем декоратор @NgModule
, который сообщает угловому AppComponent
, что это класс NgModule. @NgModule
принимает объект, который называется метаданными. Требуются три вещи
- Массив импорта
- Объявление Array
- Массив начальной загрузки
Массив импорта:
Многие функции, такие как службы HTTP и другие, Angular управляются собой с помощью NgModule
. Итак, мы добавляем те вещи в массив импорта, который используется Angular, например, HttpModule
добавляется в массив импорта, когда мы используем HTTP-сервисы в приложениях Angular 4+.
Массив объявлений:
Используя массив объявлений, Angular сообщает, какой компонент принадлежит AppModule
. Все вновь созданные компоненты добавляются в массив объявлений. Если вы не добавляете какой-либо компонент в массив объявлений, консоль браузера выдает ошибку.
Массив начальной загрузки:
Массив начальной загрузки содержит все элементы, необходимые для начальной загрузки приложения angular. В текущем контексте нам нужно только AppComponent
для загрузки приложения Angular.
Корневой компонент:
Когда angular CLI формирует новое приложение angular 4+, автоматически создается корневой компонент с именем app.component
. Этот компонент включает 3 файла выше app.component.html
, app.component.css
, app.component.ts
.
Доработка приведенного выше кода:
- Сначала импортируйте
Component
из@angular/core .
- Затем создайте свой компонент с помощью
@Component
decorator. он принимает объект в качестве параметра. Этот объект имеет 3 селектора свойств, templateUrl, styleUrls. Селектор имеет имя компонента, templateUrl содержит html-файл этого компонента, а styleUrls содержит массив файлов CSS. - После этого мы создаем класс
AppComponent
, который экспортируется и импортируетсяmain.ts
.
Браузер Bootstrap:
В приведенных выше двух шагах мы собираем информацию о NgModule
, массиве импорта, массиве объявлений, массиве начальной загрузки и корневом компоненте по умолчанию (app.component.ts
) проекта Angular. На этом этапе мы узнаем, как загрузить конкретный модуль.
В процессе начальной загрузки приложений Angular есть 3 основных шага:
- Импортировать AppModule.
- Импорт начальной загрузки браузера.
- Загрузите модуль.
Импортировать модуль приложения:
В файле app.module.ts
мы создаем класс AppModule и делаем его экспортируемым с помощью ключевого слова exports. Этот класс импортируется в другое место и сообщает, что загрузите этот модуль. Вышеупомянутая строка вставляется в файл main.ts
.
Импорт начальной загрузки браузера:
Для начальной загрузки приложения angular мы импортируем platformBrowserDynamic
из @angular/platform-browser-dynamic
. Эта строка кода фактически запускает приложение.
Загрузите модуль:
Это основной код фрагмента, с помощью которого загружается ваш конкретный модуль. Если вы прокомментировали эту строку кода из main.ts
, ваш конкретный модуль не запускается. В моем коде мы загрузили AppModule
.
«Это самая первая написанная мной статья о фреймворке Angular 2. Если возникнут какие-либо вопросы относительно этой статьи, прокомментируйте их ниже или напишите мне по адресу [email protected]. »- Вайбхав Шарма