[Angular学习笔记]起步和环境搭建

一、本地开发环境搭建

1.node环境

根据官方文档说明，angular需要Node.js 版本 10.9.0 或更高版本。

• 可以打开控制台运行node -v查看当前node版本
• 如果电脑上没有安装node环境，可以到node官网下载安装

2.npm 包管理器

Angular、Angular CLI 和 Angular 应用都依赖于 npm 包中提供的特性和功能。
要想下载并安装 npm 包，你必须拥有一个 npm 包管理器。
本搭建指南使用 npm 客户端命令行界面，Node.js 已经默认安装了它。要检查你是否安装了 npm 客户端，请在终端/控制台窗口中运行 npm -v 。

二、安装Angular CLI

Angular CLI可以用来来创建项目、生成应用和库代码，以及执行各种持续开发任务，比如测试、打包和部署。

可以使用以下命令全局安装Angular CLI

npm install -g @angular/cli

三、使用Angular CLI 生成初始项目

Angular CLI 为我们提供了两种方式，用于创建新的应用程序：

• ng init - 在当前目录创建新的应用程序

• ng new - 创建新的目录，然后在新建的目录中运行 ng init 命令

因此 ng new 与ng init 的功能是相似的，只是 ng new 会为我们创建新的目录。

假设你还未创建新的目录，那么我们需要使用 ng new 命令来创建新的项目：

ng new my-app

当运行上面的命令后，将发生以下事情：

• 新的 my-app 目录被创建
• 应用程序相关的源文件和目录将会被创建
• 应用程序的所有依赖 (package.json中配置的依赖项) 将会被自动安装
• 自动配置项目中的 TypeScript 开发环境
• 自动配置 Karma 单元测试环境
• 自动配置 Protractor (end-to-end) 测试环境
• 创建 environment 相关的文件并初始化为默认的设置

此时 my-app 目录中 Angular 应用程序的目录结构如下：

.
├── README.md
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   └── app.module.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
└── tslint.json

可用选项

• --dry-run: boolean, 默认为 false, 若设置 dry-run 则不会创建任何文件
• --verbose: boolean, 默认为 false
• --link-cli: boolean, 默认为 false, 自动链接到 @angular/cli 包
• --skip-install: boolean, 默认为 false, 表示跳过 npm install
• --skip-git: boolean, 默认为 false, 表示该目录不初始化为 git 仓库
• --skip-tests: boolean, 默认为 false, 表示不创建 tests 相关文件
• --skip-commit: boolean, 默认为 false, 表示不进行初始提交
• --directory: string, 用于设置创建的目录名，默认与应用程序的同名
• --source-dir: string, 默认为 'src', 用于设置源文件目录的名称
• --style: string, 默认为 'css', 用于设置选用的样式语法 ('css', 'less' or 'scss')
• --prefix: string, 默认为 'app', 用于设置创建新组件时，组件选择器使用的前缀
• --mobile: boolean, 默认为 false,表示是否生成 Progressive Web App 应用程序
• --routing: boolean, 默认为 false, 表示新增带有路由信息的模块，并添加到根模块中
• --inline-style: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联样式
• --inline-template: boolean, 默认为 false, 表示当创建新的应用程序时，使用内联模板

除此之外，你可以在本机上运行 ng generate --help 查看更多的可用选项。接下来让我们来看一下如何运行应用程序。

四、运行应用程序

首先进入使用 Angular CLI 创建的应用程序目录，例如：

$ cd my-app

然后运行：

$ ng serve

当运行上面的命令后，将发生以下事情：

• Angular CLI 从 .angular-cli.json 文件中加载配置信息
• Angular CLI 运行 Webpack 打包相关 JavaScript 和 CSS 文件
• Angular CLI 启动 webpack dev server 本地开发服务器，默认的地址是 localhost:4200

若要停止应用程序，你可以使用 ctrl+c 快捷键。
文章Angular CLI部分参考： Angular CLI 终极指南