苹果有毛玻璃,微软有亚克力,而谷歌有纸片。

我个人非常喜欢 Google 的 UI 设计语言 Material Design,要在 Web 端使用 Material Design 组件库,可安装 Angualr Material。

Web 端系统环境为 CentOS 7.6。

CentOS 版本

1.安装 nodejs 和 npm

yum -y install nodejs

以上命令除了安装 nodejs,它还会自动安装 npm。

安装完毕后,输入以下指令检查是否安装成功。

node --version
npm --version

如果有类似上面的结果,则说明 nodejs 和 npm 安装成功。

但安装使用最新版的 Angualr 需要 nodejs v10 版本以上,因此还需要更新 nodejs。

输入以下指令,更新 npm。

npm -g update

更新完成后,输入以下指令,安装 nodejs 升级工具。

npm install -g n

检查是否安装 nodejs 升级工具成功。

n --version

输入以下指令,安装最新版本的 nodejs。

n latest

下载完成时间视网速而定。

安装 n 模块成功后,输入以下指令可选择 nodejs 的版本。

n

选择好版本按下回车即可。

输入以下命令卸载掉老版本的 nodejs 和 npm 并重启。

yum -y remove nodejs
reboot

n 模块将 nodejs 默认安装在 /usr/local 目录下,因此我们还需要把 /usr/local 目录添加至环境变量。

输入以下指令。

vi ~/.bash_profile

按下 i 键,在文件末尾添加以下两行。

export N_PREFIX=/usr/local
export PATH=$N_PREFIX/bin:$PATH

按下 Esc 键,输入 :wq 保存并退出编辑器。

重启一下。

reboot

再次检查 nodejs 和 npm 的版本号。

成功安装最新版本的 nodejs 和 npm。

2.安装 yarn

npm install -g yarn
yarn --version

3.安装 Angular

输入以下指令,将自动安装最新版本的 Angular。

npm install -g @angular/cli

安装完成后,输入以下指令,检查是否安装 Angular 成功。

ng --version

若出现如图所示则说明安装成功。

4.helloMaterial

以下指令用于创建一个新的 Angualr 项目。

ng new helloMaterial

项目创建完毕后,运行 App,稍等片刻可在浏览器上查看效果。

cd helloMaterial
ng serve --host 0.0.0.0

本例使用本地环境进行测试,因此加入参数 –host 0.0.0.0。

在浏览器中输入 http://localhost:4200/ 查看效果吧~

启动成功。

下面配置一下 helloMaterial 项目来使用 Angular Material 组件库。

切换到 helloMaterial 工程目录下的 src/app 目录下。

输入以下指令,安装 Angular Material 组件。

npm install --save @angular/material @angular/cdk @angular/animations
yarn add @angular/material @angular/cdk @angular/animations
npm install --save hammerjs
yarn add hammerjs

按如下编辑 app.module.ts 文件。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatButtonModule} from '@angular/material/button';


@NgModule({
  ...
  imports: [BrowserModule, MatButtonModule, BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }

保存并退出编辑器。

按如下编辑 app.component.ts 文件。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './index.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'helloMaterial';
}

新建文件 index.html 输入如下代码。

<!DOCTYPE HTML>
<html>
<head>
link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<button mat-raised-button color="primary" onclick="alert('Hello Material Design!');">Hello</button>
</body>
</html>

保存并退出编辑器,切换到 helloMaterial/src 目录下。

编辑 styles.css 文件,添加如下一行。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

保存并退出。

编辑 main.ts 文件,在开头添加如下一行。

import 'hammerjs';

重启 helloMaterial 看看效果。

至此 Angular Material 组件库成功在项目中安装。

分类: 技术小记

3 条评论

头像

石樱灯笼 · 2019年9月6日 上午1:28

为什么开始研究 Angular 了?因为学习难度,国内很少有人用 Angular 。

    小宝

    小宝 · 2019年9月6日 上午8:41

    纯学习性质,不深究,到真正做项目的时候会使用主流的框架。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

 

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据