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.

打开浏览器输入localhost:4200即可看到程序运行成功啦！如图1.3所示。

图1.3 第一次运行应用

自动生成的太没有成就感了是不是，那么我们动手改一下吧。保持运行服务的命令窗口，然后进入VSCode，打开src/app/app.component.ts修改title，比如：title = 'This is a hello-angular app';，保存后返回浏览器看一下吧，结果已经更新了，如图1.4所示。这种热装载的特性使得开发变得很方便。

图1.4 第一次小修改