Angular utilise le cadre et les contrôles de l'interface utilisateur-js tutoriel-php.cn

Angular utilise le cadre et les contrôles de l'interface utilisateur

php中世界最好的语言

Libérer： 2018-06-14 11:09:28

original

2186 Les gens l'ont consulté

Cette fois, je vais vous présenter l'utilisation par Angular des frameworks et des contrôles de l'interface utilisateur. Quelles sont les précautions à prendre pour l'utilisation par Angular des frameworks et des contrôles de l'interface utilisateur ? Ce qui suit est un cas pratique, jetons un coup d'œil.

étape 1 :

npm install --save @angular/material @angular/cdk

Copier après la connexion

étape 2 :

npm install --save @angular/animations

Copier après la connexion

étape 3 :

angular.cli

../node_modules/@angular/material/prebuilt-themes/indigo-pink.css

Copier après la connexion

style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Copier après la connexion

étape 4 :

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" rel="stylesheet">

Copier après la connexion

étape 5 :

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

Copier après la connexion

Comment installer Ag-grid

Site officiel d'Ag-grid : https://www.ag-grid.com/

étape 1 :

npm install --save ag-grid-angular ag-grid

Copier après la connexion

étape 2 :

angular.cli

"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/ag-theme-fresh.css"

Copier après la connexion

étape 3 :

app.module.ts

imports:[
  AgGridModule.withComponents([])
],
exports:[
  AgGridModule
]

Copier après la connexion

Comment installer NG-ZORRO

Site officiel de NG-ZORRO : https://ng.ant.design/version/0.7.x/docs/introduce/zh

étape 1 :

npm install ng-zorro-antd --save

Copier après la connexion

étape 2 :

Remplacez directement le contenu de /src/app/app.module.ts par le code suivant

Remarque : dans le module racine, NgZorroAntdModule.forRoot() doit être utilisé dans le sous-module et NgZorroAntdModule

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 { }

Copier après la connexion

étape 3 :

Modifier la liste des styles du .angular-cli.json fichier

"styles": [
  "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less"
]

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser le nouvel attribut CSS display:box

Comment déterminer le glissement de l'utilisateur dans H5 Direction de l'événement tactile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!