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

2019-07-11 本文已影响0人 salt_fash

一、本地开发环境搭建

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