Angular 安装与创建第一项目

1. 下载nodejs 并且安装

https://nodejs.org/en

2. 打开命令窗口，验证是否安装成功

C:\Users\Harry>node -v
v18.16.0

C:\Users\Harry>npm -v
9.5.1

3. 安装Angular CLI

C:\Users\Harry>npm install -g @angular/cli

added 239 packages in 9s
npm notice
npm notice New minor version of npm available! 9.6.7 -> 9.7.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.7.1
npm notice Run npm install -g [email protected] to update!
npm notice

经过不算漫长的等待，你的Angular CLI就装好了。确认一下：

C:\Users\Harry>ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 16.1.0
Node: 18.16.0
Package Manager: npm 9.5.1
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1601.0 (cli-only)
@angular-devkit/core         16.1.0 (cli-only)
@angular-devkit/schematics   16.1.0 (cli-only)
@schematics/angular          16.1.0 (cli-only)

4. 新建Angular项目

C:\Users\Harry>ng new ai_service_ui
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

CREATE ai_service_ui/angular.json (2735 bytes)
CREATE ai_service_ui/package.json (1044 bytes)
CREATE ai_service_ui/README.md (1065 bytes)
CREATE ai_service_ui/tsconfig.json (901 bytes)

5. 启动项目

cd 你的项目中

C:\Users\Harry>cd ai_service_ui

然后启动

C:\Users\Harry\ai_service_ui>ng serve
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes

Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

    ng analytics disable

Global setting: enabled
Local setting: enabled
Effective status: enabled
√ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.28 MB |
polyfills.js          | polyfills     | 332.99 kB |
styles.css, styles.js | styles        | 230.29 kB |
main.js               | main          |  48.11 kB |
runtime.js            | runtime       |   6.52 kB |

                      | Initial Total |   2.88 MB

Build at: 2023-06-20T14:58:31.261Z - Hash: cbf12963274fa959 - Time: 15056ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

6. 访问页面 http://localhost:4200/