快速开启第一个 Angular 应用

本文带你快速开启第一个 Angular 应用“Hello World”。

新建应用

打开终端窗口。运行下列命令来生成一个新项目以及默认的应用代码：

  1. ng new hello-world

其中hello-world是指定的应用的名称。

详细过程如下：

  1. D:\workspaceGithub\angular-tutorial\samples>ng new hello-world
  2. CREATE hello-world/angular.json (3593 bytes)
  3. CREATE hello-world/package.json (1316 bytes)
  4. CREATE hello-world/README.md (1027 bytes)
  5. CREATE hello-world/tsconfig.json (408 bytes)
  6. CREATE hello-world/tslint.json (2805 bytes)
  7. CREATE hello-world/.editorconfig (245 bytes)
  8. CREATE hello-world/.gitignore (503 bytes)
  9. CREATE hello-world/src/favicon.ico (5430 bytes)
  10. CREATE hello-world/src/index.html (297 bytes)
  11. CREATE hello-world/src/main.ts (370 bytes)
  12. CREATE hello-world/src/polyfills.ts (3194 bytes)
  13. CREATE hello-world/src/test.ts (642 bytes)
  14. CREATE hello-world/src/styles.css (80 bytes)
  15. CREATE hello-world/src/browserslist (375 bytes)
  16. CREATE hello-world/src/karma.conf.js (964 bytes)
  17. CREATE hello-world/src/tsconfig.app.json (170 bytes)
  18. CREATE hello-world/src/tsconfig.spec.json (256 bytes)
  19. CREATE hello-world/src/tslint.json (314 bytes)
  20. CREATE hello-world/src/assets/.gitkeep (0 bytes)
  21. CREATE hello-world/src/environments/environment.prod.ts (51 bytes)
  22. CREATE hello-world/src/environments/environment.ts (631 bytes)
  23. CREATE hello-world/src/app/app.module.ts (314 bytes)
  24. CREATE hello-world/src/app/app.component.html (1141 bytes)
  25. CREATE hello-world/src/app/app.component.spec.ts (1010 bytes)
  26. CREATE hello-world/src/app/app.component.ts (215 bytes)
  27. CREATE hello-world/src/app/app.component.css (0 bytes)
  28. CREATE hello-world/e2e/protractor.conf.js (752 bytes)
  29. CREATE hello-world/e2e/tsconfig.e2e.json (213 bytes)
  30. CREATE hello-world/e2e/src/app.e2e-spec.ts (307 bytes)
  31. CREATE hello-world/e2e/src/app.po.ts (208 bytes)
  32. npm WARN deprecated istanbul-lib-hook@1.2.1: 1.2.0 should have been a major version bump
  33. npm WARN tar ENOENT: no such file or directory, open 'D:\workspaceGithub\angular-tutorial\samples\hello-world\node_modules\.staging\fsevents-bd96250a\node_modules\needle\lib\auth.js'
  34. ...

启动应用

执行以下命令，来启动应用。

  1. cd hello-world
  2. ng serve --open

其中，

  • ng serve 命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用。
  • 使用 —open（或 -o）参数可以自动打开浏览器并访问 http://localhost:4200/。

效果如下：

快速开启第一个 Angular 应用 - 图1