终於进入到Angular环节了，
个人学习过程中主要以保哥的Angular教学为主。

Angular 简介

Angular是基於TypeScript的网页应用框架，主要由Google团队把拔维护的跨平台程序语言，
除了可做网页之外，搭配Electron框架可做出桌面型应用程序。

Angular是纯前端的程序，仅会有html、CSS、JS、图档等静态档案，
不会有任何後端的程序，顶多是接後端API的资料来进行页面呈现。

Angular中文意思是 多角形的、棱角分明的，有让网页各元件彼此分工、各司其职的味道在。
透过Angular，我们能快速将网页的每个区块拆分成各个部件，
藉由元件化的开发模式(如:模组包含模组、元件中包含子元件)来进行网页设计与开发，
好处是不会经由程序码直接对DOM进行操作 (像JS、JQuery会频繁的透过querySelector等方式来指定DOM元素)，
省掉这个步骤可让工程师专注於处理页面呈现及撰写商务逻辑。

缺点是一开始学习的难度非常高，学习曲线陡峭的令人想放弃。

Angular具有程序码预先产生机制(Angular Universal)，可将HTML预先产生好、将静态HTML传送给client浏览器呈现後再启动Angular应用程序。透过router机制达到延迟载入功能，在开发SPA单页应用网站时非常方便。

除了JavaScript之外，也可用Dart程序语言来开发Angular。

另外，在JS中的所有语法通通都是TS有效语法，
用TS写好的程序码，经由TypeScript编译器(WebPack)，在编译时可以选择JS版本 如:ES3、ES5、ES2015(支援class的版本)等，能编译出各种版本的JS程序码在浏览器上执行，

意即TypeScript写好後，经过编译後能产出支援任意版本的JavaScript程序码

TypeSrcipt 是什麽

一言以蔽之，TypeScript就是有型别的JavaScript。

可以到TS Playground来玩看看TypeScript。

AngularJS vs Angular 两者何异

Angular刚推出时(2010年)第一版(v1)因为草创，有许多用法过於艰涩、或者说不够好用，
於是在第二版(v2)进行大改版，一些用法不互相兼容，
因为版本差异过大，为了区分两者，把第一版称为AngularJS
第二版之後(2016年)的所有版本则称为Angular、或者Angular 2+

在2.0之後或更高的版本，彼此架构就差异不大、兼容性好很多，於是就没有新的名字。

安装环境 (Win10)

安装 Chocolatey

打开PowerShell(以管理员身分安装)，安装chocolatey管理系统

> Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

安装 Node.js

安装Node.js(以管理员身分安装)、以及Git

> choco install -y nodejs git

之前电脑有安装过chocolatey，但似乎未成功安装

解决办法是先删除 C:\ProgramData\chocolatey 资料夹，再重新执行一次安装。

透过choco套件管理系统安装的程序，路径通常都会在C:\ProgramData\chocolatey\lib底下。

安装环境 (MacOS)

安装 Homebrew

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装 Node.js

$ brew update
$ brew install node

安装好Node.js後，
就会有npm这套软件套件管理系统
要先重新开启powershell，再透过npm来下载Angular Cli

安装 Angular Cli

下载最新版本Angular Cli

> npm i -g @angular/cli

若要指定版本，可再後面加上@版本号

如:

> npm i -g @angular/cli@9
> npm i -g @angular/[email protected]

确认Angular版本，如果能成功执行ng指令代表Angular Cil成功安装。

> ng --version
或者
> ng v

若要移除angular

> npm uninstall -g @angular/cli
> npm cache clean --force
> npm cache verify

建立Angular专案

透过ng来新增专案

> ng new ng-test

这一步骤会问要不要新增routing、以及样式的格式

第一次建立专案有可能会跑比较久。
在Windows作业系统上，完成之後会出现一大堆的CRLF提示

接着进到专案底下

> cd ng-test

执行专案

> npm start

或

> ng serve

若在Windows平台上使用ng serve遇到set-executionpolicy : 拒绝存取登录机码 'HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\PowerShell\1\ShellIds\Microsoft.PowerShell'。等类似问题

可先执行 Set-ExecutionPolicy remotesigned -Scope CurrentUser 来放宽安全性的限制。

(npm start的指令参数在 package.json)

执行完後透过浏览器开启 http://localhost:4200/
有出现以下画面代表专案成功执行

Angular 目录架构

我们进刚产好的Angular专案资料夹底下瞧瞧。

夭寿，才刚开始就冒出这麽多的档案?!

根目录底下档案
package.json 给npm看的，用来安装、管理模组
angular.json Angular Cli的设定档
.editorconfig 给编辑器看的，如何处理编码、缩排字元、断行等
.gitignore 给git看的，可设定不被git纪录的档案
karma Karma单元测试工具
tsconfig.json 存放TypeSrcipt相关设定 ES版本
tsconfig.app.json 针对app资料夹内的TS做出额外的定义
tsconfig.spec.json 写单元测试TS时用到的设定档
tslint tslint检查程序码品质的规则

资料夹

• node_modules 透过npm安装好的所有套件
• e2e end-to-end 点对点测试工具
  • protractor 则是测试的设定档
  • app.po.ts 由TS写成的测试程序
• src Angular应用程序专案主要原始码:
  • index.html 网站首页
  • favicon.ico 网站图示
  • style.css global style 样式
  • main.ts js主程序进入点，会去启动 app/app.module (里面又会启动AppComponent)
  • polyfills.ts 调整支援旧浏览器版本时的设定档
  • test.ts 写单元测试，会被 karma.conf.js 档案载入
  • typings.d.ts 定义额外的TS型别定义，例如整合JQuery到网站中
  • app 资料夹 应用程序主档案
    • spec.ts 单元测试定义档
  • assets 资料夹 存放所有静态档案。通常存放额外或共用的CSS、JS、JQuery、图片等
    • .gitkeep 给git看的，纯粹给assets资料夹进入版控用(资料夹底下若为空则不会进入git版控)
  • environments 资料夹 存放用到的环境变数，透过TS定义环境变数
    • environment.ts 开发时期用的
    • environment.prod.ts 当只有在build production版Angular才会用到

Angular 应用程序发行部署

> ng build

建置过程中呼叫webpack，将ts编译、打包成数个JS档案，
build完之後会产出dist资料夹，
直接将整包dist资料夹复制到服务器底下即可直接执行。
(只会按照angular.json底下的asset配置建置档案)

> ng build --prod

压缩档案让JS更小
(从约15MB降到1.42MB)

常用指令一览

Node.JS npm 指令

启动服务

> npm start

更新套件

> npm update

列出套件版本

> npm list -g

> npm list -g --depth=0

查询有无新版本

查看angular cli有无最新版本

> npm outdated -g

安装

> npm install -g @angular@cli

Angular Cli指令

帮助

> ng -h
> ng generate --help 或 ng generate -h

版本查询

> ng v
> ng version
> ng --version

升版

> ng update

创建

> ng new test1

启动

> ng serve

创立元件

> ng generate component test1
> ng g c test1

建置部署

> ng build
> ng build --prod

Angular版本升级

Angular Cli分为global、local版本

更新local版本：

> ng update

自动更新 Angular Cli、Angular、TS、Webpack、rxjs版本
(自动修改package.json 里的版本号、同时做npm update)

更新global版本：

安装全域Angular Cli

> npm install -g @angular@cli

可参考版本升级指南及注意事项