Angular作为目前前端的一个重要选择，加之背后站着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版本，安装方法可以参看
http://blog.csdn.net/liumiaocn/article/details/78349005

[root@angular ~]# docker version
Client:Version:      17.09.0-ceAPI version:  1.32Go version:   go1.8.3Git commit:   afdb6d4Built:        Tue Sep 26 22:39:28 2017OS/Arch:      linux/amd64Server:Version:      17.09.0-ceAPI version:  1.32 (minimum version 1.12)Go version:   go1.8.3Git commit:   afdb6d4Built:        Tue Sep 26 22:45:38 2017OS/Arch:      linux/amd64Experimental: false
[root@angular ~]#

下载Node镜像

node的官方镜像，使用其alpine的会有跟小的尺寸，对那些关心镜像大小的项目很有帮助。

[root@angular docker]# docker pull node:8.7-alpine
8.7-alpine: Pulling from library/node
Digest: sha256:9c6fab2e870c3dac999ae2bae0eeb4e4831aa25561da03cadcf736f4ba9f9cca
Status: Image is up to date for node:8.7-alpine
[root@angular docker]# docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
node                8.7-alpine          a47a5669ac57        2 weeks ago         65.3MB
[root@angular docker]#

可以看到，最新的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
...
+ typescript@2.5.3
+ @angular/cli@1.4.9
+ npm@5.5.1
+ npm@5.5.1
+ typings@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 HelloAngularcreate 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:529throw 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 HelloAngularcreate 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可以忽略。

确认结果

可以看到我们第一个应用程序就看到结果了。

修改内容

[root@angular ~]# 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
[root@angular ~]# 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="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2></li><li><h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2></li><li><h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2></li>
</ul>/workspace/HelloAngular/src/app # 

而这个HelloWorld的核心则是在这一句：Welcome to {{title}}!
通过{{}}差指表达式的语法绑定数据进来，而数据则保存在app.component.ts之中。

/workspace/HelloAngular/src/app # cat app.component.ts
import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'app';
}
/workspace/HelloAngular/src/app #

修改title内容为Angular Examples

/workspace/HelloAngular/src/app # cat app.component.ts
import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'Angular Examples';
}
/workspace/HelloAngular/src/app # 

确认结果

此时你会发现在刚刚ng serve启动的窗口，webpack开始重新编译了一遍，因为我们刚刚修改了代码

webpack: Compiling...
Date: 2017-10-26T22:13:15.311Z
Hash: 2991e5ee5a558b91ce4b
Time: 716ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry]
chunk {main} main.bundle.js, main.bundle.js.map (main) 8.66 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 199 kB {inline} [initial]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.3 kB {inline} [initial]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.32 MB [initial]webpack: Compiled successfully.

确认页面显示

如果你的浏览器还在打开着，再次刷新一下，就可以看到修改的结果了

总结

这篇文章我们学习到了如何使用Angluarcli进行开发第一个HelloWorld，并且如何将其放到node的官方容器之中，下篇开始我们开始拆官方教程。

Angular 4入门教程系列：1：运行在Docker中的HelloWorld相关推荐

1. Angular 4入门教程系列：1：HelloWorld

   ngular作为目前前端的一个重要选择,加之背后站着google,得到了越来越多的开发者的青睐.但是发现没有按照由浅入深地实例化的教程,虽然官网的教程已经不错,但是初始入门的细节没有提到,再加之网络等 ...

2. Angular 4入门教程系列：8：Tour Of Heroes之前后端服务

   这篇文章我们将会重点学习一下Angular的HttpModule和In-Memory Web API的使用方法. 学习时间 大概5-10分钟. 事前准备 需要事前安装模块angular-in-memo ...

3. Angular 4入门教程系列：9：TypeScript：ECMAScript之前世今生

   在以例子为主的官方介绍中,我们学习到了npm install typescript,也看过tsconfig.json的typescript配置文件的配置文件,比如里面写的ES5到底是什么.另外那些.t ...

4. Angular 4入门教程系列 14 PrimeNG的使用方式

   分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 这篇文章 ...

5. Angular 4入门教程系列：14：PrimeNG的使用方式

   这篇文章介绍一下Angular的老牌UI组件库PrimeNG,并演示一下如何使引入PrimeNG到项目之中. Why PrimeNG 使用PrimeNG有很多原因,比如 70多个完善的组件 开源 提高 ...

6. WPF入门教程系列四——Dispatcher介绍

   WPF入门教程系列四--Dispatcher介绍 一.Dispatcher介绍 微软在WPF引入了Dispatcher,那么这个Dispatcher的主要作用是什么呢? 不管是WinForm应用程序还 ...

7. Linux Shell脚本入门教程系列之（十六） Shell输入输出重定向

   本文是Linux Shell系列教程的第(十六)篇,更多Linux Shell教程请看:Linux Shell系列教程 Shell中的输出和输入的重定向是在使用中经常用到的一个功能,非常实用,今天就为 ...

8. Linux Shell脚本入门教程系列之（十五） Shell函数简介

   本文是Linux Shell脚本系列教程的第(十五)篇,更多Linux Shell教程请看:Linux Shell脚本系列教程 上一篇之后,函数可以将一个复杂功能划分成若干模块,从而使程序结构更加清晰 ...

9. Linux Shell脚本入门教程系列之（九）Shell判断 if else 用法

   本文是Linux Shell脚本系列教程的第(九)篇,更多shell教程请看:Linux Shell脚本系列教程 判断语句是每个语言都必不可少的关键语法,Shell命令当然也不例外.继上一篇之后,今天 ...

最新文章

1. centos 6.8 x86_64下autoconf版本升级到2.69
2. 让一个网页打开的同时自动为另一个网页自动填写表单并提交
3. java标识符与关键字_4、Java标识符和关键字
4. C/Cpp / STL / vector 释放内存的方案
5. 2010经典句句 学会了以后你的嘴巴会很流利 （转）
6. ai保存web格式没有html,存储技巧，讲解AI存储为WEB所用格式的一些知识
7. 前端学习（2286）：react之无状态组件
8. 计算机找不到管理无线网络,电脑wifi密码忘了 并且找不到管理无线网络该怎么处理?...
9. Bash游戏 V2（51Nod-1067）
10. 【docker】为docker下的php容器安装php-redis扩展【编译安装】
11. Python中的文件复制
12. 【转】Oracle 行列转换
13. 各版本delphi下载
14. matlab xrd,波导光学大作业-论文-matlab模拟xrd及分析.doc
15. DynamipsGUI 2.8（CCNP模拟器）
16. cat6 万兆_专业扫盲Cat5e/Cat6/Cat6a/Cat7网线系列
17. 12306验证码破解思路分享
18. 微信公众号自定义模板内容换行
19. Matplotlib从入门到精通05-样式色彩秀芳华
20. C#——Windows银行储蓄管理系统

热门文章

1. 自动售货机发展优势你了解多少？
2. jsp+ssm计算机毕业设计japm青篮汇篮球培训系统【附源码】
3. 《杀破狼·贪狼》剧情在线观看
4. 联合办公空间是什么，跟传统办公室有什么区别
5. keep sb updated_keep you update 和keep you updated哪个正确？
6. 海伦司上市，是酒馆界“拼多多”还是“夜间星巴克”？
7. [1.2]由UML模型通过XMI生成XML,通过XSLT展示到表现层
8. 建模师是如何用maya软件把美女制作的这么真实的
9. 码教授告诉你为什么你的#ppt做的就是没有吸引力#（转自码教授微博）
10. 如何用Java实现网络中国象棋室（一）