Angular7 — одна из самых популярных платформ, а Clarity Design System от VMware добилась огромного роста всего за несколько лет. Используя директиву Angular7, Chart.js и помня о том, что ясность не поддерживает встроенную графическую библиотеку, мы попытались создать такую же. Итак, давайте начнем.
Приступим к процессу установки
Предпосылки
Прежде чем начать, убедитесь, что ваша среда разработки включает Node.js® и менеджер пакетов npm.
Шаг 1: Установите Angular CLI
Установите Angular CLI глобально.
Чтобы установить CLI с помощью npm, откройте окно терминала/консоли и введите следующую команду:
npm install -g @angular/cliШаг 2: Создайте рабочую область и начальное приложение
Вы разрабатываете приложения в контексте рабочей области Angular.
Чтобы создать новую рабочую область и начальное стартовое приложение:
- Запустите команду CLI
ng newи укажите имя «VMware Clearance», как показано здесь:
ng new VMware clarityШаг 3: Запустите приложение
- Перейдите в папку рабочей области (ясность VMware).
- Запустите сервер с помощью команды CLI
ng serveс параметром--open.
cd VMware clarity
ng serve --openКоманда ng serve запускает сервер, просматривает ваши файлы и перестраивает приложение по мере внесения изменений в эти файлы.
Параметр --open (или просто -o) автоматически открывает в вашем браузере http://localhost:4200/.
Ваше приложение приветствует вас сообщением:
Шаг 4: Установите пакеты Clarity
npm install @clr/icons @clr/angular @clr/ui @webcomponents/[email protected] --saveДобавление скриптов и стилей
Если вы используете Angular CLI, вам нужно добавить файл angular.json.
Найдите массивы scripts и styles и добавьте следующее:
"styles": [
"../node_modules/@clr/icons/clr-icons.min.css",
"../node_modules/@clr/ui/clr-ui.min.css",
... any other styles
],
"scripts": [
... any existing scripts
"../node_modules/@webcomponents/custom-elements/custom-elements.min.js",
"../node_modules/@clr/icons/clr-icons.min.js"
]Шаг 5: Установка Chart.js
Chart.js можно установить через npm.
npm install chart.js --saveСоздание компонента диаграммы
Я создал диаграмму компонентов, написав в командной строке следующую команду:
ng generate component chart
в результате получается четыре файла: chart.component.html, chart.component.scss, chart.component.spec.ts и файл chart.component.ts.
Добавление компонента Chart и модуля Clarity в файл «app.module.ts» вашего приложения:
Импортируйте ClarityModule в модуль вашего приложения Angular, а также в компонент Chart. Некоторые функции также зависят от BrowserAnimationsModule, поэтому вам также следует добавить его. Основной модуль вашего приложения может выглядеть так:
Написание кода
Я импортировал Chart.js в файл chart.component.ts и использовал здесь директиву «clr-charts». Вы можете увидеть код ниже для файла chart.component.ts и файла chart.component.html:
В файле app.component.ts:
Как только код будет завершен, мы можем использовать "clr-charts" в качестве директивы для отображения наших диаграмм. диаграммы, включая линейную диаграмму, столбчатую диаграмму, круговую диаграмму, лепестковую диаграмму, кольцевую диаграмму и полярную диаграмму. В файле app.component.html :
Итак, мы почти закончили с этим. В файле app.component.html мы видим, что используем одну директиву "clr-charts" для отображения всех остальных типы графиков, и это делает его более простым и надежным. Сохраните все файлы и запустите в командной строке: откройте окно терминала/консоли и введите следующую команду:
ng serve
На этом мы закончили, откройте браузер и перейдите по адресу http://localhost:4200/
Мы видим, что различные диаграммы отображаются на локальном хосте с помощью clr-charts.
Довольно просто, верно :) В следующей статье я перейду к разделу о том, как я создал библиотеку для этого проекта и опубликовал ее на NPM в виде пакета. До счастливого кодинга :)
