Angular学习笔记之集成三方UI框架、控件的示例


Posted in Javascript onMarch 23, 2018

本文介绍了Angular学习笔记之集成三方UI框架、控件的示例,分享给大家,具体如下:

安装 Material UI 方法:

Material 官网:https://material.angular.io

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,
  ]

安装 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/zh

step 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"
]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
教你在heroku云平台上部署Node.js应用
Jul 30 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
ES6基础之默认参数值
Feb 21 Javascript
bootstrap中的导航条实例代码详解
May 20 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 #Javascript
JavaScript 五大常见函数
Mar 23 #Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 #Javascript
剖析Angular Component的源码示例
Mar 23 #Javascript
vue利用axios来完成数据的交互
Mar 23 #Javascript
JS动画定时器知识总结
Mar 23 #Javascript
p5.js 毕达哥拉斯树的实现代码
Mar 23 #Javascript
You might like
dedecms模版制作使用方法
2007/04/03 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
Node.js学习之内置模块fs用法示例
2020/01/22 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python实现内存监控系统
2021/03/07 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
python实现猜数游戏
2020/03/27 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
文明礼仪小标兵事迹
2014/01/12 职场文书
班级聚会策划书
2014/01/16 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
实习生工作证明范本
2014/09/14 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2014年综治维稳工作总结
2014/11/17 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
详解pytorch创建tensor函数
2022/03/22 Python