前言

各位好，
我是一個從踏入寫程式就開始在製作後台的碼農，
以前都是用 PHP 寫系統，
所以早期畫面是 PHP 加義大利麵的方式寫出來的，
後幾年前後端技術可以完全分離後，
後端都已經全 API 化，而我也開始專注在前端。

最近這兩年我都是使用Angular開發，
想把一些開發實做相關記錄起來，如果文章有誤歡迎來信告知。

內容結構

主要呈現後台常見的功能，但因為時間跟篇幅也有限，
所以會以最小功能規模的後台 Demo 做展示。

其實是模擬一個小型商店的後台，採人工key單的方式。

• 基本結構 day02 ~ day15
• 各功能模塊 day16 ~ day26
• 連線方式 day27 ~ day30

注意事項

• Demo 使用的 UI框架 會以Angular Materia為主，
  沒有使用bootstrap，因flexbox佈局就很方便了，
  本文章不會細說 css 的部分，
  但有需要請參考文章末端範例碼。

其實很多公司會有自己的設計風格，
不見得 UI框架 符合需求，有衝突還要花時間解決，
所以也是建議大家多磨練css基本功。

• Demo 不採用jqery，其實很多功能我認為 Angular 就辦得到了，
  我目前做後台還沒有遇到非要用jqery的時候。

基本結構

開發時需要建造的基底，並會逐一說明比較常見的通用功能。

• 全域css樣式
• i18n翻譯
• SharedModule應用
• 全域service應用
• 傳接值model
• AppComponent初始要做的事情

--

各功能模塊

在功能切割上的主要大結構：

• AppModule：根模塊。相關的會專注於全域的設定。

• SharedModule：共用模塊。會把重複用到的功能都放在這裡。

• CoreModule：核心模塊。比較像架，裝載後台各個功能模塊。

CoreModule
    -- IndexModule
    -- UserModule
    -- AdminModule
    -- CustomerModule
    -- ProductModule
    -- OrderModule

主要說明CoreModule底下的 六種功能模塊。

--

連線方式

目前Demo以json-server來模擬後端跟Database，
後面會說明以 firebase、gRPC Web 的方式做。

基礎知識

本系列文主要在呈現後台的相關功能跟流程思維，
所以讀者們觀看要先有某些基礎。

• 建議懂flexbox。

• 建議懂ajax，異步加載的相關知識。

• 建議懂Rxjs的Observable,Subject..等，
  (我會簡述一下我理解的過程，以及我怎麼運用的。)

• 建議有Angular基礎尤其是表單功能，網上很多教學文請各自研究。

• 建議有後端DB,CRUD,正規化等基本的概念。