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

2024-10-19 10:06:46

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

安装 Material 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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

webapp框架AngularUI的demo改造之路

目的:把AngularUI的模板应用到现有项目上步骤如下: 按功能表修改demo界面学习angularUI如何加载全部页面,为了设置自定义加载模板,在demo/demo.js中找到这一段复制代码代码如下: //当#为/,/scroll等等,请求index.html中<base href=""> + home.html的页面 app.config(function($routeProvider) { $routeProvider.when('/',
Angular动态绑定样式及改变UI框架样式的方法小结

AngularJS 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML. AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:
浅析webapp框架AngularUI的demo

angularUI下载地址:https://github.com/Clouda-team/BlendUI 下载解压后,demo在根目录现在测试官网demo的使用用浏览器打开mobile-angular-ui-master/demo/index.html,发现没加载样式或者js.然后,审查元素后,发现加载的路径不对,于是进行了以下修改第5行:<base href="/mobile-angular-ui-master/" /> 去掉所有/网站根目录路径,改为相对路径 de
解析Angular 2+ 样式绑定方式

引言开发ngx(angular 2+ 以后都直接称为ngx)也有1年半的时间了,刚开始开发的时候使用的还是angular2 RC版,现在已经出angular5了,时光飞逝啊! ngx从设计之初就是一个component-based的框架,所以大到一个页面,小到一个按钮,都是一个component. 这就涉及到了组件的重用,设计通用组件的时候,必不可少的就是动态的样式绑定. 回头想想, angular还真是给我们提供了好几种属性绑定的方式呢. 接下来我们就来具体看看如果在组件中使用样式绑定. s
Angular学习笔记之集成三方UI框架、控件的示例

本文介绍了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/@angul
jQuery UI Dialog控件中的表单无法正常提交的解决方法

最近使用jQuery UI的Dialog控件时发现如果在此控件放置表单,则所有表单均无法正常提交,具体表现为: 1.提交按钮失效,点击后无任何反应. 2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog中的表单数据. 研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部.form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了动态生成的HTML元素内.也就是说,原先在form内的表单在Dialog初始化
Vue+Element UI 树形控件整合下拉功能菜单（tree + dropdown +input）

这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单输入过滤框以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示效果如图: 图示1:悬浮在树节点状态图示2:点击三个点图标状态
Android UI 中的 ListView列表控件的示例

当程序中有大量的数据需要展示时,就需要用到 ListView 啦.ListView 允许用户通过手指上下滑动的方式将屏幕外的数据滚动到屏幕内,同时屏幕上原有的数据则会滚动出屏幕. 1 基本用法布局文件中加入 ListView: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/and
Angular学习笔记之angular的$filter服务浅析

首先,介绍下$filter服务: 1.$filter是用来进行数据格式化的专用服务: 2.AngularJS内置了currency.date.filter.json.limitTo.lowercase.uppercase.number.orderBy这8个filter: 3.filter可以嵌套使用,用管道符号"|"来分隔(有点像linux): 4.filter可以传递参数: 5.用户可自定义filter. 介绍下内置filter: currency:用于格式化货币,如在数值前自动加上
YII框架学习笔记之命名空间、操作响应与视图操作示例

本文实例讲述了YII框架命名空间.操作响应与视图操作.分享给大家供大家参考,具体如下: YII基础准备 1.命名空间 <?php /****假设有三个同名的类,输出的值为A,B,C****/ use a\b\c\apple; use d\e\f\apple as bApple; use g\h\i\apple; $app = new apple();//A $app = new bApple();//B $app = new \Apple();//C 调用的是全局的 2.操作响应 <?php
Python3.4学习笔记之常用操作符,条件分支和循环用法示例

本文实例讲述了Python3.4常用操作符,条件分支和循环用法.分享给大家供大家参考,具体如下: #Pyhon常用操作符 c = d = 10 d /= 8 #3.x真正的除法 print(d) #1.25 c //= 8 #用两个斜杠实现2.x默认的地板除法(整数相除只取整数) print(c) #1 a = 3 ** 2 # 3 的 2 次方 print(a) print(not 0)#True , 0 表示Flase,其他数字为True print(not 2)#Flase #运算符优先级
25个实用酷炫的Android开源UI框架

最近找了一些合适开源控件,这样在日常工作中会更加省时,再此分享给大家,希望能对大家有帮助,此博文介绍的都是UI上面的框架,接下来会有其他的开源框架(如:HTTP框架.DB框架). 1.Side-Menu.Android 分类侧滑菜单,Yalantis 出品. 项目地址:https://github.com/Yalantis/Side-Menu.Android 2.Context-Menu.Android 可以方便快速集成漂亮带有动画效果的上下文菜单,Yalantis出品. 项目地址:https:
浅谈Android RecyclerView UI的滚动控件示例

ListView 由于其强大的功能,在过去的 Andorid 开发中使用非常广泛.不过 ListView 需要优化来提升运行效率,就像我们之前所优化的那样,否则性能将很差.还有就是只能够纵向滚动,如果要想实现横向移动,用 ListView 是做不到的. RecyclerView 可以说是一个增强版的 ListView .它不仅实现了和 ListView 同样的效果,而且还优化了 ListView 存在的各种不足. RecyclerView 现在可是官方推荐使用的滚动控件哦O(∩_∩)O~ 1 基
Android UI控件之ListView实现圆角效果

今天在Android群里面有人再求圆角ListView的实现方式,正好自己以前实现过.因此就共享了现在将其实现方式写在博客中共他人学习.给出实现方式之前顺带加点自己的想法,感觉上android中方形的ListView还是太"硬性",没有圆角的有亲和力.连Apple也为了"圆角"这个设计去申请专利. 看来圆角确实比较适合现在人们的喜好吧. 照老规矩先上两张效果图吧: 第一张: 第二张: 该方式主要就是需要重新去实现自己的ListView代码如下: package co

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

相关推荐

随机推荐