Angular学习笔记之集成第三方UI框架、组件
2018-03-23 09:58
1351 查看
安装 Material UI 方法:
Material 官网:https://material.angular.iostep 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="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, ]
安装 Ag-grid 的方法
Ag-grid 官网: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 ]
安装 NG-ZORRO 的方法
NG-ZORRO 官网:https://ng.ant.design/version/0.7.x/docs/introduce/zhstep 1: npm install ng-zorro-antd --save step 2: 直接用下面的代码替换 /src/app/app.module.ts 的内容
注意:在根 module 中需要使用 NgZorroAntdModule.forRoot(),在子 module 需要使用 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 { }
step 3: 修改 .angular-cli.json 文件的 styles 列表 "styles": [ "../node_modules/ng-zorro-antd/src/ng-zorro-antd.less" ]
相关文章推荐
- SpringBoot学习笔记-集成其他组件框架记录
- Angular学习笔记之集成三方UI框架、控件的示例
- SMP3.0学习笔记之十一 与第三方HTML5框架(例如Sencha Touch)集成
- Django框架学习笔记(30.组合搜索组件源码)
- 框架学习之Spring 第四节 Spring集成JDBC组件开发
- Angular学习笔记【如何正确使用第三方组件】
- 框架学习之Spring 第四节 Spring集成JDBC组件开发
- angular 学习笔记 ( Dynamic Component 动态组件)
- 框架学习之Spring 第四节 Spring集成JDBC组件开发
- 学习笔记之——友盟社会化组件精简版集成qq微信新浪微博
- openstack学习笔记四 组件框架
- 前端框架angular学习笔记(一)
- Angular学习笔记(十三)之组件通讯输入/输出属性
- Java学习笔记-----中间件,组件,容器,框架的精彩理解
- java安全框架-Shiro学习笔记(五)-Shiro集成Web
- Angular学习笔记(十六)组件周期钩子之投影和AfterContentInit
- 学习SSM框架笔记五:利用五大组件采取配置文件和SpringMVC模式写HelloWorld
- Django框架学习笔记(25.Form组件验证)
- Java学习笔记-----中间件,组件,容器,框架的精彩理解
- 【学习笔记】Silverlight框架:Jounce(4)——事件通信