喜歡烏龜的宅宅工程師

介紹完服務元件的測試後，接著要學習如何測試一個單純的元件。

測試對於一個公司的專案有多重要自然不言而喻，如何在 Angular 中進行測試呢？讓我們一起學習吧。

延續上一篇的情境，現在有了前台與後台的區分。但實務上後台是不允許未經認證的人隨意進入瀏覽的，通常會搭配一個登入介面，而光靠登入介面還不夠，因為使用者很可能會藉由直接輸入網址的方式瀏覽後台頁面，這時候就需要依賴路由守衛 (Route Guards) 了 。

還記得那個下定決心的夜晚是 2018 年的 6 月 11 日，那個時候的我仍任職於鄉下某間負責主修電腦、偶爾打雜，職稱卻掛 MIS 的公司。距今也已經差不多快要一年了，換句話說我花了一年的時間努力，才終於跨過轉職的門檻，得以成為 Junior 前端工程師。

在上一篇的實作中，我們完成了一個最基礎的 Angular Router ，而本文將修改需求，將其擴充並實作出一個具有子路由功能的範例。

今天是進入公司的第三天，為了能盡快投入專案與成為團隊可用的戰力，我正在努力啃官方文件學習 Angular 的知識，所以這一篇文章主要是記錄我如何閱讀官方文件後，實作這個非常基本的、帶導航的網頁應用。

在公司的專案中若有部分是屬於較早之前的專案，很可能在使用 npm install 或 yarn 指令時跳出因版本過高而無法順利下載專案相依套件，此時就只能考慮將目前的 node 版本降下來，或者透過 nvm 切換 node 版本了。

不知不覺也到了 No.37 了，最後還想要再介紹一個名為 Async 的管道元件，說到管道元件一定不陌生，因為先前就介紹蠻多常用的管道元件。

用得好好的為啥要重構呢？原因是目前這個 DataService 並沒有寫得很漂亮，原因是通常不會直接在服務元件內直接做 .subscribe() 的動作，大部分的情況都是在其他元件內進行。畢竟什麼時候要訂閱是各個元件自己才知道，服務元件單純的提供服務就好。

之前介紹服務元件的時候就已經看過 @Injectable() 但那個時候並沒有詳加著墨介紹，究竟 @Injectable() 是什麼意思呢？