Angular 4入門教程系列：1：HelloWorld
阿新 • • 發佈：2019-01-10
ngular作為目前前端的一個重要選擇，加之背後站著google，得到了越來越多的開發者的青睞。但是發現沒有按照由淺入深地例項化的教程，雖然官網的教程已經不錯，但是初始入門的細節沒有提到，再加之網路等問題，決定把官網的教程替大家做一遍給大家留個筆記。同時可能會結合docker進行使用，當然沒有安裝docker也完全沒有關係，同樣執行就可以了。
事前準備
OS
[root@angular docker]# uname -a
Linux angular 3.10.0-514.el7.x86_64 #1 SMP Tue Nov 22 16:42:41 UTC 2016 x86_64 x86_64 x86_64 GNU/Linux
[root@angular docker]#
Docker
安裝了目前最新的穩定的docker-ce版本，安裝方法可以參看
下載Node映象
node的官方映象，使用其alpine的會有跟小的尺寸，對那些關心映象大小的專案很有幫助。
[[email protected] docker]# docker pull node:8.7-alpine
8.7-alpine: Pulling from library/node
Digest: sha256:9c6fab2e870c3dac999ae2bae0eeb4e4831aa25561da03cadcf736f4ba9f9cca
Status: Image is 可以看到，最新的8.7版本的node，只有65M
準備Angular的開發環境
我們在這系列教程中將會使用angular-cli來進行開發，所以其實只需要安裝angluar/cli即可，同時將typescript和typings也進行安裝，而這些我們固化到一個簡單的Dockerfile中。
[root@angular docker]# cat Dockerfile FROM node:8.7-alpineRUN npm install -g @angular/cli \ npm install -g typescript \ npm install -g typingsWORKDIR /workspaceCMD ng serve -H 0.0.0.0 --port=4200[root@angular docker]# Docker build
非docker的環境，只需要安裝npm，然後使用npm去執行安裝@angular/cli等即可。
構建命令：docker build -t angular:latest .
[root@angular docker]# docker build -t angular:latest .
Sending build context to Docker daemon 125.6MB
Step 1/4 : FROM node:8.7-alpine
---> a47a5669ac57
Step 2/4 : RUN npm install -g @angular/cli npm install -g typescript npm install -g typings
---> Running in 275cc362f8ea
npm info it worked if it ends with ok
npm info using npm@5.4.2
npm info using node@v8.7.0
...
+ [email protected]2.5.3
+ @angular/[email protected]1.4.9
+ npm@5.5.1
+ npm@5.5.1
+ [email protected]2.1.1
added 1142 packages, updated 29 packages and moved 2 packages in 226.09s
npm info ok
---> 1b950a9ce633
Removing intermediate container 275cc362f8ea
Step 3/4 : WORKDIR /workspace
---> 628dace1dd72
Removing intermediate container 1c9bb2c59b4b
Step 4/4 : CMD ng serve -H 0.0.0.0 --port=4200
---> Running in 36a45f999a65
---> a6962d3cb379
Removing intermediate container 36a45f999a65
Successfully built a6962d3cb379
Successfully tagged angular:latest
[root@angular docker]#確認構建結果：docker images
[root@angular docker]# docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
angular latest a6962d3cb379 12 minutes ago 227MB
node 8.7-alpine a47a5669ac57 2 weeks ago 65.3MB
[root@angular docker]# 可以看到安裝這些之後映象已經達到227M
第一個Angular的HelloWorld程式
docker run
不使用docker的話，可以忽略
[root@angular docker]# docker run -p 4200:4200 -it angular sh
/workspace # ls
/workspace # hostname
60d12e58d5db
/workspace #可以看到已經在一個新啟動的容器之中了
確認版本
/workspace # ng -v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.4.9
node: 8.7.0
os: linux x64
/workspace #ng new
使用Angular cli的ng系列命令可以快速建立一個專案，後面會專門來介紹如何使用ng系列命令。
命令：ng new HelloAngular
建立一個HelloAngular的專案
/workspace # ng new HelloAngular
create HelloAngular/README.md (1028 bytes)
create HelloAngular/.angular-cli.json (1290 bytes)
create HelloAngular/.editorconfig (245 bytes)
create HelloAngular/.gitignore (516 bytes)
create HelloAngular/src/assets/.gitkeep (0 bytes)
create HelloAngular/src/environments/environment.prod.ts (51 bytes)
create HelloAngular/src/environments/environment.ts (387 bytes)
create HelloAngular/src/favicon.ico (5430 bytes)
create HelloAngular/src/index.html (299 bytes)
create HelloAngular/src/main.ts (370 bytes)
create HelloAngular/src/polyfills.ts (2667 bytes)
create HelloAngular/src/styles.css (80 bytes)
create HelloAngular/src/test.ts (1085 bytes)
create HelloAngular/src/tsconfig.app.json (211 bytes)
create HelloAngular/src/tsconfig.spec.json (304 bytes)
create HelloAngular/src/typings.d.ts (104 bytes)
create HelloAngular/e2e/app.e2e-spec.ts (295 bytes)
create HelloAngular/e2e/app.po.ts (208 bytes)
create HelloAngular/e2e/tsconfig.e2e.json (235 bytes)
create HelloAngular/karma.conf.js (923 bytes)
create HelloAngular/package.json (1318 bytes)
create HelloAngular/protractor.conf.js (722 bytes)
create HelloAngular/tsconfig.json (363 bytes)
create HelloAngular/tslint.json (2985 bytes)
create HelloAngular/src/app/app.module.ts (314 bytes)
create HelloAngular/src/app/app.component.css (0 bytes)
create HelloAngular/src/app/app.component.html (1120 bytes)
create HelloAngular/src/app/app.component.spec.ts (986 bytes)
create HelloAngular/src/app/app.component.ts (207 bytes)
You can `ng set --global packageManager=yarn`.
Installing packages for tooling via npm.
module.js:529
throw err;
^
Error: Cannot find module 'semver'
at Function.Module._resolveFilename (module.js:527:15)
at Function.Module._load (module.js:476:23)
at Module.require (module.js:568:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/unsupported.js:2:14)
at Module._compile (module.js:624:30)
at Object.Module._extensions..js (module.js:635:10)
at Module.load (module.js:545:32)
at tryModuleLoad (module.js:508:12)
at Function.Module._load (module.js:500:3)
Package install failed, see above.
Package install failed, see above.
/workspace # ng set --global packageManager=yarn
/workspace # ls
HelloAngular
/workspace # rm -rf HelloAngular發現提示出錯了，這個是需要設定packageManager為yarn，入門的時候讓做什麼就做什麼，安裝依賴使用yarn也很好，只要能很好的裝上就行。
/workspace # ng set --global packageManager=yarn
/workspace # ls
HelloAngular
/workspace # rm -rf HelloAngula發現專案目錄實際已經建立了，所以設定之後刪除重新再來。
/workspace # ng new HelloAngular
create HelloAngular/README.md (1028 bytes)
create HelloAngular/.angular-cli.json (1290 bytes)
create HelloAngular/.editorconfig (245 bytes)
create HelloAngular/.gitignore (516 bytes)
create HelloAngular/src/assets/.gitkeep (0 bytes)
create HelloAngular/src/environments/environment.prod.ts (51 bytes)
create HelloAngular/src/environments/environment.ts (387 bytes)
create HelloAngular/src/favicon.ico (5430 bytes)
create HelloAngular/src/index.html (299 bytes)
create HelloAngular/src/main.ts (370 bytes)
create HelloAngular/src/polyfills.ts (2667 bytes)
create HelloAngular/src/styles.css (80 bytes)
create HelloAngular/src/test.ts (1085 bytes)
create HelloAngular/src/tsconfig.app.json (211 bytes)
create HelloAngular/src/tsconfig.spec.json (304 bytes)
create HelloAngular/src/typings.d.ts (104 bytes)
create HelloAngular/e2e/app.e2e-spec.ts (295 bytes)
create HelloAngular/e2e/app.po.ts (208 bytes)
create HelloAngular/e2e/tsconfig.e2e.json (235 bytes)
create HelloAngular/karma.conf.js (923 bytes)
create HelloAngular/package.json (1318 bytes)
create HelloAngular/protractor.conf.js (722 bytes)
create HelloAngular/tsconfig.json (363 bytes)
create HelloAngular/tslint.json (2985 bytes)
create HelloAngular/src/app/app.module.ts (314 bytes)
create HelloAngular/src/app/app.component.css (0 bytes)
create HelloAngular/src/app/app.component.html (1120 bytes)
create HelloAngular/src/app/app.component.spec.ts (986 bytes)
create HelloAngular/src/app/app.component.ts (207 bytes)
Installing packages for tooling via yarn.
Installed packages for tooling via yarn.
Project 'HelloAngular' successfully created.這裡可能會等一會時間，因為要安裝依賴，可以發現安裝的時候已經通過我們設定的yarn了（Installing packages for tooling via yarn.）
啟動
啟動命令：ng serve -H 0.0.0.0 –port=4200 –open
注意點：在容器內需要指定-H，預設埠為4200，如果希望改變使用port選項進行修正即可。
/workspace # cd HelloAngular
/workspace/HelloAngular # ng serve -H 0.0.0.0 --port=4200 --open
** NG Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **
10% building modules 3/3 modules 0 active(node:146) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Exited with code 3
(node:146) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. Date: 2017-10-26T22:02:09.332Z Hash: c5e9842219db972ca0d2
Time: 28679ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 8.65 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.32 MB [initial] [rendered]
webpack: Compiled successfully.可以看到webpack已經編譯成功，DeprecationWarning的Warning可以忽略。
確認結果
可以看到我們第一個應用程式就看到結果了。
修改內容
[[email protected] ~]# docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
60d12e58d5db angular "sh" 16 minutes ago Up 16 minutes 0.0.0.0:4200->4200/tcp festive_johnson
[[email protected] ~]# docker exec -it festive_johnson sh
/workspace # ls
HelloAngular
/workspace # cd HelloAngular
/workspace/HelloAngular # cd src/app
/workspace/HelloAngular/src/app # ls
app.component.css app.component.html app.component.spec.ts app.component.ts app.module.ts
/workspace/HelloAngular/src/app #可以清楚的看到，頁面顯示的資訊在html頁面裡面
/workspace/HelloAngular/src/app # cat app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel