首页 web前端 js教程 Angular学习笔记之集成三方UI框架、控件的示例

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

May 29, 2018 am 11:58 AM
angular 集成

这篇文章主要介绍了Angular学习笔记之集成三方UI框架、控件的示例,详细的介绍了Material UI、Ag-grid等框架,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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 &#39;@angular/platform-browser/animations&#39;;
  imports:[
    BrowserAnimationsModule,
    MatInputModule,
    MatCardModule,
    MatButtonModule,
  ]
登录后复制

安装 Ag-grid 的方法

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 的方法

step 1:

npm install ng-zorro-antd --save
登录后复制

step 2:

直接用下面的代码替换 /src/app/app.module.ts 的内容

注意:在根 module 中需要使用 NgZorroAntdModule.forRoot(),在子 module 需要使用 NgZorroAntdModule

import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { BrowserAnimationsModule } from &#39;@angular/platform-browser/animations&#39;;
import { NgModule } from &#39;@angular/core&#39;;
import { FormsModule } from &#39;@angular/forms&#39;;
import { HttpClientModule } from &#39;@angular/common/http&#39;;
import { NgZorroAntdModule } from &#39;ng-zorro-antd&#39;;
import { AppComponent } from &#39;./app.component&#39;;
@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"
]
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Vue 自定义动态组件实例详解

详解VUE 对element-ui中的ElTableColumn扩展

微信小程序之分享页面如何返回首页的示例

以上是Angular学习笔记之集成三方UI框架、控件的示例的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何在Ubuntu 24.04上安装Angular 如何在Ubuntu 24.04上安装Angular Mar 23, 2024 pm 12:20 PM

Angular.js是一种可自由访问的JavaScript平台,用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言,以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具,可帮助您编写、更新和测试代码。此外,它还提供了许多功能,如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先,您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境,可让您在服务器端运行JavaScript代码。要在Ub

如何在GitLab中进行项目迁移和集成 如何在GitLab中进行项目迁移和集成 Oct 27, 2023 pm 05:53 PM

如何在GitLab中进行项目迁移和集成引言:在软件开发过程中,项目的迁移和集成是一项重要的任务。GitLab作为一个流行的代码托管平台,提供了一系列方便的工具和功能来支持项目迁移和集成。本文将介绍在GitLab中进行项目迁移和集成的具体步骤,并且提供一些代码示例来帮助读者更好地理解。一、项目迁移项目迁移是将已有的代码库从一个源代码管理系统迁移到GitLab上

Angular组件及其显示属性:了解非block默认值 Angular组件及其显示属性:了解非block默认值 Mar 15, 2024 pm 04:51 PM

Angular框架中组件的默认显示行为不是块级元素。这种设计选择促进了组件样式的封装,并鼓励开发人员有意识地定义每个组件的显示方式。通过显式设置CSS属性 display,Angular组件的显示可以完全控制,从而实现所需的布局和响应能力。

使用Angular和Node进行基于令牌的身份验证 使用Angular和Node进行基于令牌的身份验证 Sep 01, 2023 pm 02:01 PM

身份验证是任何Web应用程序中最重要的部分之一。本教程讨论基于令牌的身份验证系统以及它们与传统登录系统的区别。在本教程结束时,您将看到一个用Angular和Node.js编写的完整工作演示。传统身份验证系统在继续基于令牌的身份验证系统之前,让我们先看一下传统的身份验证系统。用户在登录表单中提供用户名和密码,然后点击登录。发出请求后,通过查询数据库在后端验证用户。如果请求有效,则使用从数据库中获取的用户信息创建会话,然后在响应头中返回会话信息,以便将会话ID存储在浏览器中。提供用于访问应用程序中受

Oracle API集成策略解析:实现系统间无缝通信 Oracle API集成策略解析:实现系统间无缝通信 Mar 07, 2024 pm 10:09 PM

OracleAPI集成策略解析:实现系统间无缝通信,需要具体代码示例在当今数字化时代,企业内部系统之间需要相互通信和数据共享,而OracleAPI就是帮助实现系统间无缝通信的重要工具之一。本文将从OracleAPI的基本概念和原理入手,探讨API集成的策略,最终给出具体的代码示例帮助读者更好地理解和应用OracleAPI。一、OracleAPI基本

GitLab的API集成和自定义插件开发技巧 GitLab的API集成和自定义插件开发技巧 Oct 20, 2023 pm 05:30 PM

GitLab的API集成和自定义插件开发技巧引言:GitLab是一个开源的代码托管平台,提供了丰富的API接口供开发者使用,方便进行集成和自定义插件开发。本文将介绍如何进行GitLab的API集成以及自定义插件开发的一些技巧,并提供具体的代码示例。一、GitLab的API集成获取API访问令牌在进行API集成之前,首先需要获取GitLab的API访问令牌。打

PHP与ETL工具的集成 PHP与ETL工具的集成 May 16, 2023 am 11:30 AM

随着企业数据变得越来越庞大和复杂,数据处理和分析的需求变得愈发迫切。为了解决这一问题,ETL(抽取、转换、加载)工具逐渐成为了企业数据处理和分析的重要工具。PHP作为一门流行的Web开发语言,也可以通过与ETL工具的集成来提高数据处理和分析的效率和精度。ETL工具介绍ETL工具是一类能够提取数据、进行数据转换,并将数据加载到目标系统中的软件。其全称是抽取-转

如何在Laravel中使用中间件进行微信支付集成 如何在Laravel中使用中间件进行微信支付集成 Nov 02, 2023 pm 05:21 PM

如何在Laravel中使用中间件进行微信支付集成引言:微信支付是一种非常常见和便捷的支付方式,对于很多需要在线支付服务的项目来说,集成微信支付是必不可少的一步。在Laravel框架中,可以通过使用中间件来实现微信支付集成,以便更好地管理请求流程和处理支付逻辑。本文将介绍如何在Laravel中使用中间件进行微信支付集成,并提供具体的代码示例。一、准备工作在开始

See all articles