- 2023-0521 firebase api key rule
- 2021-1012 color sinper
- 2021-0614 reduced site bounce rate
- 2021-0530 GSAP landing page
- 2021-0427 photo gallery
- 2021-0224 此處改為紀錄大章節，細節內容直接註解紀錄於程式碼內，從無到有的後台專案
- 2021-0223 error handler
- 2021-0215 file architecture / base config / shard module
其餘 > 多為設定檔，需要時才修改。
src > : 主要 AG app 檔案，包含測試、SPA 唯一那頁、etc...
src > assets : 放置靜態檔案 e.g. 別人的 lib、圖片、etc...
src > env... : 環境變數，供給設定檔之類的使用。
src > app : 程序都在這裡面，首先看到的是 app 開頭的檔案，這些是這個 app 的根元件、根模組、根路由。
src > app > components > : 整個 app 可能會共用的原件、範例都放置於此，而個別系統會用到的元件則放置在個別資料夾內層。
src > app > shared > : 整個 app 可能會共用的函式或引用的庫資源，都會放置於此方便共用，這裡比較特殊需要中階 angular 懂 service、pipe、etc... 才知道怎麼用。
src > app > pages > : 個別元件皆以系統或頁面分類，所有的更改多發生在此資料夾內。
Angular Firebase 入門與實做 => 結合 firebase
Angular 深入淺出三十天 => 基礎有實作可參考
Angular Material完全攻略 => 別人做的元件應用
Angular 大師之路 => 更細節的內容
打通 RxJS 任督二脈 => 更更細節的內容
高效 Coding 術：Angular Schematics 實戰三十天 => 更更更細節的內容
material.io => 參考
- 說明：有 ctrl 為快捷鍵 / 無則是指令
ctrl + ~ 開啟終端機
ctrl + c 終止程序
cls 清除屏幕上的所有显示
cd 位址 移動終端機至該位址執行
開發環境安裝 待補 Dock 方式搞定開發環境
安裝 nvm for windows 或用其他方法安裝
nvm 查詢 nvm 版本與相關指令
nvm ls-remote 察看可用的 node 版本
1.1.7 window nvm 版本沒提供這個指令，所以需要到官網去找最新的 lts (Long-term support) 版本...
nvm install 版本號 安裝指定版本的 nodejs
nvm ls 查詢當前安裝了哪些 nodejs 版本
nvm use 版本號 使用該 nodejs 版本
node -v 查詢當前使用的 nodejs 版本
npm install npm -g 更新 npm
-
安裝 Will 保哥的 VSCode AG 延伸模組，開發上會比較舒服， 安裝保哥套件後不一定要用 cli 指令，也可以右鍵新增 Component
-
npm install -g @angular/cli安裝全域 AG cli -
ng new 專案名稱 --routing新增一個包含前端 router 的專案 -
新增
.gitignore排除不需要版控的檔案 搜尋angular gitignore -
待補 eslint github 星星比較多但改過去太麻煩了，日後再研究一下差異
-
參考 PrimeNG 專案的架構與 TrilonIO ，開資料夾備用
-
前端 Router 設定，參考 AG 深入淺出，感覺這蠻好的，最後還拿六腳電商網來用 AG 套版，感覺可以給劉愷熟悉下。
設定半天想把 Components 統一到 Module 再匯入到 Router 內使用，但好像不能這樣用似乎是要用 RouterChird 來管控，
-
新增登入頁與儀表板 Component，命名規則參考
-
Auth 新增完後，先接續 firebase 套件，設定部分就不詳紀錄了，需要回看在參考Firebase Side Project
-
npm i -g npm-check-updates這個套件不太確定需不需要，先記錄著 -
將 firebase config 加到 environment 變數中
-
npm i @angular/fire安裝 firebase AG2 套件 -
開發測試需求先記錄改為全部權限
{
"rules": {
".read": "true",
".write": "auth != null"
}
}-
firebase module 跟 真正使用要 import 的類別是不同的
-
tsconfig.json 加入 BasePath ts compiler build 會更方便，但此處不想太複雜不取用
-
建立 firebasehelper 共用 Service 涉及到一些 rxjs
-
npm install angular2-prettyjson利用 angular2-prettyjson 讓 json 在畫面上更值觀 -
接著搞 fire auth / sign in / router etc...
-
完成 UserInfoLog 寫入成功
-
npm i -g angular-cli-ghpages成功 repo 到 github page，build 完，執行此套件指令，檔案放到另外一個專案 push 就好 -
包版指令
npx ngh --dir=dist/PROJECT_NAME --no-silent後來發現是 root 沒設好，還是刪除套件 -
angular 偵測按鈕，登入 enter
-
完成 UserInfoLog 顯示
-
SignOut
-
公司使用開源專案 ... 感覺超好用，但感覺會變成學到的東西變少，等熟一點在把後台搬過去。 ngx-admin / ngrx
-
20210314 - RWD & GTD 大致上完成
-
富文本改為元件 editor.md 本來打算用 ck 編輯器的 ｍｋ 套件，但太難搞了後續再弄，先繼續弄這個後來找到的
-
手動串接套件坑太多了，後續引用的這個 efitor.md 首先是資源引入上的問題就卡了三天，後來搞定後又被渲染生命週期與 mat tab 衝到 ... 只好用手刻 tab 的方案，留下失敗的程式碼後續追蹤
-
新增文章，參考1、參考2、參考3更改了 firebase 權限，雖然格式跟 Task 類似但分開路徑，Task 只有擁有帳號才可以 read、write，而文章則任何人都可以 read，遇到權限錯誤看半天，結果是設定完要重登...
-
npm install --save @angular/material @angular/cdk在此目錄安裝 AG material -
npm install --save @angular/animations安裝 Angular Material 動畫套件 ( 需要 import ) -
npm install --save web-animations-js支援其他瀏覽器的轉譯套件src/pollyills.ts 取消 import 'web-animations-js' 註解
-
建立 Material 的 SharedModule 方便取用 Component
-
npm install --save hammerjs安裝手勢支援套件 -
index.html 增加 Material Icons
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
This project was generated with Angular CLI version 11.2.0.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.