Home  >  Article  >  Web Front-end  >  Angular integrates three-party UI frameworks and controls in detail

Angular integrates three-party UI frameworks and controls in detail

php中世界最好的语言
php中世界最好的语言Original
2018-05-08 18:11:271858browse

This time I will bring you a detailed explanation of the use of Angular's integrated three-party UI framework and control. What are the precautions for Angular's integrated three-party UI framework and controls? The following is a practical case, let’s take a look.

step 1:

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

step 2:

npm install --save @angular/animations

step 3:

angular.cli

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

or

style.css

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

step 4:

index.html

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

step 5:

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

How to install Ag-grid

Ag-grid official website: https://www.ag-grid.com/

step 1:

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

step 2:

angular.cli

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

step 3:

app.module.ts

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

How to install NG-ZORRO

NG-ZORRO official website: https://ng.ant.design/version/0.7.x/docs/introduce/zh

step 1:

npm install ng-zorro-antd --save

step 2:

Directly replace the contents of /src/app/app.module.ts with the following code

Note: NgZorroAntdModule.forRoot() needs to be used in the root module, and NgZorroAntdModule needs to be used in the sub-module

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

step 3:

Modify the styles list of the .angular-cli.json file

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related topics on the php Chinese website article!

Recommended reading:

Detailed explanation of unit and E2E testing steps with Angular CLI

Vue document use case summary

Calling the Baidu map plug-in in Vue

The above is the detailed content of Angular integrates three-party UI frameworks and controls in detail. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn