1.3 第一个小应用 Hello Angular
那么现在开启一个terminal（命令行窗口），键入 ng new hello-angular ，你会看到以下的命令行输出。
wangpengdeMacBook-Pro:~ wangpeng$ ng new hello-angular
installing ng2
create .editorconfig
create README.md
create src/app/app.component.css
create src/app/app.component.html
create src/app/app.component.spec.ts
create src/app/app.component.ts
create src/app/app.module.ts
create src/app/index.ts
create src/assets/.gitkeep
create src/environments/environment.prod.ts
create src/environments/environment.ts
create src/favicon.ico
create src/index.html
create src/main.ts
create src/polyfills.ts
create src/styles.css
create src/test.ts
create src/tsconfig.json
create src/typings.d.ts
create angular-cli.json
create e2e/app.e2e-spec.ts
create e2e/app.po.ts
create e2e/tsconfig.json
create .gitignore
create karma.conf.js
create package.json
create protractor.conf.js
create tslint.json
Successfully initialized git.
Installing packages for tooling via npm.
这个安装过程需要一段时间，请一定等待安装完毕，命令行重新出现光标提示时才算安装完毕。
这个命令为我们新建了一个名为“hello-angular”的项目。进入该项目目录，键入 code可以打开IDE看到如图 1.1所示的界面。
图1.1 VSCode 管理项目
使用Mac 的用户可能发现找不到我们刚才使用的命令行 code，需要通过IDE安装一下。点击F1，输入install，即可看到“在Path中安装code命令”，选择之后就可以了，如图 1.2所示。
图 1.2 Mac用户需要安装命令行
项目的文件结构如下，日常开发中真正需要关注的只有src目录：
├── README.md -- 项目说明文件（Markdown格式）
├── angular-cli.json -- Angular-CLI配置文件
├── e2e -- 端到端（e2e）测试代码目录
│??├── app.e2e-spec.ts
│??├── app.po.ts
│??└── tsconfig.json
├── karma.conf.js -- Karma单元测试（Unit Testing）配置文件
├── package.json -- node打包文件
├── protractor.conf.js -- 端到端（e2e）测试配置文件
├── src -- 源码目录
│??├── app -- 应用根目录
│??│??├── app.component.css -- 根组件样式
│??│??├── app.component.html -- 根组件模板
│??│??├── app.component.spec.ts --根组件单元测试
│??│??├── app.component.ts --根组件ts文件
│??│??├── app.module.ts --根模块
│??│??└── index.ts --app索引（集中暴露需要给外部使用的对象，方便外部引用）
│??├── assets -- 公共资源目录（图像、文本、视频等）
│??├── environments -- 环境配置文件目录
│??│??├── environment.prod.ts -- 生产环境配置文件
│??│??└── environment.ts -- 开发环境配置文件
│??├── favicon.ico -- 站点收藏图标
│??├── index.html -- 入口页面
│??├── main.ts -- 入口ts文件
│??├── polyfills.ts -- 针对浏览器能力增强的引用文件（一般用于兼容不支持某些新特性的浏览器）
│??├── styles.css -- 全局样式文件
│??├── test.ts -- 测试入口文件
│??├── tsconfig.json -- TypeScript配置文件
│??└── typings.d.ts -- 项目中使用的类型定义文件
└── tslint.json -- 代码Lint静态检查文件
大概了解了文件目录结构后，我们重新回到命令行，在应用根目录键入 ng serve 可以看到应用编译打包后server运行在4200端口。你应该可以看到下面这样的输出：
wangpengdeMacBook-Pro:hello-angular wangpeng$ ng serve
** NG Live Development Server is running on http://localhost:4200. **
Hash: 0c80f9e8c32908aad0be
Time: 8497ms
chunk {0} styles.bundle.js, styles.bundle.map (styles) 184 kB {3} [initial] [rendered]
chunk {1} main.bundle.js, main.bundle.map (main) 5.33 kB {2} [initial] [rendered]
chunk {2} vendor.bundle.js, vendor.bundle.map (vendor) 2.22 MB [initial] [rendered]
chunk {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: bundle is now VALID.
打开浏览器输入 http://localhost:4200 即可看到程序运行成功啦！如图 1.3所示。
图 1.3 第一次运行应用
自动生成的太没有成就感了是不是，那么我们动手改一下吧。保持运行服务的命令窗口，然后进入VSCode，打开 src/app/app.component.ts 修改title，比如： title = 'This is a hello-angular app';，保存后返回浏览器看一下吧，结果已经更新了，如图 1.4所示。这种热装载的特性使得开发变得很方便。
图 1.4 第一次小修改
