Angular Google Charts - Настройка среды

В этом руководстве вы узнаете, как подготовить среду разработки для начала работы с Google Charts и Angular Framework. В этой главе мы обсудим настройку среды, необходимую для Angular 6. Чтобы установить Angular 6, нам потребуется следующее:

  • Nodejs
  • Npm
  • Angular CLI
  • IDE для написания вашего кода

Nodejs должен быть больше 8,11, а npm должен быть больше 5,6.

Nodejs

Чтобы проверить, установлен ли nodejs в вашей системе, введите node -vв терминале. Это поможет вам увидеть версию nodejs, установленную в настоящее время в вашей системе.

C:\>node -v
v8.11.3

Если он ничего не печатает, установите nodejs в свою систему. Чтобы установить nodejs, перейдите на домашнюю страницуhttps://nodejs.org/en/download/ из nodejs и установите пакет на основе вашей ОС.

В зависимости от вашей ОС установите необходимый пакет. После установки nodejs вместе с ним будет установлен npm. Чтобы проверить, установлен ли npm, введите в терминале npm -v. Он должен отображать версию файла npm.

C:\>npm -v
5.6.0

Установка Angular 6 очень проста с помощью angular CLI. Посетите домашнюю страницуhttps://cli.angular.io/ angular, чтобы получить ссылку на команду.

Тип npm install -g @angular/cli, чтобы установить angular cli в вашей системе.

Вы получите указанную выше установку в своем терминале после установки Angular CLI. Вы можете использовать любую IDE по вашему выбору, например, WebStorm, Atom, Visual Studio Code и т. Д.

Установить Google Charts Wrapper

Выполните следующую команду, чтобы установить модуль Google Charts Wrapper в созданном проекте.

googleChartsApp> npm angular-google-charts

+ [email protected]
added 2 packages in 20.526s

Добавьте следующую запись в файл app.module.ts

import { GoogleChartsModule } from 'angular-google-charts';

imports: [
   ...
   GoogleChartsModule
],