Angular课程实验手册（一）

本文的目标是支持线下Angular课程的学员完成课堂练习，或是在课后回顾课程内容时复盘整个练习。所以在本文中不会讲解Angular的运行原理，这些可以参考本站的其它文章。

开发工具链

为完成本练习，你需要准备以下的一些工具：

NodejS 官网
Yarn 官网
Angular CLI 官网
Git for Windows 官网
Visual Studio Code 官网

环境准备(Windows)

安装NodeJS

直接官网选择合适你机器操作系统的版本下载，建议选择LTS的版本（当前版本为10.16.0 LTS）。下载以后直接运行文件进行安装

安装Yarn

直接官网选择合适你机器操作系统的版本下载。下载以后直接运行文件进行安装

安装Git for Window

直接官网选择合适你机器操作系统的版本下载。下载以后直接运行文件进行安装

安装VS Code

直接官网下载最新的版本。下载后直接运行文件进行安装

安装Angular CLI

使用Yarn进行安装，执行以下命令:

1	yarn global add @angular/cli

系统显示:

yarn global v1.16.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.9: The platform "win32" is incompatible with this module.
info "fsevents@1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "@angular/cli@8.0.2" with binaries:
      - ng
Done in 18.75s.

说明安装正常，默认时安装最新的版本

设置默认的包管理工具为Yarn

1	ng config -g cli.packageManager yarn

执行以后，系统没有任何提示，没消息就是好消息:)

创建Angualr项目

在Windwos中，我们选择将项目建立在D盘的根目录下。目录名为todo-web-app, 以后文章中提到项目目录(PROJECT_ROOT)指的就是d:\todo-web-app,
在命令行执行:

1 2	d: ng new todo-web-app

运行后，系统会提示你，是否需要启用路由功能,注意: 默认是N,不启用路由功能。 在本实验中，记得一定要选择Y

1 2	D:\>ng new todo-web-app ? Would you like to add Angular routing? (y/N)

接下来，系统会提示你选择用哪种样式定义语言，在本实验中选择CSS

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ]
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ]
  Less   [ http://lesscss.org                                                 ]
  Stylus [ http://stylus-lang.com                                             ]

然后系统会:

建立项目目录
按模版生成项目文件
调用yarn,安装依赖库

注意:如果在第3步发送错误导致安装失败，只需要进入到项目目录中，执行yarn就可以继续安装缺失的依赖库而不需要重建项目。以本项目为例, 你可以执行:

1 2	cd todo-web-app yarn

运行Angular项目

建立完项目以后，先不做任何改动，启动项目，观察运行情况，以验证以上步骤是否执行正确:

1 2	cd todo-web-app ng serve

如果正常执行，你可以看到系统显示:

D:\todo-web-app>ng serve

Date: 2019-06-12T03:24:33.201Z
Hash: af0d061959e1fd7fbb88
Time: 10204ms
chunk {main} main.js, main.js.map (main) 11.3 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 274 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 462 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.93 MB [initial] [rendered]
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Compiled successfully.

然后用浏览器访问本机的4200端口， http://localhost:4200/ 就可以看到angular cli为我们构建好的项目骨架运行的效果了。

下一步

下一步，我们将带大家实验构建简单的组件: Angular课程实验手册（二）