第262期 / August 5, 2019 |
       以Visual Studio 2017開發Angular Web Application研究作者/蕭凱文 [發表日期：2019/8/5] 作者簡歷 畢業於中山大學資訊管理所，目前服務於凌群電腦醫療資訊系統研發處。主要專長為VB、SQL，參與過高雄市立聯合醫院與部立醫院的HIS系統開發導入案，以及衛服部的藥酒癮戒治個案管理系統的建置案。 前言 在資訊科技發達的時代，網路已經成為了人們的生活必需品，人們透過網路取得他們所需的資訊。而隨著網頁開發的需求不斷增加，網頁的應用程式需要做到跨平台、跨瀏覽器運作，甚至要做到響應式設計。工程師面對的挑戰也變得更加複雜。 為了因應前端開發的各種需求，這幾年前端技術不斷地在演進，目前最熱門的就屬 Angular與React，本篇將會在下文將兩者做一個簡單的比較。而Angular的開發在目前有很多的文獻或操作手冊都是以Angular CLI 搭配VSCode做為開發的環境，本篇將會以Visual Studio 2017取代VSCode作為開發程式碼的編輯器，告知讀者如何在Visual Studio 2017架設Angular開發專案。 Angular是什麼 Angular是由 Google 所開發的前端 JavaScript 框架，可以建立聲明式模板 (Declarative templates) 與實現資料繫結 (data-binding) ，讓開發者能夠將介面的運作邏輯寫入HTML，控制介面的運作方式。Angular 提供一整套完整的專案環境與工具，讓開發者能快速上手，也可以實現 Single Page Application。2014 Google推出Angular 2，針對網頁元件模組化加強處理，並提升效能。它是以 AngularJS (第二版以前叫做AngularJS，經過大改版之後改名為Angular) 為基礎，使用 Typescript 重寫。與以前的版本相比，它沒有scope或controllers 的概念。相反，它使用組件層次結構化作為其主要架構概念。支持動態加載，改進了依賴注入，並提供更為簡單的路由和異步模板編譯機制。 React是什麼 React是Facebook開發的Javascript 程式庫，使用 JSX建立 HTML 模板，強調模組化、並將網頁劃分為各個獨立的區塊，並實現資料繫結。不過React不提供所有架構專案需要的工具，必須使用第三方套件才能建立完整功能的網頁。React能夠讓開發者能更有彈性且自由地選擇自己想要的套件，依照不同需求打造合適的專案環境。 Angular的好處 Angular是框架，React是程式庫。框架能夠比程式庫提供更加完整的功能與環境， Biznas1(2016) 在為何選擇 Angular 2 作為開發企業用軟體時有提到，若選擇React，開發人員還必須自行決定routing、moodel management等要使用哪些第三方套件來時做。但如果選擇 Angular 框架，就只需要照著 Angular 的規範就能夠架起一個專案。Angular提供這種強制一致性的環境與規則幫助開發人員能夠更快適應開發環境與模式。用白話文來說， Angular 與React的選擇就像是在選擇直接買成品家具還是買木頭零件回家自己組裝是一樣。」 React的好處 Angular是把Javascript邏輯放到HTML裡，而 React 則是把HTML 的模板放到Javascript 裡面。這使得兩種語言從最根本的寫作方式和邏輯上便有極大差異。React使用較純粹的 Javascript 來開發網站，而Angular 則是需要使用許多自創的功能性屬性，像是ng-repeat、ng-if 來撰寫。Cory House(2016) 的文章認為，很多應用不會用到 Angular 這種大型框架提供所有功能，現在時代越來越走向微服務、微應用、模組化的時代，React 能自由地給予開發者挑選模組，讓他們在開發應用程式上有更大的空間。 Angular與React綜合比較結論 React 的模組化精神改變了舊有網頁開發的思維，符合未來開發軟體應用的發展方向。它雖然需要依賴相關套件來架構完整的專案，但帶來的是有高度自由化空間的開發環境，不過專案間的差異性也可能較大，在未來多個專案整合上可能較為困難；Angular則是相對穩定，並提供給企業軟體更可靠、更容易開發與維護的選擇。Angular的專案擁有共通語言較多，對於開發者來說較容易進行後續的開發維護、且有未來整合多個產品專案的可能性也較高，它比較像是一個完整的平台，從開發到測試它都一手包辦，擁有豐富的生態系。但是Angular一開始的學習曲線較高，畢竟開發方式跟傳統的有些落差。對於一般習慣傳統開發方式或是剛踏入前端程式開發領域的人來說是滿辛苦的。 總而言之，要選擇哪個技術基本上還是取決於專案的性質及用途。若是開發新創應用程式，則可以考慮React架構來客製化產品；若是需要開發穩定性、整合性高的企業用軟體，則可以選擇Angular作為程式開發的架構。 以Visual Studio 2017建置Angular開發環境 一、前置環境
二、建置專案
 《圖四》  《圖五》 啟動Angular網站 在專案ClientApp目錄下，開Cmd並輸入ng serve，若執行結果出現下列字串，則表示正常運作中 ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **。確定沒問題之後，直接在Visual Studio 2017運行結果與偵錯，如圖六所示。正確的執行畫面如圖七所示。  《圖六》  《圖七》 結論 本文期望透過說明以Visual Studio 2017建置Angular 專案，讓開發人員多了一個開發環境的選擇。Angular其實在Angular 1的時候，由於誕生的時間很早，當時的開發環境不夠完善，連模組化的機制都得靠開發者自己去實現，故當時的普及度不高，甚至輸給了後來才出現的React。但Angular 2就不同，它成功整合了現代前端的各種先進理念，在框架、文檔、工具等各個層面都提供了完整的支持，在Angular官方網站https://material.angular.io/，都有非常完善的教學流程。以及現在Google在背後大力的推動與支持，並與微軟合作，將TypeScript取代AtScript成為Angular主要開發語言，TypeScript目前已經相當完備，但應用程度仍然不是很高。但Angular 2未來將可能是TypeScript的一個殺手級應用，將TypeScript推展出去。總體來說，Angular未來的發展性是非常高的。 參考文獻 https://ithelp.ithome.com.tw/articles/10203185 https://kknews.cc/tech/bxb89n.html https://zh.wikipedia.org/wiki/Angular https://material.angular.io/ https://docs.microsoft.com/zh-tw/aspnet/core/client-side/spa/angular?view=aspnetcore-2.2&tabs=visual-studio https://www.gss.com.tw/eis/161-eis85/1669-eis85-8 https://buzzorange.com/techorange/2017/07/31/all-about-javascript-framework/ https://www.infoq.cn/article/why-choose-angular2/
|
|
凌群電子報/一九八四年五月二十日創刊 |