[Day23] Angular 简介

呼~~终於写完所有躲在浏览器後面的东西了，现在我们已经架好了主机、布好了 API 程序、装好了 MySQL，就只差前端页面了。从今天开始，我们就要开始一步一步做出我们的前端 APP。

前端程序必备技能

写前端程序必须得要对以下几个语言有基本的掌握度

• HTML – 网页前端的骨架，勾勒出页面的基本架构。
• JavaScript – 网页的脑袋，动态的改变 HTML 内容，并能用程序脚本让网页跟使用者可以互动。
• CSS – 网页的衣服，改变 HTML 外表，让我们丑丑的原始页面变漂亮。

如果读者对於这三个必备技能还不熟悉，笔者非常推荐 W3Schools 的教学，里头的教材设计得非常好，即使是张白纸，只要从头到尾一步一步跟着读懂、做完，就能对这三个既能有一定程度的掌握。

前端三本柱 – VAR

有别於後端有非常多种语言、框架可以选，前端的世界已经被 JavaScript 统一了，除了一些非常阳春的纯 HTML 静态网页，几乎没有一个网页不用 JavaScript。就像之前所说的，实际工作之後我们几乎不会再自干 library，而是会用框架跟套件，前端当然也是，而前端现在有三个主流框架：Vue, Angular, React。以下简略说明三个框架的差别，

• Vue – 相对轻巧的框架，较容易入门，中文社群活跃，最近开始有些功能有向 Angular 致敬
• Angular – 最重量级的框架，Google 的亲儿子。内建的功能包山包海，想得到的想不到的都有内建支援。但是学习门槛高，需要额外学习 TypeScript。职缺数相较其他两个框架要少，但是大型网站喜欢用。
• React – 对 DOM 的支援度高，写出来的 APP 效能好。根据笔者前同事表示，写起来很自由、开发效率高、感觉像在飞XD

（图片取自三大框架的 Wiki 页面）

笔者自己只有用过 Angular，所以关於这三个框架的比较，笔者是根据跟前同事们聊天得来的主观意见，不代表客观事实。三大框架的优劣比较一直以来都是网路上的热门话题，邦友们如果有兴趣看看比较，随便搜寻一下都有优质的比较文章。

框架的选择与 Day21 的 ORM 选择一样，基本上看团队还有信仰。任一个框架能做的事，其他框架也都做得到。笔者当时因为信仰 Google，加上爬文人家说会後端学 Angular 容易上手，於是就选择入坑了。笔者的前端技能是自己做菜的一部份，系列文中如果出现错误还请大家不吝指教。

Angular 简介

笔者认为，介绍 Angular 就必须从 Angular 不是 AngularJS 开始！
Angular 不是 AngularJS！
Angular 不是 AngularJS！
Angular 不是 AngularJS！
很重要所以要说三次！

笔者没有写过 AngularJS，但是认识的写过 AngularJS 的同事没有一个不酸 AngularJS 的，所以即便没写过，也不难想像，AngularJS 以前是如何被 React 按在地上磨擦。2016 年 AngularJS 的团队把 Angular 整个砍掉重练，现在已经是一个成熟又好用的框架，但是没有接触 Angular 生态的人，还有很多停留在「Angular(JS) 很烂，最好学 React 或 Vue」的想法，资讯完全没有更新。

Angular 每半年更新一次主版号，现在已经到了 Angular 12，内容的迭代改进非常之快，整个框架越来越进步、越来越强大。Angular 身为三大框架中最肥大的一个，有以下几个优点：

• 完整的架构 – Angular 的架构定义严谨且设计完善，只要乱写就编译不过，只要过得了编译软件架构就不会太差，这对於大型网站的开发非常有帮助，有严谨的规定就能减少人员素质不一而造成最後专案难以维护。

  不过，像是笔者前一份工作，某外国主管坚持用 jQuery 的思维硬干写 "Anygular" 又是另一回事了（苦笑）

• 强大的内建功能 – Angular 内建许多好用、强大的功能，例如路由（routing）、依赖注入（dependency injection）、响应式表单（reactive form）等等，当然也少不了 HttpClient 这类必备的基本功能。
• 妥善的模组化 – 模组（module）与元件（component）的机制，让我们可以妥善的解藕我们的程序，搭配 DI 注入让我们程序好开发又好维护
• 使用 TypeScript – Angular 使用强型别的 JavaScript: TypeScript 开发，有效发挥强型别语言的好处，让我们在开发时期就能发现多数的错误，提高开发效率还能减少 bug

  虽然有些大神认为合格的工程师不应该依赖强型别来帮自己侦错，应该要做什麽事情都在自己掌握之中，不应该牺牲 JavaScript 的自由变成强型别，但笔者认为，除了整个团队全部都是神，不然以凡人的世界来讲，TypeScript 牺牲自由带来的好处绝对利大於弊。

当然， Angular 也有他的缺点，首先就是入门门槛相对高一些，像是他的架构因为职责拆分得很细而且横跨很多档案，没有 K 文件或者有人带，自己光看程序码要搞懂真的有一点难度。其他像是框架太大，写个小网页就像用牛刀在杀鸡等等。但不管怎样，做为一个不断进步的主流框架，笔者觉得 Angular 还是非常值得学习。本系列的最後几篇，就要来介绍如何用牛刀来杀鸡，用 Angular 做一个简单的前端 APP，我们明天见！