以往在寫超連結時,都是透過a href=xxx去設定連結,在Angular的世界中有些小小的不一樣,是透過routerLink的語法進行連結,讓我們來看看吧!
Angular4-路由的功能選項設定
這篇大致上會紀錄路由可以透過哪些方式調整,目前僅記錄路由追蹤、路由策略二個,之後了解其他功能後,會再回來更新這篇。
Angular4-路由表
在上一篇介紹了路由的基本概念,在這邊就來簡單的透過路由表做些設定來玩玩看吧!
Angular4-路由初體驗
在網站中,路由扮演著非常重要的角色,從MVC需要透過路由找到Controller,再找到Action,甚至還可以在網址中加上參數,使後端可以取得相對應的參數,再來決定要呈現那些資料給前端,說路由是一個網站的靈魂也不為過。
在Angular的框架中,路由也是非常重要的一環,從執行的優先權、頁面權限的管理,再到導轉,都跟路由息息相關。
雖然對於路由理解的還不夠透徹,但仍是學習到的部分記錄下來,以後還有個可以複習的依據在XD
Angular4-服務元件
目前看起來服務元件感覺像是把函示抽成一個類共用,適合使用的時機目前還感受不出來,應該是自己太菜...總之先記錄下來再一個一個跟進吧!
Angular4-使用API
在SPA的架構中,透過API取得資料是在稀鬆平常不過的事情了,這邊會先使用檔案來做讀取,因此必須先做好設定,再來試著讀取API。
Angular4-input以及output
前方記錄了屬性繫結的方式,以及元件的建立方式,但如果元件跟元件之間要傳遞參數呢?這就需要用到input以及output了!
在用之前必須先了解,每個元件都是獨立的,而A元件的html中,呼叫B元件的這個行為
在此我把A元件視為「父元件」,把B元件視為「子元件」
父元件在建立子元件時,一併給予參數,這是input
子元件的某事件被觸發後,透過事件回傳參數,這是output
Angular4-pipe (資料過濾)
基本上pipe的用意,就是把進來的資料處理過後,再度送出
舉個例子好了
input:民國的日期
output:西元日期
Angular4-建立元件並載入到html中
1.在VS Code的快速建立方式Ctrl+~打開終端機
2.進到ng的資料夾底下
3.輸入指令:ng g c 元件名稱
Angular-結構語法
這邊要記錄的是ngIf以及ngFor、ngClass、ngStyle
ngIf:被標記的欄位,若是資料為true,則顯示,否則關閉
ngFor:依據資料跑回圈,把所有資料讀出來
以下二個個人認為只是屬性繫結的變形
ngClass:帶入Class
ngStyle:寫style