angular

緣起 英文: chasing coin，中文 : 跑酷 IN ! 跟夥伴 Ellington Su 實作一結合 strava 與挖礦，透過社群互動遊戲，讓跑步可以不只是健康而且能夠很酷地賺取加密貨幣。 摘要 使用技術 Server angular material nodejs fcf firebase android

holiSign 的幾個使用情境範例在 samples 出貨單 此Delivery Note 範例 用 可以建立並輕易的拖曳表單欄位，比方說教育訓練表單、出貨單之類，並可在任意位置放置手寫簽名欄位。 Data Model Input 出貨單的資料如表單號碼、出貨方式等如下 : { "form": { "company": "<h1>叉子有限公司</h1>", "title": "<h1>Delivery Note 出貨單</h1>" }, "subject": "<p>統一編號：12332103</p><p>地址/Address：104 台北市松江路 65 號 78 弄 787 號 78 F<p>電話/Phone：<u>02-2587-8787</u></p><p>郵件/Email：<u>tangzi@tangzi.com.tw</u></p>", "order": { "orderNO": "PO29909", "deliveryCom": "Black Cat", "pickupDate": "2020/12/12 12:00" }, "customer": { "company": "艾鈦智能", "phone": "0917187187", "address": "新北市中安區中安路 87 弄 87 號 7 樓" }, "items": [ { "item": "拜多索福恩麵包/Stollen", "spec": "350g", "qty": "2" }, { "item": "多爾袞造型香料餅乾", "spec": "16pcs/盒", "qty": "1" }, { "item": "海洋香料餅乾", "spec": "16pcs/盒", "qty": "4" }, { "item": "巴賽隆納卡多榛果餅乾", "spec": "12pcs/盒", "qty": "5" } ] } 出貨單編輯主控台 這一張出貨單有 11 個 controls，包含一個客戶簽收簽名欄位...

為什麼想要寫 ? 這就 … 目標 可有編輯主控台 (Builder-Console) 可預覽 (Preview) 有手寫簽名功能，簽名時可帶入其他識別欄位 編輯元件可拖曳 將 UI 跟 Data Model 獨立抽離出來 ( json ) UI 可以用 flex 排版 命名 holi Sign 音似『給你簽』 開發環境 Angular Angular Material

當 Route 時, 因為 page 會有 click event / reload page ..等變數 會讓 parent component改變時連帶 Child 也需要改變試了幾個方法 都有用 使用 @Input() ngOnChanges or OnPush + markAsCheck() 有點麻煩的寫法, 這個我大概只會用在 Pure Component 用來顯示就好. 使用 Service + Subject or Observable 缺點是Child Constructor跑得比 Parent 快時, 你就收不到 Parent 先執行next的值. 使用此方法需要極注意先後順序. 使用 Service + RelaySubject 將 Parent route.paramMap cache 在 Service 我比較喜歡最後這兩個.

前陣子被同事問了 Angular Project 的專案結構建議要怎麼擺放比較有彈性!? 說實在的，從 angular v1(angularJS) ~ angular v9 (2019.12)，就是看官方的 Style guide (大概就是長那樣)，而且在開發版本提升的同時，為了因應新 feature 的加入也有可能異動。 查了別人開發架構加上自己的經驗大概是是這樣子，根據 (1)一次性？ (2) 會持續大於 30/40個 component嗎？(3)是否需多人共同維護, 是否需要其他 project dependency ? (4) 是否需要 lazy-loading ? 中小型專案 | 簡易版 如果是一次性開發，且 lazy-loading module的需求很低的狀態下。 |-- app/ |-- core/ # Core components |-- [+] authentication/ |-- [+] services/ |-- [+] guards/ |-- [+] interceptors |-- [+] models/ |-- users # Users Components |-- [+] user-edit/ |-- [+] user-view/ |-- [+] user-list/ ├── user....

在建置 angular 專案時，一開始就先設定好些方便開發的小技巧， 對之後的開發體驗可以省下不少工時。 自訂 Typescript 匯入路徑 (import paths) 編輯 tsconfig.json 檔案，在 compilerOptions 新增 paths 並在這裡設定 import path 的自動匯入路徑，這麼做可以讓路徑長度變短一點. { "compilerOptions": { "paths":{ "@core-models/*":["app/core/models/*"], "@core-services/*":["app/core/services/*"], "@core-guards/*":["app/core/guards/*"], "@public/*":["app/public/*"], "@pages/*":["app/pages/*"], "@app/*":["app/*"], }, 設定完之後，在撰寫程式碼時即可使用自訂命名來取代原有的絕對路徑. import { UserService } from '@core-services/user.service'; import { UserProfile } from '@core-models/users.model'; @Component({ selector: 'app-account', templateUrl: './account.component.html', styleUrls: ['./account.component.css'] }) export class AccountComponent implements OnInit, OnDestroy { } Routing 不可以把 default route 定義為 lazy-loading，在這裡可以用 ngx-quicklink 只要將 router prefetch strategy 設定好，就會預先自動讀取雨下載 view 中 routerLink 所指定的 lazy loading route，加快載入速度！大幅增加操作體驗！

changelog 講的是可描述一份產品/專案/事件/公司的演進，其重要性不言可喻，雖然有一些基礎標準/組織在討論類似的事， 例如 Conventional-Commits， 但是目前看到的形式不是整合在開發工具(Plugin)，就是獨立一份changelog.md(文字檔)，其開放性的風格又很難遵守， 也就是說這一份資訊不同公司的產出差異非常大，再加上通常只會附屬在某一個軟體工具的子功能(陽春)。 產品沿革，更因產品經理/開發人員/行銷人員的撰寫風格因人而異，因此想有一個簡單介面的 changelog 發佈工具可以幫助這樣 的流程。 初步目標 遵守 Semantic Versioning v2.0.0 遵守 Conventional-Commits 1.0.0 操作介面可拖拉 可替版本標籤化 (tag) 可排序 (sort) 可篩選 (filter) 可使用者訂閱 (subscription) 可轉成 PDF 下載 (saved as PDF) 開發環境 Angular NodeJS Cloud function 服務命名 在把一番想法跟 Ellington Su 討論後，把此服務命名為 changela 其他 寫 changela 還有一個原因，就是實際使用新版 angular，用一個明確題目來練習會比較實際