Введение
Сильный и популярный фреймворк 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
Теперь вы успешно добавили NgZorro в проект Angular.
Теперь вы молниеносно работаете над проектами, опираясь на официальную документацию.
Надеюсь, этот пост поможет вам интегрировать NgZorro с Angular.
Подпишитесь на мою учетную запись, чтобы получать больше полезной информации, подобной этой.
Удачного кодирования…😉