Angular让前端飞程序员

[Angular Material完全攻略] Day 01 -

2018-05-21  本文已影响231人  readilen

转载
从Angular第2版正式release后，根据全球最大工程师讨论区StackOverflow的统计，从2016开始的Angular讨论度就不断窜升，甚至超越了React，直到了2017年，甚至摆脱了前一代Angularjs的阴影，跃升成为最热门的前端议题！可以见得Angular这个前端框架确实具有它值得学习的地方，而在2017年底Angular正式迈向第5版，隔天Angular Material就从breaking changes不断的beta版正式升到趋于稳定的rc版，没几个礼拜就直接正式release了！

一个是由Google推出的前端框架，一个是由Google推出的设计语言的Angular实作，两者结合想必能加乘产生N倍以上的爆发力！接下来的日子，我们将一步一步地学会所有Angular Material的元件及特性、Angular CDK及一些进阶的技巧，今天第一天就让我们以比较轻鬆的节奏来认识所有的基础知识吧！

image.png

图片来源：StackOverflow

关于Angular

Angular是由Google推出的前端框架，其热门程度在前端领域的不用多说，佔有了非常重要的一席之地，有别于著重在view上的React或Vue这类library，Angular本身就是一个完整的MVC框架！由于整合了大部分前端常用的套件，开发人员只需要著重在学习如何使用Angular这个架构即可，对于刚入门前端或是由后端转前端的人来说大幅降低了学习的曲线，如果本身已经有MVC架构的基本概念，学习上更是如虎添翼。

Angular CLI

搭配Angular CLI，开发人员能够以更简单的方式产生一个基本的专案范本，同时只要下一些简单的指令即可产生基本的程式码架构；随著Angular CLI逐渐的进步，开发的弹性也越来越高，例如@angular-devkit/schematics可以让我们在团队中建立共用的范本程式等等，让开发速度大耀进！

TypeScript

Angular主要以TypeScript作为开发语言，TypeScript是JavaScript的超集合，能让我们在开发JavaScript时能以强型别的方式撰写程式，并在转译成JavaScript时自动检查型别的错误，减少runtime时的debug成本；同时TypeScript能让我们不断享受使用最新的语法来撰写程式的快感，只需要稍作设定即可把最新的语法转为比较旧的语法，避免浏览器支援度的问题！也由于Angular开了这一枪，让各种热门的前端library/framework也陆陆续续有了TypeScript开发的版本，足见TypeScript对于前端世界的影响力也将越来越高！

基本门槛

由于本系列文章属于稍微进阶的Angular议题，因此对于Angular基础的知识将不会有太多的介绍，建议读者至少具备以下Angular基础后，在阅读本系列文章：

  1. 了解Angular的MVC架构
  2. 使用Angular CLI建立专案并开始开发
  3. 懂得如何设计并共用一个component
  4. 理解最基本的Angular相依注入的知识，并能实作一个service注入到component之中
  5. 有基本的模组化概念
  6. 能设定router完成SPA程式

就算没有以上的知识，也完全不用担心，网路上也有很多的参考资源，甚至还有中文版的文件，只要愿意花个几天时间，要对Angular有基本的认绝对不会是个问题！

当然，如果你有更多前端的相关知识如node、webpack等等，对于学习Angular或Angular Material绝对是加分的要素。

相关资源

关于Material Design

Material Design是由Google推出的设计语言，也可以把它想像成是一种设计的pattern，把视觉化设计的概念、网页元件、操作互动等等理论及实作整理出来的设计准则，从元件的配色、阴影到特效都有一定的规则可循，我们能透过这些准则设计出清楚明确且容易使用的使用者介面(UI)，打造更好的使用者经验(UX)；如果你是Google相关服务的爱用者，又对Material Design有点了解，相信你一定也有发现Google的各种服务在设计上也已经不断朝Material Design迈进了。

Material Design的实作

由于Material Design仅仅只是一种设计的准则，不像bootstrap这类css framewrok，有直接的css样式或javascript library可用，而是交由设计人员依照准则进行实作，偏偏Material Design的设计准则又非常多，一般开发人员不可能有时间依照这些准则一一设计，好在也有许依照Material Design的设计准则开发且open source的专案可用。例如Google官方推出的Material Design Lite和多平台都支援的
Material Components，或是由4个亚洲人合力开发出来的Materialize.css等等，都是目前常见的Material Desig实作版本。

当然像是React或Vue这类热门的前端框架也很容易能够找到相关的设计套件，透过这些实作套件，即使是没有美感的前端工程师也能够轻易设计出简单大方，又不失设计感的页面。

