Jonny Huang 的學習筆記

Angular、Flutter

0%

更新於 分類於

Material Design for Angular

在 Angular 模組 最後我們只加了幾行 CSS 樣式，由一開始練習至此感覺起來這種網頁效果十幾年前用記事本就可以做到了，那花時間學這個幹嘛？我們過去會的技術能不能繼續沿用下來？首當其衝的就是 jQuery for Angular 的問題。

閱讀全文 »

更新於 分類於

模組 (NgModule)

過去我們將所有實作的 元件(Component) 都塞到 AppModule 內，但是實務上的專案可能會有幾十個甚至上百個元件，如果全部都放置在 AppModule 內，會造成專案難以維護也難以分工的問題，所以比較合理的做法就是將元件分拆到不同的 模組(NgModule) 內，再將模組聚合起來。

閱讀全文 »

更新於 分類於

導航 (Navigation)

在 Angular 路由器 我們學會透過改變導覽路徑來切換內容，但是一般使用者不會透過修改網址來切換功能，正常情況下應該透過點選操作來切換內容。

閱讀全文 »

更新於 分類於

路由 (Routing)

在 Angular 元件 最後面我們練習了直接透過 tag 來嵌入 Component，但是這只是在頁面一開始呈現的效果，而正常情況下還需要依照使用者的操作適當的改變內容，例如切換不同功能時需要整個頁面替換掉，做查詢時可能要在介面上的某個區塊將結果顯示出來。
Angular 提供了一個路由機制，讓我們可以很方便的抽部分換區塊，說是部分換區塊是因為正常情況下，Angular 的根元件(起始模組內所指定的起始元件)在一開始載入後便無法被抽換掉，我們只能替換根元件內的內容。

閱讀全文 »

更新於 分類於

運作流程

從 .angular-cli.json檔內可以看到 index 屬性設定為 index.html，此為起始頁面，同時也是唯一頁面，因為 Angular 就是一個 SAP(Single Page Application)網站，所有頁面的切換與介面內容的改變都是透過 JavaScript 做即時的動態切換，另一個 main 屬性則設定 main.ts 為 JavaScript 起始的執行檔。
img

ts 檔為 TypeScript 程式語言的編輯檔，編譯後會轉換成標準的 JavaScript 並產生對應的 js 檔，其屬於 JavaScript 的超集合，也就是說在 ts 檔內也可以直接撰寫 JavaScript，最大的差別在於 TypeScript 多了型別的宣告與判斷，也因此讓我們可以在開發時期就能避免型別誤判造成的bug。
若不習慣使用的人可以將所有變數宣告成 any，然後以習慣的 JavaScript 來撰寫，只是這樣就失去了 TypeScript 最強大的功能-型別檢查。

閱讀全文 »

更新於 分類於

建立專案

透過 Angular-CLI 指令 ng new [name] 來建立新專案，例如建立一個first-app專案，透過
ng new first-app --routing --style scss

筆者使用 cmder 替代命令提示字元，指令會在獨立的一行，會比較容易觀看。

img
--routing：參數表示同步建立路由模組，後續再另行說明。
--style scss：預設樣式是採用css格式，此處改為scss。

我們可以透過 ng --help 指令查詢 Angular-CLI 提供的功能及相關參數。
ng new [name] 相關參數也可參考 GitHub。

閱讀全文 »