😕 🚓 🤝 VmWareによるAngular c Clarity Design System 🏂🏾 👨🏼‍🎓 🚣🏼

Angular Material 2を使用して、ある時点で製品が想像力に乏しく、いくつかの機能（バッジ、垂直タブ、データグリッド）が最小限の機能で実装されているか、進行中、計画されているという結論に達しました。

夕方、家に着いた彼は、次のプロジェクトの代替としてティムリダを提供できるものを探し始めました。次に、 angular.ioが[ リソース ]タブを保持していることに気付きました。それは数ヶ月前です。
そこで、Angular開発チームは、他のかなり便利なものの中でも、よく知られている会社の製品を追加しました。その開発は尊敬し、子犬の熱意を込めて、VmWareをいつも紹介しています。みんな、非常に価値のある製品-Clarityを作りました。

Clarityのトピックに関する記事を書くことにしましたが、レビューを書きたくありませんでした。誰かが管理パネルをすばやく作成する必要がある場合に備えて、スターターキットのようなことをすることにしました。また、 Highcharts 、 Angular Flex-layout 、およびi18n ngx-translateライブラリが積極的に使用されます。

せっかちな人： github 、 demo

govnokodaがたくさんあります。もしこれが起こったら、理解して、許して、コメントを書いてください、私は非常に感謝します:)

誰かがAngularを知り始めた場合に備えて、Node.jsのインストールプロセス、angular-cliを掘り下げ、ネタバレの下に指示を入れません。

node.jsおよびangular / cliをインストールします

ここからnode.jsをダウンロードしてインストールします。
コマンドを実行して、angular-cliをインストールします。

npm install -g @angular/cli

その後、プロジェクトを生成します。

 ng new ngClarity

そのため、Hello Worldが既に用意されているので、環境を準備し、パッケージをインストールし、Angularを構成する必要があります。

設置

アイコンのパッケージを配置します。

 npm install clarity-icons --save

ポリフィルパッケージ：

 npm install @webcomponents/custom-elements@1.0.0 --save

構成ファイル.angular-cli.jsonにインストールされているすべてを追加します

  "styles": [ "styles.css", "../node_modules/clarity-icons/clarity-icons.min.css" ], "scripts": [ "../node_modules/@webcomponents/custom-elements/custom-elements.min.js", "../node_modules/clarity-icons/clarity-icons.min.js" ],

Angularモジュールを明快さ-uiで補完します：

 npm install clarity-ui --save

構成内の.angular-cli.jsonファイルに戻り、clarity-uiスタイルへのパスを追加します。

  "styles": [ "styles.css", "../node_modules/clarity-icons/clarity-icons.min.css", "../node_modules/clarity-ui/clarity-ui.min.css" ],

パッケージを明快な角度で配置します：

 npm install clarity-angular --save

app.module.tsにインポートを追加します。

 import { ClarityModule } from "clarity-angular";

そしてインポートで宣言します：

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, ClarityModule ], providers: [], bootstrap: [AppComponent] })

公式ドキュメントのみを参照することに慣れている人のために、リンクがあります。

国際化

さらに、i18nモジュール（ ngx-translateライブラリを使用）のインストールと構成を説明する価値があると思いますが、ここでは珍しいことではありませんが、まだ注意を払ってください。

設定します：

 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save

app.module.tsに移動し、インポートで追加します。

 import {TranslateModule, TranslateLoader} from '@ngx-translate/core'; import {TranslateHttpLoader} from '@ngx-translate/http-loader';

翻訳ファイルをロードするhttpトレーディングポストの実装：

 export function HttpLoaderFactory(http: HttpClient) { return new TranslateHttpLoader(http, './assets/i18n/', '.json'); }

/ asset / i18n /ディレクトリに2つのファイル、en.jsonとru.jsonを作成します

@NgModuleのインポートにモジュールを追加して、このビジネスに終止符を打ちます。

 TranslateModule.forRoot({ loader: { provide: TranslateLoader, useFactory: HttpLoaderFactory, deps: [HttpClient] } })

その結果、ngx-translateの初期設定が完了し、app.component.tsでTranslationServiceを宣言できます。これにより、/ assets / i18nディレクトリからjsonファイルがロードされます。

 import {Component, OnInit} from '@angular/core'; import {TranslateService} from "@ngx-translate/core"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{ constructor(public translate: TranslateService){} ngOnInit(){ this.translate.addLangs(["en", "ru"]); this.translate.setDefaultLang('en'); let browserLang = this.translate.getBrowserLang(); if (browserLang.match( /en|ru/ )) { this.translate.use( browserLang ); } else { this.translate.use( 'en' ); } } }

ルーティング

プロジェクトのルーティングサービスを作成します。 / appディレクトリでrouting.module.tsファイルを作成し、 AppRoutingModuleを構成します。

 import {NgModule}from '@angular/core'; import {Routes, RouterModule}from '@angular/router'; const appRoutes: Routes = [ { path: '', redirectTo: '/', pathMatch: 'full', } ]; @NgModule({ imports: [ RouterModule.forRoot( appRoutes ) ], exports: [ RouterModule ] }) export class AppRoutingModule {}

初期化するには、app.module.tsで、AppRoutingModuleのインポートを@NgModuleに追加します。

コンポーネント

現在空の3つのコンポーネント、DashboardComponent、SettingsComponent、およびPageNotFoundComponentを作成します。アプリ内でページディレクトリを作成し、そこから実行します。

 ng generate component dashboard ng generate component settings ng generate component pageNotFound

angle / cliは、指定された名前で3つのディレクトリを作成し、ディレクトリ内のコンポーネントに必要なすべてを作成し、app.moduleを更新します。
時々、angular / cliがファイルパスを誤って解決する場合があり、エラーが発生した場合は、app.moduleでインポートとファイルパスを再確認する必要があります。

