Введение

Сильный и популярный фреймворк JavaScript|TypeScript для создания веб-приложений называется Angular. Он предлагает широкий спектр инструментов и возможностей и соответствует дизайну, основанному на компонентах. С помощью Angular можно создавать одностраничные приложения (SPA), которые являются динамичными и отзывчивыми и обеспечивают плавный пользовательский интерфейс. Он обеспечивает внедрение зависимостей и двустороннюю привязку данных, а также предоставляет широкие возможности маршрутизации и тестирования. Google поддерживает Angular, и процветающее сообщество активно участвует в его развитии и поддержке.

Нг-Зорро

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

Оглавление

1.Установка Angular CLI в локальной среде
2.Создание нового проекта с Angular
3.Установка ng-zorro-antd
4.Создание отдельного модуля для импорта компонентов
5. Обслуживание проекта.

1. Установка Angular CLI в локальной среде

Во время разработки существует ряд инженерных требований, таких как компиляция, отладка, проксирование и упаковка кода TypeScript. Мы настоятельно рекомендуем вам использовать официальный интерфейс командной строки Angular @angular/cli для разработки вашего проекта. Вот небольшой пример, чтобы прояснить мою точку зрения.

Введите это в терминале или в командной строке.

$ npm install -g @angular/cli
# Or if you use yarn
$ yarn global add @angular/cli

Из приведенной выше строки кода мы устанавливаем angular CLI, который помогает запускать любое приложение Angular в локальной среде.

2.Создание нового проекта с Angular

Следующая команда позволяет @angular/cli создать папку PROJECT-NAME со всеми необходимыми зависимостями в текущем каталоге.

$ ng new PROJECT-NAME

@angular/cli запустит npm install или yarn после создания проекта. Вы можете запустить npm install или yarn самостоятельно, если это не удается.

3.Установка ng-zorro-antd

После изменения каталога на только что созданный проект вы можете автоматически запустить следующие команды для инициализации конфигурации проекта, включая импорт файлов и таблиц стилей i18n и загрузку исходных модулей.

$ cd PROJECT-NAME
$ ng add ng-zorro-antd

Теперь Ant-design инициализирован для проекта. Структура папок проекта выглядит так, как показано на следующем рисунке.

4.Создание отдельного модуля для импорта компонентов

Создайте отдельный файл в папке приложения с именем NgZorro.module.ts.

NgZorro.module.ts

import { NgModule } from '@angular/core';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { NzButtonModule } from 'ng-zorro-antd/button';

@NgModule({
  exports: [
    NzIconModule,
    NzButtonModule,
  ],
})
export class NgZorroModule {}

В вышеуказанный файл мы можем импортировать любые компоненты из модуля NgZorro, используя официальную документацию
Отдельный файл создается для организации структуры папок.
Далее заявленный выше модуль необходимо импортировать в приложение .module.ts для его использования в файлах шаблонов и шаблонах его дочерних компонентов.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { NZ_I18N } from 'ng-zorro-antd/i18n';
import { en_US } from 'ng-zorro-antd/i18n';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { NgZorroModule } from './ngZorro.module';

registerLocaleData(en);

@NgModule({
  declarations: [AppComponent],
  imports: [
    NgZorroModule,
    BrowserModule,
    FormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
  ],
  providers: [{ provide: NZ_I18N, useValue: en_US }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Теперь компоненты NgZorro готовы использовать его в шаблонах.
Давайте рассмотрим пример создания кнопки.

app.component.html

<!-- NG-ZORRO -->
<button nz-button nzType="primary">Primary Button</button>
<button nz-button nzType="default">Default Button</button>
<button nz-button nzType="dashed">Dashed Button</button>
<button nz-button nzType="text">Text Button</button>
<a nz-button nzType="link">Link Button</a>

5. Обслуживание проекта

Теперь ваш проект готов к запуску. После выполнения следующей команды в вашем браузере отобразится страница приветствия.

# Either you use the command
$ng serve
#or
$npm start

По умолчанию проект будет открыт в URL

http://localhost:4200

Теперь вы успешно добавили NgZorro в проект Angular.
Теперь вы молниеносно работаете над проектами, опираясь на официальную документацию.
Надеюсь, этот пост поможет вам интегрировать NgZorro с Angular.
Подпишитесь на мою учетную запись, чтобы получать больше полезной информации, подобной этой.
Удачного кодирования…😉