# 软件管家 在Windows系统中，各种软件管家(360软件软件、腾讯的软件管家等)为我们解决了大多数软件安装的问题，它甚至强大到能够为我们重新安装或升级操作系统。 `Node.js`可以理解为一个安装在操作系统上的另一个小的系统，类似于我们安装虚拟机在电脑上同时运行其它系统，不同的是`Node.js`与当前操作系统结合的更加紧密，使用起来也更便捷。 `Node.js`贴心的为我们原厂自带了软件管理器，名字叫做`npm`，全称是`Node.js Package Mananger`，直译成中文为：`Node.js包管理器`，也就是`Node.js`下的软件管家，以后我们会使用这个软件管家来安装在Node.js这个小系统下的各种软件。 # angular-cli Angular为我们提供了一个名为 `Angular CLI` 的小软件，我们在该小软件的帮助下，可以轻松完成一些`样本操作`。`Angular CLI`是众多被`npm`包管理器管理包（软件）之一，可以使用`npm install -g @angular/cli`来安装。在教程中为了保持版本统一，避免一些由于新旧版本带来的**异常**，我们使用以下命令来安装`11.0.7`版本的`Angular CLI`。 ```bash # npm install -g @angular/cli@11.0.7 ``` 在网络畅通的情况下，我们不需要等太长的时间便会安装成功。如果你的网络环境不是特别好，则需在执行上述命令之前，首先执行`npm config set registry http://registry.npm.taobao.org`命令，该命令使原本需要去访问国外下载资源改为由国内下载，这大大加快了下载的速度。 ```bash # npm config set registry http://registry.npm.taobao.org # npm install -g @angular/cli@11.0.7 ``` 安装日志如下： ```bash panjiedeMac-Pro:~ panjie$ npm install -g @angular/cli@11.0.7 npm WARN deprecated debug@4.2.0: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated har-validator@5.1.5: this library is no longer supported /usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng > @angular/cli@11.0.7 postinstall /usr/local/lib/node_modules/@angular/cli > node ./bin/postinstall/script.js + @angular/cli@11.0.7 added 253 packages from 201 contributors and updated 1 package in 63.955s ``` >[success] 感谢淘宝为广大开发者提供的[淘宝 NPM 镜像](https://developer.aliyun.com/mirror/NPM)！ ## 验证 输入`ng version`验证是否成功安装了`11.0.7`版本: ```bash panjiedeMac-Pro:~ panjie$ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 11.0.7 Node: 14.15.4 OS: darwin x64 Angular: ... Ivy Workspace: Package Version ------------------------------------------------------ @angular-devkit/architect 0.1100.7 (cli-only) @angular-devkit/core 11.0.7 (cli-only) @angular-devkit/schematics 11.0.7 (cli-only) @schematics/angular 11.0.7 (cli-only) @schematics/update 0.1100.7 (cli-only) ``` >[info] 如果在学习教程前你已经安装了其它版本的Angular CLI，可以使用`npm uninstall -g @angular/cli`卸载历史版本后重新安装。 # Hello Angular 打开系统终端，并进入到任意自己喜欢的文件夹，执行`ng new first-app`初始化一个`angular`应用: ```bash panjiedeMac-Pro:angular11-guild panjie$ ng new first-app ? Do you want to enforce stricter type checking and stricter bundle budgets in t he workspace? This setting helps improve maintainability and catch bugs ahead of time. For more information, see https://angular.io/strict (y/N) y ❶ ? Would you like to add Angular routing? (y/N) y? ❷ Which stylesheet format would you like to use? (Use arrow keys) ❯ CSS ❸ SCSS [ https://sass-lang.com/documentation/syntax#scss ] Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] Less [ http://lesscss.org ] Stylus [ https://stylus-lang.com ] 等待安装，视网速不同表现不同。 CREATE first-app/e2e/src/app.e2e-spec.ts (660 bytes) CREATE first-app/e2e/src/app.po.ts (274 bytes) ✔ Packages installed successfully. ``` * ❶ 输入y后按回车，表示：启用更严格的语法检查 * ❷ 输入y后按回车，表示：启用路由 * ❸ 默认是CSS，直接按回车 >[danger] **注意:** 在后续的教程中，你应该时刻关注我们给出的终端提示，该提示中包含的当前执行命令的位置非常重要，你要确保在执行相关命令时与教程保持一致。比如`panjiedeMac-Pro:angular11-guild😀 panjie$`表示当前命令的执行路径为`angular11-guild`😀。 `angular11-guild`只是个文件夹名字，是我任意选择的文件夹，在该文件夹下我使用 `ng new first-app` 命令初始化了第一个`angular`应用。 该命令将为我们创建一个first-app文件夹，并且自动为我们在该文件夹中初始化一系列的文件。first-app文件夹中内容如下： ```bash ├── README.md ├── angular.json ├── e2e ├── karma.conf.js ├── node_modules ├── package-lock.json ├── package.json ├── src ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json ``` 我们共同**了解**一下这些被自动生成的文件(夹)： ```bash ├── README.md 项目介绍文件，后期我们可以变更为对当前项目的介绍，比如项目完成了什么功能，在开发时需要什么 ├── angular.json Angular项目的配置文件 ├── e2e 专门放集成测试文件的文件夹 ├── karma.conf.js Karma对应的配置文件 ├── node_modules 本项目依赖的其它npm包 ├── package-lock.json 本项目依赖于其它包（库）的具体安装情况（版本、下载地址等） ├── package.json 本项目依赖于其它包（库）的情况 ├── src 源代码文件夹 ├── tsconfig.app.json typescript相关的配置文件 ├── tsconfig.json typescript相关的配置文件 ├── tsconfig.spec.json typescript测试相关的配置文件 └── tslint.json 语法校验配置文件 ``` >[success] **了解**=**看看**，表示该部分内容不需要记忆。 ## 启动应用 在项目根目录`first-app`下执行`ng serve`即可启动项目： ```bash panjiedeMac-Pro:first-app😀 panjie$ ng serve ✔ Browser application bundle generation complete. Initial Chunk Files | Names | Size vendor.js | vendor | 2.66 MB polyfills.js | polyfills | 141.32 kB main.js | main | 59.58 kB runtime.js | runtime | 6.15 kB styles.css | styles | 119 bytes | Initial Total | 2.87 MB Build at: 2021-01-20T10:18:35.573Z - Hash: 838fc9c37ac2f2622e90 - Time: 7198ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ✔ Compiled successfully. ``` * 😀 注意当前文件夹位置为`first-app` 接下来我们打开浏览器访问：[http://localhost:4200/](http://localhost:4200/)  至此，Angular启动成功。 >[info] 你还可以使用`ng serve -o`来启动Angular应用，看看会发生什么。 ## 停止 关闭终端或是在终端中使用`ctrl+c`组合键来终止Angular项目。 # 本节作业 * 除[Angular CLI](https://www.npmjs.com/package/@angular/cli)外，npm还管理着很多优秀的包，[http-server](https://www.npmjs.com/package/http-server)便是优秀的一个，请参考文档尝试安装并使用。 * 请参考[Vue CLI的官方文档](https://cli.vuejs.org/)，初始化一个Vue项目。 # 资源列表 * [搭建环境](https://www.angular.cn/guide/setup-local) * [CLI 概览与命令参考手册](https://www.angular.cn/cli) * [本节源码](https://github.com/mengyunzhi/angular11-guild/archive/step1.2.zip)