ホームページ >ウェブフロントエンド >jsチュートリアル >Angular 研究ノート: サードパーティの UI フレームワークとコントロールの統合の例
この記事では主に Angular の学習メモとサードパーティの UI フレームワークとコントロールの統合例を紹介します。また、マテリアル UI、Ag-grid などのフレームワークについても詳しく紹介します。興味のある方は参考にしてください。この記事では、Angular の学習メモと、サードパーティの UI フレームワークとコントロールの統合の例を紹介します。詳細は次のとおりです。
ステップ 1:
npm install --save @angular/material @angular/cdk
ステップ 3:
angular.cli
npm install --save @angular/animations
or
style.css
../node_modules/@angular/material/prebuilt-themes/indigo-pink.css
ステップ 4:
index.html
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
ステップ 5:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" rel="stylesheet">Ag-grid のインストール方法
ステップ 1: app.module.ts
import {MatInputModule, MatCardModule, MatButtonModule} from "@angular/material";
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
imports:[
BrowserAnimationsModule,
MatInputModule,
MatCardModule,
MatButtonModule,
]
ステップ2:
angular.cli
npm install --save ag-grid-angular ag-grid
ステップ3:
app.module.ts
"../node_modules/ag-grid/dist/styles/ag-grid.css", "../node_modules/ag-grid/dist/styles/ag-theme-fresh.css"NG-ZORROのインストール方法
ステップ1:imports:[
AgGridModule.withComponents([])
],
exports:[
AgGridModule
]
ステップ2:
/src/appを直接置き換える/app.module に次のコードを追加します
注: NgZorroAntdModule.forRoot() はルート モジュールで使用する必要があり、NgZorroAntdModule はサブモジュールで使用する必要があります
npm install ng-zorro-antd --save
ステップ 3:
.angular-cli.json ファイルのスタイルリスト
import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { NgZorroAntdModule } from 'ng-zorro-antd'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule, HttpClientModule, BrowserAnimationsModule, NgZorroAntdModule.forRoot() ], bootstrap: [AppComponent] }) export class AppModule { }
上記は私が皆さんのためにまとめたものです。将来的に皆さんのお役に立てれば幸いです。
関連記事:
Vueカスタム動的コンポーネントインスタンスの詳細説明Element-uiにおけるVUEのElTableColumn拡張機能の詳細説明
WeChatアプレットの共有ページのトップページに戻る方法の例
以上がAngular 研究ノート: サードパーティの UI フレームワークとコントロールの統合の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。