快訊!我的新書登上天瓏網路書店11月份暢銷榜第一名啦!看過的都說讚!歡迎大家前往訂購!
>>>> AI 職場超神助手:ChatGPT 與生成式 AI 一鍵搞定工作難題 <<<<

用30天深入Angular 5的世界

  • ,

    [技術支援-8] 產品發佈設定

    將產品發佈到正式環境 最簡單的方法是 將所有dist/資料夾底下的文件複製一份到伺服器上 如果想順帶設置base href至<base href=”/my/app/”>,則可加下面參數 若有使用Router功能,將所有找不到的頁面都導向index.html(下面會有詳細介紹) 優化我們的Angular專案 加上–prod參數,會能輸出優化過的檔案 這個參數會為我們的專案做這些事情 改使用AOT編譯:預先編譯而不是用JIT的方式 開啟production mode: 可以讓網站執行更快,等同於下這個參數–environment=prod Bundling: 將所有的所使用的library和許多應用綁在一起 縮小檔案:刪除多餘的空白,註釋和可選的令牌。 Uglification:將變數名稱做混淆的動作。 消除死代碼:刪除未引用的模塊和很多未使用的代碼 添加–build-optimizer可進一步減少檔案的大小 如果要使用惰性加載去載入部份的JS檔案,記得不要在需要被首先加載的模組裡面import要被惰性加載的元件,否則會在一開始就被載入。 AOT預設在編譯時會對ngModules做識別並且做惰性加載的設定。 善用bundles工具 source-map-explorer是一個很棒的bundles工具。可以將許多的js綑綁在一起。 首先先安裝…

  • ,

    [技術支援-7] TypeScript設定

    TypeScript配置 TypeScript是Angular應用開發中使用的主語言。瀏覽器不能直接執行TypeScript,得先用tsc編譯器轉譯(transpile)成JavaScript,而且編譯器需要進行一些配置。而配置的檔案名稱就是tsconfig.json 這邊是官方關於此配置文件的詳細說明:tsconfig.json tsconfig.json 下面為一個tsconfig.json的範例 關於設定檔裡的noImplicitAny意思是是否不允許typescript編譯時隱性將沒有設定類型的變數設定為any。如果設定為true的話,如果typescript裡面有沒有設定類型的變數則會產生錯誤訊息。當這個值設定為true時,記得要將suppressImplicitAnyIndexErrors也設定為true,不然會發生隱式報錯。 lib.d.ts 文件 TypeScript有一個特殊的聲明文件lib.d.ts。包含了JavaScript運行庫和DOM的各種常用Javascript環境聲明。 基於–target,TypeScript添加額外的環境聲明,例如如果目標為es6時將添加Promise。

  • ,

    [技術支援-6] NPM設定

    安裝NPM環境 Angular應用程序以及Angular本身都依賴於很多第三方包(包括Angular自己)提供的特性和功能。這些包由Node包管理器( npm )負責安裝和維護。 因此Node.js和npm是做Angular開發的基礎。 這邊是Node.js下載連結:Downloads NPM 如果在電腦中需要同時運行多個不同版本的npm,可以使用nvm來管理他們:nvm package.json設定 這邊有詳細的說明文檔:Specifics of npm’s package.json handling 下面是一個預設CLI設定檔的範例 這邊說明幾個比較重要的設定值: script: 是一個script commands的列表,這些script commands會在生命週期中的不同時間運行。其內容的key是生命週期事件,value是要執行的命令。可獲得的生命周期列表:請見此 dependencies: 要運行這個應用程式必要一定要安裝的package devDependencies: 只有在開發時需要用到的功能則寫在這邊,當別人要導入我們所開發的專案時,不用一定要下載完整的devDependencies內容。 在dependencies需載入的Angular…

  • ,

    [技術支援-5] 佈署方式JIT及AOT介紹

    Ahead-of-Time (AOT)編譯 在Angular 2 中有兩種編譯模式: JIT(Just-in-Time):Angular預設是使用 Just-in-Time (JIT) 即時編譯,等瀏覽器下載完 *.js 檔案後,會在用戶端的瀏覽器編譯 Angular 的 JS 程式碼,接著才會渲染畫面。 AOT(Ahead-of-Time):在程式發佈之前就透過 Angular Compiler 進行編譯,所以瀏覽器下載完的 *.js 檔案,就可以直接被執行,然後渲染畫面。 下表為這兩種佈署方式的簡單比較表: Characteristic JiT AoT…

  • ,

    [技術支援-4] Angular Universal

    什麼是Angular Universal 下面是一段截錄於https://itw01.com/G3MBE3P.html對Angular Universal目的的說明 雖然Angular是一種構建Web應用的強大方式,但是長期以來,開發人員都知道它在SEO和可訪問性方面的限制。當然,Google的爬蟲能夠執行JavaScript,但是它並不是唯一的爬蟲方案。例如,在將一個連結提交給Slack之後,它的爬蟲會抓取一個預覽,但是並不會執行JavaScript,所以原始的Angular HTML模板將會顯示在預覽之中。爲了消除這種現象所產生的問題,Jeff Whelpley和Patrick Stapleton開發了Angular Universal,它允許在服務端進行渲染。 從上面的文字可以了解,Angular Universal可以在server side預先對網頁模版做處理,變成一個有資料的靜態頁面。可以在使用者要求資料的當下產生靜態頁面,也可以事先產生好靜態檔案以供未來使用。 Angular Universal的主要目的有以下三個 方便網路爬蟲(SEO) 提高在手機裝置和效能較差的設備上的性能表現 快速顯示第一頁 Google,Bing,Facebook,Twitter和其他社交媒體網站都依靠網路爬蟲來為網站編索引,並在搜索內容。Angular Universal可以生成應用程序的靜態版本,無需JavaScript即可輕鬆搜索,鏈接和導航。這也使網站預覽可用,因為每個URL返回一個完全呈現的頁面。 啟用網頁抓取工具通常被稱為 搜索引擎優化(SEO)。 安裝Angular Universal所需工具 @angular/platform-server – 通用服務器端組件。…

  • ,

    [技術支援-3] Service worker離線支援

    關於Service worker Angular在第5版新推出了支援Service worker的功能,主要是可以讓Angular更能符合PWA的概念。 所謂PWA(Progressive Web App)是希望能夠讓Web application盡可能的在各種環境(網路環境、手機作業系統等)下都能順暢且不減功能性的運作。 例如要可以支援離線功能,在使用 App 收信、寫信、刪除信件等動作,都需要將結果丟回伺服器儲存,但在某些環境下並無法一直使用網路連線,因此必須使用一種機制,讓我們仍能順暢的使用這些功能,待網路正常連線,再將剛才所執行的一切動作反應回伺服器。 而Service Worker可以讓Web application做到上面這樣的事情。 使用Service worker所需環境 要使用Angular Service worker,您必須具有以下Angular和CLI版本: Angular 5.0.0或更高版本。 Angular CLI 1.6.0或更高版本。 Web…

  • ,

    [技術支援-2] 讓IDE支援Angular Language Service

    語法自動補完 自動完成可以通過在輸入時提供可能要填入的值讓我們選擇,以加速開發的速度,如下圖: 錯誤檢查 可以檢查像是模版變數是否在元件內有對應的變數供綁定 跳轉到模版變數或方法所指向的程式碼位置 單擊並按下F12進入相對應的變數位置 可使用Angular Language Service的IDE Visual Studio Code 1. 直接在VSCode的擴充功能裡下載Angular language service 2. 自行使用VSIX安裝 打開VSCode,先安裝.VSIX 下載附加元件:直接按此下載 / 原始專案位置:vscode-ng-language-service 下載之後,按下command+shift+P來打開指令列,並輸入 然後選擇剛剛所下載的檔案,Reload。 接著你的VSCode就可以支援Angular…

  • ,

    [技術支援-1] 支援多語系

    Angular i18n可做到的事 以本地格式顯示日期,數量,百分比和貨幣。 在組件模板中翻譯文字。 翻譯單數和複數 翻譯HTML屬性的替代文字 可以透過CLI來產生XLS檔案,並透過XLS檔案來設定多語系字串,接著使用下面的字串來產生網站檔案: 假如是使用JIT的方式去佈暑網站,則也要在頁面設定LOCALE_ID的值如下: 從上面的範例可以看出,Angular多語系的實作方式是讓每個語言獨立一個 index.html 版本。這樣優點是網站瀏覽較為快速,缺點則是修改時要重新REBULE的工程較大。 此連結有Angular所有支援的語系:Angular repository 在angular5的地區設定是使用BCP47,這個規格隨著時間而有些微改變如下: LOCALE NAME OLD LOCALE ID NEW LOCALE ID Indonesian in id…

  • ,

    [功能介紹-15] Router進階介紹

    設定Router Module 若我們的Router設定較為複雜時,可將Router配置為一個Router Module。 首先,設定一個路由模組app-routing.module.ts 多層的Router Module 我們在做網站時,會希望每個模組專注在自己的功能上,Router也不例外。因此像英雄列表的元件,如果希望點選列表內容,可以進入該英雄詳細資料的頁面如下: 首先,創建一個pre-routing檔案heroes.module.ts 新增一個heroes-routing.module.ts,內容如下: 將Router Module的檔案放在與其伴隨的模組在相同的文件夾中。這兩個heroes-routing.module.ts和heroes.module.ts在同一個src/app/heroes文件夾中。 考慮給每個功能模組自己的路由配置文件。當功能路線很簡單時,看起來可能會過早。但是,路線趨於變得更加複雜,模式的一致性會隨著時間的推移而得到回報。 接著在heroes.module.ts裡導入HeroRoutingModule path: ‘heroes’目前定義在兩個地方:HeroesRoutingModule和AppRoutingModule。 由功能模塊提供的route由Router合併到其導入的模塊的route中。這使您可以繼續定義功能模塊路由,而無需修改主路由配置。 如果不想設定兩次相同的資料,可以把舊的Router設定移除 這邊要注意的是模塊導入順序很重要 當所有的路由都在AppRoutingModule時,我們將通用path: ‘**’符號的設定放在路由/heroes的後面,這樣路由器才有機會匹配一個URL到/heroes路由,而不會先被AppRoutingModule的這個設定匹配走。 如果Routing在兩個不同的模組內,也是要先載入HeroesModule再載入AppRoutingModule,這樣才會使用HeroesModule裡的路由設定而不會因為在AppRoutingModule找到匹配的通用符號而顯示PageNotFoundComponent。 如果將import的順序倒過來,則會顯示PageNotFoundComponent的頁面。 在程式裡去操控路由器 使用this.router.navigate來在程式內操作路由工作…

  • ,

    [功能介紹-14] Router基礎介紹

    什麼是Routing? Routing意指路由器,也就是由一個路由器來決定現在要顯示的頁面是什麼 在套用Routing時,會有下列的實踐流程 1. 套用轉址設定(讓伺服器不去真正網址所在的位置去讀取資料,而改由Routing來決定現在要顯示什麼畫面) 2. 由url分析要顯示的狀態是什麼 3. 由狀態去獲得真正要取得那些資訊 4. 從這些資訊組成實體 5. 套用導覽動作,由這個畫面切換至另一個畫面 在Angular裡,最佳做法是將載入和設定Routing放在一個top-level的模組內,並於AppModule內來import所有的路由資訊。 按照慣例,模組AppRoutingModule和app-routing.module.ts會放在src/app裡 Angular的Routing 產生的虛擬 URL,並不是真的存在於檔案系統裡,因此需要伺服器能夠支援,否則重新整理時會出現404 not found。 設定base href Router使用history.pushState來進行導航。靠著pushState,可以讓瀏覽器網頁路徑看起來像是更換真實的網址。因此Angular APP內的網址可能與伺服器的網址無法區分。 我們需要添加元素到index.html讓pushState路由能夠生效。當引用CSS或JS檔案時應用base…


17年資歷女工程師,專精於動畫、影像辨識以及即時串流程式開發。經常組織活動,邀請優秀的女性分享她們的技術專長,並在眾多場合分享自己的技術知識,也活躍於非營利組織,辦理活動來支持特殊兒及其家庭。期待用技術改變世界。

如果你認同我或想支持我的努力,歡迎請我喝一杯咖啡!讓我更有動力分享知識!