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" or style.css @import "[email protected]/material/prebuilt-themes/indigo-pink.css"; step 4: index.html <link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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, ]
angular 6 上面安裝 Material UI
這幾天看到 angular已經更新到了6,本著好奇的心態去看了下,發現 angular 6上面新增 material 變的簡單多了。只需要一行命令就可以搞定。
進入到工程目錄下
ng add @angular/material
圖示:
安裝 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 '@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"
]
安裝加密的工具 crypto-js
cd 工程目錄下
npm install crypto-js --save
在使用的 ts 檔案中:
import * as CryptoJS from 'crypto-js';
// 對應的類名根據實際情況定
class{
encrypt() {
// 1230
// 4122cb13c7a474c1976c9706ae36521d
let encryptData = CryptoJS.MD5("1230").toString(CryptoJS.enc.Hex);
}
}
附錄:
import { Component, OnInit } from '@angular/core';
import * as CryptoJS from 'crypto-js';
@Component({
selector: 'app-demo',
templateUrl: './demo.component.html',
styleUrls: ['./demo.component.scss']
})
export class DemoComponent implements OnInit {
encryptData: any;
constructor() { }
ngOnInit() {
}
encrypt() {
// 1230
// 4122cb13c7a474c1976c9706ae36521d
this.encryptData = CryptoJS.MD5("1230").toString(CryptoJS.enc.Hex);
var sHA1 = CryptoJS.SHA1("Message").toString(CryptoJS.enc.Hex);
console.log("sHA1 = %s", sHA1);
var sHA256 = CryptoJS.SHA256("Message").toString(CryptoJS.enc.Hex);
console.log("sHA256 = %s", sHA256);
var hmacMD5 = CryptoJS.HmacMD5("Message", "Secret Passphrase").toString(CryptoJS.enc.Hex);
console.log("hmacMD5 = %s", hmacMD5);
var hmacSHA1 = CryptoJS.HmacSHA1("Message", "Secret Passphrase").toString(CryptoJS.enc.Hex);
console.log("hmacSHA1 = %s", hmacSHA1);
var aesEncrypt = CryptoJS.AES.encrypt("Message", "Secret Passphrase");
console.log("aesEncrypt = %s", aesEncrypt.iv.toString(CryptoJS.enc.Hex));
var aesDecrypt = CryptoJS.AES.decrypt(aesEncrypt, "Secret Passphrase");
console.log("aesDecrypt = %s", aesDecrypt.toString(CryptoJS.enc.Utf8));
// base64 encrypt
var rawStr = "hello world!";
var wordArray = CryptoJS.enc.Utf8.parse(rawStr);
var base64 = CryptoJS.enc.Base64.stringify(wordArray);
console.log('base64Encrypt = ', base64);
// base64 decrypt
var parsedWordArray = CryptoJS.enc.Base64.parse(base64);
var parsedStr = parsedWordArray.toString(CryptoJS.enc.Utf8);
console.log('base64Decrypt = ',parsedStr);
}
}
相關推薦
Angular學習筆記之整合第三方UI框架、元件
安裝 Material UI 方法: step 1: npm install --save @angular/material @angular/cdk step 2: npm install --save @angular/animat
《逐夢旅程:Windows遊戲編程之從零開始》學習筆記之二:GDI框架
register 開發 操作 程序 turn use 繪制 cal 完整 1 //===========================================【程序說明】=================================== 2 //
ES學習筆記之-整合測試的簡單學習
整合測試在es原始碼中的用法比較簡單。我選擇的切入口是delete-by-query外掛。 將es外掛的原始碼匯入intellij後,直接執行類DeleteByQueryRestIT, 就會執行所有的整合測試用例。 -ea -Dtests.security.manager=false 這個執行結果,會讓
Unity學習筆記 之 觸發Unity UI 的 Button 事件 的程式碼記錄
首先奉獻上 Button 所觸發的事件 的指令碼程式碼。 檔名為testButtonEvent using UnityEngine; using System.Collections; //1.引入 UI 。 using UnityEngine.UI; public
Framework7學習筆記之 手風琴效果(折疊、展開效果)
元素 表視圖 href 升級 block lin strong 而是 color 一:手風琴效果 手風琴效果類似於列表視圖,不同的地方在於:點擊列表元素時,會展開列表元素,展示詳細的元素信息,而不是跳轉到詳情頁;再次點擊,就折疊起來。 二:手風琴布局(lis
C++標準模板庫學習筆記之序列容器(vector、array)
序列容器以線性序列的方式儲存元素。五種標準的序列容器:array<T,N>,vector<T>,deque<T>,list<T>,forward_list<T>。Arrayarray<T, N>是一個有N
第二天學習筆記之簡單排序(氣泡排序、選擇排序、插入排序)
public class demo { public static void main(String[] args) { //陣列長度 方便整合測試 int length = 10000; //生成隨機數long測試 邊界1--1000
Halcon學習筆記之缺陷檢測(布匹、皮革、塑料)
例程:detect_indent_fft.hdev說明:這個程式展示瞭如何利用快速傅立葉變換(FFT)對塑料製品的表面進行目標(缺陷)的檢測,大致分為三步:首先,我們用高斯濾波器構造一個合適的濾波器(將原圖通過高斯濾波器濾波);然後,將原圖和構造的濾波器進行快速傅立葉變換;最
03.Spring Cloud學習筆記之服務註冊與服務發現元件Eureka
前言 從本篇部落格開始將正式進入Spring Cloud的實戰部分,因為博主用了很長時間的Dubbo,並且Spring Cloud和Dubbo都是微服務框架,它們有很多相似之處,所以可能在部落格中提及進行類比,如果沒有接觸過Dubbo的朋友直接略過該部分內容即
Zeppelin 學習筆記之 Zeppelin安裝和elasticsearch整合
XML exp ado 8.0 elk mage search tor 選擇 Zeppelin安裝: Apache Zeppelin提供了web版的類似ipython的notebook,用於做數據分析和可視化。背後可以接入不同的數據處理引擎,包括spark, hive,
element ui Angular學習筆記(一)
5.1 har del align ger main offset 搜索 vertica 1.element ui安裝 npm i --save element-angular 2.Angular-cli引入 引入後需要開啟ElModule.forRoot(),也可以單獨引
ELK學習筆記之CentOS 7下ELK(6.2.4)++LogStash+Filebeat+Log4j日誌整合環境搭建
0x00 簡介 現在的公司由於絕大部分專案都採用分散式架構,很早就採用ELK了,只不過最近因為額外的工作需要,仔細的研究了分散式系統中,怎麼樣的日誌規範和架構才是合理和能夠有效提高問題排查效率的。 經過仔細的分析和研究,確定下面的架構應該是比較合理的之一(Filebeat也支援直
Vue.js框架學習筆記之三
Vue.js中的表單 可以用v-model指令在表單 <input>及 <textarea>元素上建立雙向資料繫結,它會根據控制元件型別自動選取正確的方法來更新元素。 v-model 會忽略所有表單元素的 value、checked、select
Vue.js框架學習筆記之二
Vue.js中的樣式繫結 class和style是HTML元素的屬性,用於設定元素的樣式,我們可以通過v-bind來設定樣式屬性,可繫結一個數據屬性或者物件。 v-bind:class="..." v-bind:style="..." class例項: <!DOCTYPE
Spring Cloud學習筆記之Eureka框架的原理
Eureka 服務發現與註冊:我們在呼叫微服務的時候,如果我們的微服務部署了多份,我們應該如何去呼叫?這裡就涉及到了服務發現與註冊。服務發現就是程式如何通過一個標誌來獲取服務列表,並且這個服務列表是能夠隨著服務的狀態而動態變更的。 Spring Cloud提供了多種註冊中心的支援:如Eur
大資料技術學習筆記之hive框架基礎3-sqoop工具的使用及具體業務分析
一、CDH版本的介紹及環境部署 -》Hadoop的三大發行版本 -》Apache Hadoop -》
大資料技術學習筆記之hive框架基礎2-hive中常用DML和UDF和連線介面使用
一、分割槽表的介紹及使用 -》需求:統計每一天的PV,UV,每一天分析前一天的資料 -》第一種情況:每天的日誌儲存在同一個目錄中 &nbs
大資料技術學習筆記之hive框架基礎1-基本架構及環境部署
一、hive的介紹及其發展 "27.38.5.159" "-" "31/Aug/2015:00:04:37 +0800" "GET /course/view.php?id=27 HTTP/1.1" "303" "440" - "http://www.micro.com/user.php?act
大資料技術學習筆記之Hadoop框架基礎5-Hadoop高階特性HA及二次排序思想
一、回顧 -》shuffle流程 -》input:讀取mapreduce輸入的 &nbs
大資料技術學習筆記之Hadoop框架基礎1-Hadoop介紹及偽分散式部署
一、學習建議 -》學習思想 -》設計思想:分散式 -》資料採集