ng new 命令行里 --routing 参数的含义

简介: ng new 命令行里 --routing 参数的含义

在深入探讨 Angular 命令行 ng new mystore --routing=false 的语法和含义之前,我们需要明确 Angular CLI(Angular 命令行接口)的作用基本操作。Angular CLI 是一个非常强大的工具,用于创建项目、生成应用程序和库代码、执行各种开发任务,比如测试、打包和部署。


命令行详解

ng new

ng new 是 Angular CLI 中用于创建一个新 Angular 应用程序的命令。这个命令会生成一个包含默认目录和文件的基本结构,这些都是开发一个标准 Angular 应用所必需的。通过这个命令,开发者可以迅速开始一个项目,而无需从零开始配置环境和文件。


mystore

这部分是新项目的名称。在这个例子中,新创建的 Angular 应用命名为 mystore。项目名称可以自由指定,但需要遵循一些基本的命名规则,例如不应包含空格或特殊字符,并且通常建议使用小写字母以避免潜在的跨平台问题。


--routing=false

这个参数指定新建项目是否包含 Angular 路由模块。Angular 路由器允许你定义视图导航和路由状态,是构建单页应用(SPA)的核心部分--routing=false 明确告诉 CLI,我们在这个项目中初期不需要设置路由功能。如果没有提供此选项,或者设置为 true,CLI 会在项目中包含路由模块,并在根模块 app.module.ts 中导入 RouterModule


使用 ng new 创建项目的实际操作

假设我们要创建一个名为 mystore 的新电商网站,而且当前不打算在项目初期就使用 Angular 的路由功能。以下是命令的使用:


  1. 打开终端或命令行界面。
  2. 输入命令 ng new mystore --routing=false
  3. CLI 会询问是否使用 Angular 的内置样式预处理器(如 SCSS、LESS 等)。选择一个后,CLI 将开始创建项目。


项目创建完毕后,你会得到一个目录结构大致如下:

mystore/
├── README.md
├── angular.json
├── package.json
├── tsconfig.json
├── node_modules/
├── src/
│   ├── app/
│   │   ├── app.module.ts
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   └── app.component.ts
│   ├── assets/
│   ├── environments/
│   │   ├── environment.prod.ts
│   │   ├── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
└── e2e/


为什么选择 --routing=false

选择不立即启用路由功能可能是出于几个理由:


  • 项目简单:对于非常简单的项目或是早期原型开发,可能暂时不需要路由处理。
  • 渐进式开发:可能计划随着应用的发展逐步引入路由功能。
  • 特殊用途应用:例如,仪表板或内部管理系统,这些应用可能仅在单一页面中通过组件和服务来管理视图和状态。


结语

通过 ng new 命令,Angular CLI 提供了一种快速、一致的方法来设置新项目,确保每个 Angular 应用都有一个清晰和一致的起点。参数 --routing=false 则为开发者提供了更多控制,允许他们根据具体需求定制应用的初始功能。无论是快速原型设计,还是构建大规模企业应用,Angular CLI 都是开始 Angular 项目的不二选择。

相关文章
|
7天前
|
测试技术 编译器 vr&ar
CMake深度解析:掌握add_custom_command,精通Makefile生成规则(一)
CMake深度解析:掌握add_custom_command,精通Makefile生成规则
106 1
|
7天前
|
存储 Linux C++
CMake深度解析:掌握add_custom_command,精通Makefile生成规则(二)
CMake深度解析:掌握add_custom_command,精通Makefile生成规则
52 0
|
7天前
|
前端开发 JavaScript 开发者
ng new mystore --standalone=false 参数的含义介绍
ng new mystore --standalone=false 参数的含义介绍
12 1
|
7天前
|
Unix Linux Shell
CMake深度解析:掌握add_custom_command,精通Makefile生成规则(三)
CMake深度解析:掌握add_custom_command,精通Makefile生成规则
79 1
|
7天前
|
Kubernetes Linux Shell
Linux |奇怪的知识---complete命令---你不知道的命令参数补全---kubectl命令的参数补全
Linux |奇怪的知识---complete命令---你不知道的命令参数补全---kubectl命令的参数补全
46 0
|
11月前
|
存储 设计模式 Go
Go 函数选项模式(Functional Options Pattern)
本文对 Go 函数选项模式(Functional Options Pattern)进行了详细介绍,并通过封装一个消息结构体的例子,展示了如何使用函数选项模式进行代码实现。
135 0
|
6月前
|
JavaScript
命令行 npm config set legacy-peer-deps true 的作用
命令行 npm config set legacy-peer-deps true 的作用
90 0
|
7月前
ng update 命令的 force 选项
ng update 命令的 force 选项
38 0
|
10月前
|
存储 Python
【Python标准库】argparse——命令行选项、参数和子命令解析器
【Python标准库】argparse——命令行选项、参数和子命令解析器
|
Arthas 安全 测试技术
Options 全局选项的查看和设置 | 学习笔记
快速学习 Options 全局选项的查看和设置
267 0
Options 全局选项的查看和设置 | 学习笔记

热门文章

最新文章