Angular从零到一1.3 第一个小应用 Hello Angular

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　第一次小修改