而身为爸爸同样是Google的Angular，有一套由官方推出的Material Design套件也不是件奇特的事情，也就是接下来要介绍的Angular Material。

相关资源

关于Angular Material

Angular身为Google自家推出的主力前端框架，而Material Design又是Google未来设计的主要方向，自然而然的，也免不了要替Angular量身打造一套Material Design的套件，也就是本系列的主轴－Angular Mateial。

根据Angular Material官方的说法，Angular Material的目标是使用Angular及TypeScript打造出高品质的UI元件，同时这些元件必须遵守Material Design的设计标准。

高品质的Angular Material

所谓的高品质，对于Angular Material来说包含了以下几个重点：

追求高品质的后果与成果

从上段介绍可以看到，Angular Material对于品质的要求，从程式码本身到元件实用性都完全顾虑到了，如果能够达到这样的品质，绝对可以说是目前其他任何Material Deesign套件所望成莫及的程度！也因此不难想像在beta时期，Angular Material可以说是不断的breaking change，想必就是为了能够不断的往所谓「高品质」的目标迈进，这也成了很多想要进入Angular Material世界的人裹足不前的理由；儘管骂声不断，但朝著目标迈进的Angular Material在不断进化的Angular推出第5版后，Angular Material的版本也从2.0.0-beta一下子大跃进为5.0.0-rc！同时才几个礼拜后的2017/12/06迈入正式版，在这个刚release的时候进入学习既能避免不断breaking changes的伤害，又能够 跟别人炫耀 赢在起跑点，实在是个很不错的进入时机！这也成了这次铁人赛想要以Angular Material为目标的主要原因！

系列文章规划

本系列的文章将会以Angular Material的官方文件为主要依据，一步一步带领读者们学习利用目前(5.0.0)所有的元件(共30个)来打造一个具备设计质感后台网站(dsahboard)，并完成一些简单的页面，并会进一步介绍功能强大好用的Angular CDK，时间允许的话，再介绍一些关于Angular Material的进阶技巧！初步的规划有如下3个单元：

  1. 完全掌握Angular Material(约20天)：这段时间会介绍所有的Angular Material元件，并穿插在不同功能之中，除了设计一个基本的后台架构以外，也会设计出简单的问卷表单、部落格和邮件收件夹的画面，让读者能对所有的Angular Material元件都能够有一定的掌握度，并懂得如何依照需求变化出不同的呈现方式。这个单元会切成5个子单元，分别是基础篇、Dashboard篇、问卷表单篇、部落格篇和收件夹篇。
  2. 介绍Angular CDK(约5~10天)：Angular CDK(Component Development Kit)是Angular Material在设计元件时拉出来的共用程式，用来解决许多元件设计上的问题，帮助开发人员即使不使用Material Design，也能够透过Angular CDK设计出高品质的元件或互动功能，元件开发工具(Component Development Kit)这个词实在是当之无愧！在这单元中我们会透过Angular CDK来解决一些上个单元后台网站不足的部分，让整个网站更加的丰富。
  3. 进阶的Angular Material开发技巧(约5天，状况允许的话能多写就多写)：介绍一些客製化Angular Material的方式，除了直接使用Angular Material提供的元件以外，要让网站具有Material Design的设计质感还有很多的方式，也会在这个单元一併介绍。

之后的程式码将会统一放在GitHub上，并以天为单位建立分支(day-02, day-03, ...ect)，方便大家随时切换到每一天的记录去了解程式码的变化，相信对于学习会更有帮助。

讨论是进步的起点

关于这系列的文章，是笔者个人对于Angular Material及Angular CDK研究后的整理，希望能帮助读者更容易进入Angular Material的世界，如果有任何问题，欢迎随时在留言提出讨论，彼此学习，互相成长；若发现有任何词句不顺、错别字、或是观念错误等等，也一样欢迎提出来，让整个系列文章的完整度更高！帮助更多人进入这个美妙的世界！！

本日小结

今天的文章目标主要是让大家对于Angular、Material Design及Angular Material有个初步的理解，Material Design本身是个非常棒的设计概念，以笔者有限的能力可能无法很完成的将精髓传达给每个人，建议大家有空可以直接多去看看Material Design的设计风格，时间允许的话也可以大致浏览一下Material Design的设计准则，对于之后学习Angular Material开发时会更加的有感觉！

明天开始就让我们前往高质感的前端设计之路迈进吧！！

上一篇 下一篇

猜你喜欢

热点阅读