Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Schritte zur Verwendung von UI-Frameworks und -Steuerelementen von Drittanbietern in Angular

php中世界最好的语言
Freigeben: 2018-05-03 14:54:19
Original
2331 Leute haben es durchsucht

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Verwendungsschritte des Drittanbieter-UIFrameworks und der Steuerung in Angular sowie Vorsichtsmaßnahmen Was sind das?

Material-UI-Methode installieren:

Offizielle Material-Website:

https://material.angular.io

Schritt 1:

npm install --save @angular/material @angular/cdk
Nach dem Login kopieren
Schritt 2:

npm install --save @angular/animations
Nach dem Login kopieren
Schritt 3:

angular.cli

../node_modules/@angular/material/prebuilt-themes/indigo-pink.css
Nach dem Login kopieren
oder

style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
Nach dem Login kopieren
Schritt 4 :

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" rel="stylesheet">
Nach dem Login kopieren
Schritt 5:

  app.module.ts
  import {MatInputModule, MatCardModule, MatButtonModule} from "@angular/material";
  import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  imports:[
    BrowserAnimationsModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
  ]
Nach dem Login kopieren

So installieren Sie Ag-grid

Offizielle Website von Ag-grid : https ://www.ag-grid.com/

Schritt 1:

npm install --save ag-grid-angular ag-grid
Nach dem Login kopieren
Schritt 2:

angular.cli

"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/ag-theme-fresh.css"
Nach dem Login kopieren
Schritt 3 :

app.module.ts

imports:[
  AgGridModule.withComponents([])
],
exports:[
  AgGridModule
]
Nach dem Login kopieren

So installieren Sie NG-ZORRO

Offizielle Website von NG-ZORRO: https://ng.ant .design/ version/0.7.x/docs/introduce/zh

Schritt 1:

npm install ng-zorro-antd --save
Nach dem Login kopieren
Schritt 2:

Ersetzen Sie /src/app/app.module direkt durch der folgende Code Inhalt von .ts

Hinweis: NgZorroAntdModule.forRoot() muss im Root-Modul verwendet werden und NgZorroAntdModule muss im Untermodul verwendet werden

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 { }
Nach dem Login kopieren
Schritt 3:

Ändern Sie die .angular-Styles-Liste der cli.json-Datei

"styles": [
  "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
]
Nach dem Login kopieren
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie hier Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zum Aufrufen der Baidu-Karte in Vue

So verwenden Sie JointJS-Attribute in vue

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von UI-Frameworks und -Steuerelementen von Drittanbietern in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage