# d7c-angular-cli

**Repository Path**: d7c/d7c-angular-cli

## Basic Information

- **Project Name**: d7c-angular-cli
- **Description**: 使用 angular-cli 脚手架初始化一个 Angular 项目。
- **Primary Language**: NodeJS
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: http://www.d7c.top/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-11-23
- **Last Updated**: 2023-02-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# d7c-angular-cli

## 介绍

使用 angular-cli 脚手架初始化一个 Angular 项目。

## 软件架构

### Angular CLI

Angular CLI 命令行工具介绍：[https://angular.io/cli](https://angular.io/cli)，通过 Angular CLI 可以方便的初始化、开发、搭建和维护 Angular 应用程序。

### Angular

Angular 中文官网地址：[https://angular.cn/](https://angular.cn/)，Angular github 地址：[https://github.com/angular/angular](https://github.com/angular/angular)，[开发文档](https://angular.cn/docs)。

## 安装教程

### 1. 在码云上创建 d7c-angular-cli 并克隆到本地，仅保留 .git 文件夹

### 2. 全局安装 @angular/cli

```
npm install -g @angular/cli
```

<img src="./docs/npm install -g.png">

### 3. 初始化 d7c-angular-cli 项目

```
ng new d7c-angular-cli --skip-git
```

<img src="./docs/ng new1.png">
<img src="./docs/ng new2.png">

### 4. 运行测试

```
ng serve
访问地址：http://localhost:4200/
```

<img src="./docs/ng serve.png">

## 目录说明

```
|-- d7c-angular-cli
    |-- .vscode（当前项目 vscode 配置文件）
    |-- docs（文档）
    |-- src（源码目录）
        |-- app（组件目录）
            |-- app-routing.module.ts（路由模块）
            |-- app.component.html
            |-- app.component.less
            |-- app.component.ts（入口组件）
            |-- app.module.ts（项目配置模块，例如组件注入、服务引入）
        |-- assets（静态资源目录）
        |-- favicon.ico
        |-- index.html（入口 UI 文件）
        |-- main.ts（入口 ts 文件）
        |-- styles.less（主样式文件）
    |-- .editorconfig（编码风格配置文件）
    |-- .gitignore
    |-- angular.json（angular cli 配置文件）
    |-- LICENSE
    |-- package.json
    |-- package-lock.json
    |-- README.md
    |-- tsconfig.app.json（源码编译选项）
    |-- tsconfig.json（TypeScript 编译选项）
    |-- tsconfig.spec.json（测试文件编译选项）
```

## 使用说明

### ng serve

```
运行服务并自动重新加载修改的原文件。
```

### ng build

```
编译项目，编译后工件存储在 /dist 目录。
```

### 其他命令

#### ng add

```
向项目中添加对外部库的支持。
```

#### ng analytics

```
配置 Angular CLI 使用指标的收集。
```

#### ng cache

```
配置持久磁盘缓存并检索缓存统计信息。
```

#### ng completion

```
为你的终端设置 Angular CLI 自动完成功能。
```

#### ng config

```
在项目的 angular.json 文件中检索或设置 Angular 的配置值。
```

#### ng deploy

```
为指定项目或工作空间中的默认项目调用部署构建器。
```

#### ng doc

```
在浏览器中打开 Angular 官方文档（angular.io），并搜索给定的关键字。
```

#### ng e2e

```
构建并服务于 Angular 应用，然后运行端到端测试。
```

#### ng extract-i18n

```
从源代码中提取 i18n 消息。
```

#### ng generate

```
生成 directive、component、pipe、service、class、guard、interface、enum、module 等。
ng generate 命令帮助：ng generate --help
例如生成组件命令：ng generate component component-name
```

<img src="./docs/ng generate --help.png">
<img src="./docs/ng generate component user.png">
<img src="./docs/使用 user component.png">
<img src="./docs/ng generate service user.png">

#### ng lint

```
在给定项目文件夹中的 Angular 应用程序代码上运行检测工具。
```

#### ng new

```
创建一个新的 Angular 项目。
```

#### ng run

```
使用在项目中定义的可选自定义构建器配置运行 Architect 目标。
```

#### ng test

```
执行单元测试。
```

#### ng update

```
更新项目及其依赖项。
```

#### ng version

```
查看 CLI 工具版本。
```

<img src="./docs/ng version.png">

### ng help

```
帮助命令。
```

<img src="./docs/ng help.png">

## 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request

## 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

<style>p{text-indent:2em}</style>