Добро пожаловать в новую эру интерфейсной разработки. Google всегда на первом месте во всех областях технологий, таких как поисковая система Google, Gmail, GMaps бла-бла-бла. Сейчас мы говорим о фронтенд-разработке, 20 октября 2010, Google выпускает AngularJS, и сейчас мы работаем над Angular 4. Несомненно, Angular - это самый известный фреймворк JavaScript в настоящее время. В настоящее время только React, другая библиотека JavaScript, разработанная Facebook, составляет серьезную конкуренцию Angular.

Если вы хотите получить подробные знания об Angular, прочтите Начало работы с Angular.

Варианты настройки проекта для приложений Angular 4:

Есть три способа настроить приложения Angular 4:

  1. С помощью Webpack
  2. Автор System.js
  3. Автор 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 принимает объект, который называется метаданными. Требуются три вещи

  1. Массив импорта
  2. Объявление Array
  3. Массив начальной загрузки

Массив импорта:

Многие функции, такие как службы 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 .

Доработка приведенного выше кода:

  1. Сначала импортируйте Component из @angular/core .
  2. Затем создайте свой компонент с помощью @Component decorator. он принимает объект в качестве параметра. Этот объект имеет 3 селектора свойств, templateUrl, styleUrls. Селектор имеет имя компонента, templateUrl содержит html-файл этого компонента, а styleUrls содержит массив файлов CSS.
  3. После этого мы создаем класс AppComponent, который экспортируется и импортируется main.ts.

Браузер Bootstrap:

В приведенных выше двух шагах мы собираем информацию о NgModule, массиве импорта, массиве объявлений, массиве начальной загрузки и корневом компоненте по умолчанию (app.component.ts) проекта Angular. На этом этапе мы узнаем, как загрузить конкретный модуль.

В процессе начальной загрузки приложений Angular есть 3 основных шага:

  1. Импортировать AppModule.
  2. Импорт начальной загрузки браузера.
  3. Загрузите модуль.

Импортировать модуль приложения:

В файле app.module.ts мы создаем класс AppModule и делаем его экспортируемым с помощью ключевого слова exports. Этот класс импортируется в другое место и сообщает, что загрузите этот модуль. Вышеупомянутая строка вставляется в файл main.ts.

Импорт начальной загрузки браузера:

Для начальной загрузки приложения angular мы импортируем platformBrowserDynamic из @angular/platform-browser-dynamic. Эта строка кода фактически запускает приложение.

Загрузите модуль:

Это основной код фрагмента, с помощью которого загружается ваш конкретный модуль. Если вы прокомментировали эту строку кода из main.ts, ваш конкретный модуль не запускается. В моем коде мы загрузили AppModule.

«Это самая первая написанная мной статья о фреймворке Angular 2. Если возникнут какие-либо вопросы относительно этой статьи, прокомментируйте их ниже или напишите мне по адресу [email protected]. »- Вайбхав Шарма