Создание простой статистики с помощью Angular 2, D3 и LoopBack (пересмотренная версия)
Ранее на ПРЕДСТАВЛЕНИИ: LoopBack SDK Builder V2 я представил первую стабильную версию SDK Builder, которая легко и красиво интегрирует IBM StrongLoop LoopBack Framework с Google Angular 2 Framework, которые вместе позволяют создавать не только веб-страницы, но настольные, мобильные приложения, прогрессивные приложения и приложения Интернета вещей.
Сегодня я публикую исправленную версию предыдущей статьи Построение простой статистики с помощью Angular 2, D3 и LoopBack, которая за 5 месяцев многое изменилась в мире Angular 2 и определенно требует доработки.
ОПИСАНИЕ ПРОЕКТА
В этом руководстве мы собираемся создать приложение Angular 2 с помощью инструмента Angular CLI, также мы создадим StatModule, используя окончательный API Angular 2.
Мы также получим наборы данных из API, который мы создали в Части 1 и Части 2.
Позже мы будем использовать D3 для создания компонента диаграммы, который поможет нам представить данные, которые мы создали в моих предыдущих сообщениях.
ТРЕБОВАНИЯ
- NodeJS
- НПМ
- Angular CLI
- "Машинопись"
- Следуйте Части 1 и Части 2, если вам интересно, как мы получили наборы данных для диаграмм.
НАСТРОЙКА УГЛОВОГО ПРОЕКТА
Мы можем начать с установки инструмента Angular CLI, который может помочь вам сформировать ваше приложение, сделав за вас необходимую конфигурацию.
$ npm install -g angular-cli $ cd /to/project/root $ ng new easy-stats-app
Приведенная выше команда создаст новую папку с новым приложением Angular 2, но всегда требуется зависимость, когда вы собираетесь использовать удаленный API, который не включен в ядро Angular 2: @angular / http модуль. Таким образом, вам нужно будет установить его, и сейчас очень хороший момент для этого.
$ cd easy-stats-app $ npm install — save @angular/http
УСТАНОВИТЬ SDK BUILDER
Теперь, когда у нас есть набор приложений, мы хотим начать использовать конечные точки, которые мы создали в Части 1 и Части 2, но на этот раз мы будем использовать эти конечные точки, используя автоматически созданный комплект для разработки программного обеспечения.
$ cd ../easy-stats-api/ $ npm install — save-dev @mean-expert/loopback-sdk-builder
СОЗДАТЬ SDK
LoopBack SDK Builder может анализировать ваш API и автоматически создавать полностью рабочий SDK, который позволяет вам не тратить время на создание интерфейсов, классов и сервисов Angular 2 TypeScript; позволяя сразу же приступить к написанию приложения.
Для этого вам необходимо создать новую команду сценария NPM следующим образом:
easy-stats-api / package.json
{ … “scripts”: { … “build:sdk”: “./node_modules/.bin/lb-sdk server/server.js ../easy-stats-app/src/app/shared/sdk” } … }
Сохраните файл, а затем из терминала просто выполните следующую команду:
$ npm run build:sdk
Через пару секунд вы увидите список сгенерированных файлов в вашем приложении Angular 2. Если вы хотите узнать более подробно о библиотеках, которые только что создал LoopBack SDK Builder, то вы можете увидеть следующую Ссылку на компоненты SDK.
УСТАНОВИТЬ ANGULAR 2 SDK
К этому моменту у вас уже должен быть каталог приложений Angular 2; все файлы, относящиеся к вашему SDK Angular 2, но вам все равно нужно сообщить Angular, что есть модуль, который вы хотите использовать.
легко-статистика-приложение / SRC / приложение / app.module.ts
import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; import { FormsModule } from ‘@angular/forms’; import { HttpModule } from ‘@angular/http’; import { AppComponent } from ‘./app.component’; // Import the SDK Module import { SDKModule } from ‘./shared/sdk’; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpModule, // Tell Angular we want the SDKModule to be available app wide SDKModule.forRoot() ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Тем, кто использует WebPack, может потребоваться импортировать модуль непосредственно из индекса в каталоге SDK следующим образом:
import { SDKModule } from ‘./shared/sdk/index’;
Вот и все; теперь вы можете начать использовать свой API и писать модули Angular 2. Итак, давайте создадим его.
СОЗДАТЬ СТАТИЧЕСКИЙ МОДУЛЬ
Преимуществом Angular CLI является то, что вам не нужно вручную создавать модули и компоненты, а использовать команды для их автоматического создания.
$ ng generate module Stat installing module create src/app/stat/stat.module.ts installing component create src/app/stat/stat.component.css create src/app/stat/stat.component.html create src/app/stat/stat.component.spec.ts create src/app/stat/stat.component.ts
ОБНОВИТЬ СТАТКОМПОНЕНТ
Нам нужно обновить наш StatComponent, который будет получать наборы данных из нашего приложения LoopBack, для этого нам нужно импортировать модель клиента и службу CustomerApi из SDK.
Затем вы можете начать создавать экземпляры модели клиента, которые привязаны к области действия компонента, это означает, что после определения свойства клиента у вас также будет доступ в шаблоне компонента и при необходимости использовать односторонние или двусторонние привязки данных.
Также вы можете установить правильный тип, он будет содержать схему, которую вы определяете в своих моделях API, тогда вам просто нужно ввести службу CustomerApi и начать соединять все вместе.
import { Component, OnInit } from ‘@angular/core’; import { Customer } from ‘../shared/sdk/models’; import { CustomerApi } from ‘../shared/sdk/services’; @Component({ selector: ‘app-stat’, templateUrl: ‘./stat.component.html’, styleUrls: [‘./stat.component.css’] }) export class StatComponent implements OnInit { private customer: Customer = new Customer(); private range: string = ‘weekly’; constructor(private customerApi: CustomerApi) { } ngOnInit() { } getStats() { this.customerApi.customerStatsWrapper(this.customer.id, this.range) .subscribe((stats: any[]) => console.log(stats)); } }
Итак, я знаю, что в данный момент это похоже на черную магию, и вы можете спросить, откуда берутся эти услуги и почему мы звоним прямо сейчас?
Это почти волшебство, но правда в том, что LoopBack SDK Builder может перемещаться по всем вашим моделям и службам REST, которые вы определили в LoopBack, а затем создавать для вас все, что вам нужно, просто соединяя части вместе.
Легко, да? Ну… что это за частный customerApi: CustomerApi в конце концов? Если вы новичок в мире Angular 2, тогда вы должны знать, что фреймворк будет внедрять каждый нужный вам экземпляр зависимости, когда он определен в конструкторе компонента ... Другими словами, это все равно, что сказать Angular 2, что вы хотите использовать CustomerApi, который поступает из SDK, и вам нужна платформа для создания экземпляра для этой зависимости, а затем внедрения его в свой компонент. Этот шаблон проектирования называется Внедрение зависимостей.
ОБНОВЛЕНИЕ ВИДА
Измените файл stat.component.html, добавив следующую разметку:
<h1>Easy Stats</h1> <label for=”customerId”>Customer Id:</label> <input name=”customerId” type=”text” [(ngModel)]=”customer.id” placeholder=”customerId” /> <label for=”range”>Range:</label> <input name=”range” type=”text” [(ngModel)]=”range” placeholder=”range” /> <button (click)=”getStats()”>Get Stats</button>
ОБНОВИТЬ APP.COMPONENT.HTML
А пока мы будем вызывать наш StatComponent прямо из app.component.html.
<h1> {{title}} </h1> <app-stat></app-stat>
ПЕРЕД ТЕСТОМ
Перед тестированием приложения вам необходимо убедиться, что ваш API работает и вы установили количество клиентов и заказов.
Кроме того, мы не настраивали какой-либо источник данных для нашего API. Если вы остановите процесс, вы потеряете свои данные, поэтому вы не сможете протестировать это приложение.
Чтобы избежать такого поведения, вам необходимо Настроить источник данных в LoopBack.
КОНТРОЛЬНАЯ РАБОТА
Если вы снова запустите сервер $ ng serve, вы увидите форму, которая поможет вам получить информацию из API, который мы создали.
На данный момент мы можем проверить информацию в консоли браузера.
ЧТО СЛЕДУЮЩЕЕ?
В своем следующем сообщении в блоге я опубликую исправленную версию моей предыдущей статьи Как создать компонент диаграммы в Angular 2 и D3, продолжая приложение, которое мы только что разработали.
Если вам нравится эта серия и вы хотите быть в курсе следующих релизов и новых пакетов, подпишитесь на меня в Twitter @johncasarrubias и, если вы чувствуете это, оставьте здесь комментарий.
Спасибо за чтение.