次に、routing.module.tsに移動して、新しく作成されたコンポーネントのルートを編集します。

 const appRoutes: Routes = [ { path: 'dashboard', component: DashboardComponent, }, { path: 'settings', component: SettingsComponent, }, { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ];

アプリケーションのフレームワークを構築します。 app.component.htmlに移動して開始します。

 <clr-main-container> <clr-header class="header-3"> <div class="branding"> <a href="..." class="nav-link"> <span class="title">ngClarity</span> </a> </div> <div class="header-actions"> <clr-dropdown> <button class="nav-icon" clrDropdownTrigger> <clr-icon shape="world"></clr-icon> <clr-icon shape="caret down"></clr-icon> </button> <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right"> <a *ngFor="let lang of translate.getLangs()" (click)="translate.use(lang)" clrDropdownItem>{{lang}}</a> </clr-dropdown-menu> </clr-dropdown> <clr-dropdown> <button class="nav-icon" clrDropdownTrigger> <clr-icon shape="user"></clr-icon> <clr-icon shape="caret down"></clr-icon> </button> <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right"> <a href="..." clrDropdownItem>{{ 'profile' | translate }}</a> <a href="..." clrDropdownItem>{{ 'logout' | translate }}</a> </clr-dropdown-menu> </clr-dropdown> </div> </clr-header> <div class="alert alert-app-level"></div> <div class="content-container"> <div class="content-area"> <router-outlet></router-outlet> </div> <clr-vertical-nav [clrVerticalNavCollapsible]="true" [clr-nav-level]="1"> <a clrVerticalNavLink routerLink="/dashboard" routerLinkActive="active" class="nav-link"> <clr-icon clrVerticalNavIcon shape="dashboard"></clr-icon>{{ 'dashboard' | translate }} </a> <a clrVerticalNavLink routerLink="/settings" routerLinkActive="active" class="nav-link"> <clr-icon clrVerticalNavIcon shape="cog"></clr-icon>{{ 'settings' | translate }} </a> </clr-vertical-nav> </div> </clr-main-container>

各ディレクティブについては詳しく説明しません。このため、十分に文書化されたドキュメントがあります。フレームワークは多かれ少なかれ準備ができているので、コンポーネントをすでに使用できます。

ハイチャート

Highcharts用のAngularディレクティブを作成した同志ceborの作業をインストールします。angle -highcharts

 npm install --save angular-highcharts highcharts

次に、app.module add importに移動し、importsに追加してモジュールを宣言します。

 import { ChartModule } from 'angular-highcharts'; @NgModule({ imports: [ ChartModule ] })

フレックスレイアウト

それではflex-layoutを見てみましょう：

 npm install @angular/flex-layout --save

そして伝統により、app.module.tsで

 import { FlexLayoutModule } from '@angular/flex-layout'; @NgModule({ imports: [ FlexLayoutModule ] })

ここで、インポートを宣言するdashboard.component.tsに移動します。

 import * as Highcharts from 'highcharts'; import * as HichartsExporting from 'highcharts/modules/exporting'; import * as Hicharts3d from 'highcharts/highcharts-3d.js'; HichartsExporting(Highcharts);//  exporting Hicharts3d(Highcharts);//  3d

dashboard.component.htmlでブロックを描画し、チャートを配置します：

 <div style="padding: 1em;" fxLayout="row" fxLayout.xs="column" fxLayout.sm="column" fxLayoutWrap fxLayoutGap="1rem" fxLayoutAlign="center"> <div class="card" fxLayout="column" fxLayout.xs="column" fxFlex="49" fxLayout.sm="column" style="padding: 5px;"> <div class="card-block" id="chart1"></div> </div> <div class="card" fxLayout="column" fxLayout.xs="column" fxFlex="49" fxLayout.sm="column" style="padding: 5px;"> <div class="card-block" id="chart2"></div> </div> </div>

そして、コンポーネント自体のコード、dashboard.component.ts：

 import { Component, OnInit } from '@angular/core'; import * as Highcharts from 'highcharts'; import * as HichartsExporting from 'highcharts/modules/exporting'; import * as Hicharts3d from 'highcharts/highcharts-3d.js'; HichartsExporting(Highcharts); Hicharts3d(Highcharts); @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.css'] }) export class DashboardComponent implements OnInit { constructor() { } ngOnInit() { Highcharts.chart('chart1', { chart: { type: 'column' }, title: { text: 'Schedules work progress' }, credits: { enabled: false }, xAxis: { categories: ['line 1', 'line 2', 'line 3', 'line 4'], labels: { skew3d: true, style: { fontSize: '16px' } } }, yAxis: { allowDecimals: false, min: 0, title: { text: 'Total count', skew3d: true } }, tooltip: { headerFormat: '<b>{point.key}</b><br>', pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>' }, plotOptions: { column: { stacking: 'normal', depth: 40, dataLabels: { enabled: true, color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' } } }, series: [ {name: 'Left', data: [10, 58, 23, 8]}, {name: 'Done', data: [27, 98, 44, 65]}, {name: 'Alert', data: [8, 4, 65, 78]} ] }); Highcharts.chart('chart2', { chart: { type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } }, title: { text: 'Browser market shares at a specific website, 2014' }, credits: { enabled: false }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', depth: 35, dataLabels: { enabled: true, format: '{point.name}' } } }, series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); } }

これで、最後に何が起こったのかをすでに確認できます：デモ

これで、最初の部分は終了します。記事の第2部では、 Clarityコンポーネントをより詳細に分析し、ソースがここにあるプロジェクトに実装します： github

VmWareによるAngular c Clarity Design System

設置

国際化

ルーティング

コンポーネント

ハイチャート

フレックスレイアウト

More articles: