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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
javascript的列表切换【实现代码】
May 03 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
详解js中==与===的区别
Jan 08 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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
让PHP更快的提供文件下载的代码
2012/06/13 PHP
PHP静态成员变量
2017/02/14 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
一个选择最快的服务器转向代码
2009/04/27 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
js获取ip和地区
2017/03/10 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
vue路由分文件拆分管理详解
2020/08/13 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
详解python数据结构和算法
2019/04/18 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
Django框架安装方法图文详解
2019/11/04 Python
python框架Django实战商城项目之工程搭建过程图文详解
2020/03/09 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
英语自荐信范文
2013/12/11 职场文书
《灯光》教学反思
2014/02/08 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
《总之就是很可爱》新作短篇动画《总之就是很可爱~制服~》将于2022年夏天播出
2022/04/07 日漫
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python