2016年9月29日 星期四

[ 筆記 ] 在 angular-cli 中使用 auth0-lock (2)

上一篇的方法雖然可以運作,可是解法其實蠻醜陋的,於是又研究了幾天,終於找到一個比較能接受的解法。

版本:

angular-cli : 1.0.0-beta.16

auth0-lock : 10.4.0

angular2-jwt : 0.1.23

-----------------------------------------------------------------------------

安裝套件:

npm install --save auth0-lock

npm install --save angular2-jwt

npm install --save-dev @types/auth0-lock

-----------------------------------------------------------------------------

設定 tsconfig.json :

加入 "allowSyntheticDefaultImports": true

-----------------------------------------------------------------------------

在 ts 檔中 

import Auth0Lock from 'auth0-lock'


參考資料:

[ 教學 ] building hacker news with angular 2 cli, rxjs and webpack

Building Hacker News with Angular 2 CLI, RxJS and Webpack

不錯的文章,解釋的算仔細,而且第一次看到遞迴使用 component 的用法。

2016年9月26日 星期一

[ 筆記 ] 在 angular-cli 中使用 auth0-lock (1)

Auth0官網教學文

官網教學文是使用 CDN 載入,想試著結合 angular-cli,用 bundle 的方式使用,就試了一下囉。

---------------------------------------------------------------

版本:

angular-cli : 1.0.0-beta15

auth0-lock : 10.3.0

angular2-jwt : 0.1.23

---------------------------------------------------------------

安裝套件:

npm install auth0-lock --save

npm install angular2-jwt --save

---------------------------------------------------------------

設定:

* angular-cli 專案資料夾下的 angular-cli.json 中 packages 陣列加入

"../node_modules/auth0-lock"
像這樣

 "packages": [
    "../node_modules/auth0-lock"
  ]

* app/auth.service.ts 加入(我是加在 import 之下):

let Auth0Lock = require('auth0-lock').default;

* Auth0 Dashboard,在 client 設定中設定 Allowed Origins (CORS),加入

http://localhost:4200

視實際狀況,網址可能不同,angular-cli default 是 4200 port


 ---------------------------------------------------------------

Sample Code:

2016年9月24日 星期六

javascript 產生連續數字的陣列

let a = Array(10).fill().map((value, index) => index + 1);

a 是一個 10 個元素的陣列,其值為 1 - 10

let a = Array(10).fill(5);

a 是一個 10 個元素的陣列,其值全部都是 5

2016年9月21日 星期三

[ 工具 ] 跨平台的 SQL Client:DBeaver

DBeaver | Free Universal SQL Client

跨平台的 SQL Client,支援多種資料庫系統。雖然有中文語系,不過是簡體中文,看不習慣就....換成英文吧。只要啟動時加上  -nl en 就好,可以考慮直接修改啟動捷徑。

Ubuntu 的啟動檔路徑:

/usr/share/applications/dbeaver.desktop



Exec=/usr/share/dbeaver/dbeaver

改成

Exec=/usr/share/dbeaver/dbeaver -nl en

[ 參考 ] 圖片裁切範例@Laravel

Laravel 5.2 - Image Crop and Edit Example

使用 Laravel 與 Jcorp 進行圖片裁切

[ 參考 ] MySQL 超新手入門

MySQL 超新手入門

參考參考

2016年9月18日 星期日

[ 筆記 ] angular 2 之 $event.stopPropagation()

下面是 angular.io 的一段程式碼範例:

1:   <li *ngFor="let hero of heroes" (click)="onSelect(hero)"  
2:     [class.selected]="hero === selectedHero">  
3:    <span class="badge">{{hero.id}}</span>  
4:    <span>{{hero.name}}</span>  
5:    <button class="delete"  
6:     (click)="delete(hero); $event.stopPropagation()">x</button>  
7:   </li>  

li 有個 click event,內層的 button 也有個 click event,為了防止按下內層的刪除按鈕的同時也觸發了外層 li 的 click event,所以加入 $event.stopPropagation() 以阻止 event bubble 的發生。

其他資料:

[IE][JavaScript] Bubble Event - StopPropagation | 當麻許 - 點部落

DOM 的事件傳遞機制:捕獲與冒泡 | TechBridge 技術共筆部落格 (推薦閱讀)

2016年9月11日 星期日

用前端技術開發桌面應用程式的框架

NW.js  vs  Electron

目前個人比較傾向於 electron,雖然都沒實際用過啦。網路上對於 nwjs 的評價似乎有不少坑,不過 nwjs 程式的進入點可以採用 html or js 檔是我比較喜歡的點,electron 只能用 js 檔。

2016年9月5日 星期一

2016年9月2日 星期五

zeal:離線文件查詢器

記性不好,寫程式時常常要查詢文件?試試 zeal 吧,還是跨平台的呦!


ubuntu 16.04 下安裝:
sudo apt update
sudo apt install zeal
安裝好之後要先下載離線文件檔:
File -> Options -> Docsets
在 PhpStorm 中,先安裝 plugin : Dash

JetBrains Plugin Repository :: Dash

預設快速鍵:
Ctrl + Shift + D
用法:

選擇要查詢的關鍵字,然後按快速鍵即可查詢

PS. zeal 是從下面的影片看來的

給 PHP 開發者的 Visual Studio Code 指南/給 PHP開發者的Visual Studio Code指南 | Community Open Camp 2016 | Channel 9