[Angular] 从零开始使用 Angular CLI 创建 Angular 项目

一、安装 Node.js 📚

Node.js 是一个运行 JavaScript 代码的 JavaScript 运行时,它允许我们在服务器端运行 JavaScript 代码。以下是安装 Node.js 的步骤:

  1. 🌐 访问 Node.js 国内网站:https://nodejs.cn/
    请添加图片描述

  2. 📦 选择 LTS(长期支持版)或 Current(最新特性版)。对于大多数用户,LTS 版本是更稳定的选择。

  3. 💾 下载适合你操作系统的安装程序,并按照安装向导的提示进行安装。在大多数情况下,你可以接受默认设置。

  4. 🔧 安装完成后,打开一个新的命令行窗口(终端),输入以下命令来验证安装:

node --version
npm --version

二、安装 Angular CLI 🛠️

Angular CLI 是官方提供的命令行工具,帮助开发者快速生成 Angular 项目和各种代码片段。

步骤

💾 在命令行工具中运行以下命令,使用 npm 安装 Angular CLI:

  1. 📂 打开终端,导航到你想创建项目的位置。
    请添加图片描述

  2. 🏗️ 在命令行工具中运行以下命令,使用 npm 安装 Angular CLI:

npm install -g @angular/cli

🔗 其中 -g 参数表示全局安装,使 CLI 在任何地方都可以使用。
请添加图片描述

  1. 🔍 安装完成后,运行以下命令验证是否安装成功:
ng version

请添加图片描述

📋 如果成功,您会看到 Angular CLI 的版本信息。

三、创建 Angular 项目 📚

通过 Angular CLI 可以轻松创建一个新项目。

步骤

  1. 📁 在命令行中,导航到您想创建项目的目录位置,然后运行以下命令:
ng new my-angular-app

请添加图片描述

🖊️ my-angular-app 是您的项目名称,可以自定义。

  1. 📝 CLI 会询问一些配置选项:
  • 🗺️ 选择 Yes (大多数情况下选择是)。
  • 🎨 Which stylesheet format would you like to use?
  • 📄 您可以选择 CSS、SCSS、Sass 或其他样式预处理器。通常,选择 SCSS 即可。
  • 🔧 CLI 会自动创建项目文件夹并安装所需的依赖,这可能需要几分钟时间。
    请添加图片描述

四、进入项目目录并启动开发服务器 🚀

安装完成后,进入项目目录并启动 Angular 本地开发服务器。

步骤

  1. 📂 进入项目目录:
cd my-angular-app

请添加图片描述

  1. 💻 启动开发服务器:
ng serve

请添加图片描述

🌐 服务器启动后,打开浏览器并访问 http://localhost:4200,您应该会看到 Angular 的欢迎页面,这意味着项目创建成功,开发环境已正确配置。

请添加图片描述

参与点评
读者朋友们,如果您在阅读过程中,对文章的质量、易理解性有任何建议,欢迎在评论区指出,我会认真改进。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/148539.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【2023工业图像异常检测文献】SimpleNet

SimpleNet:ASimpleNetworkforImageAnomalyDetectionandLocalization 1、Background 图像异常检测和定位主要任务是识别并定位图像中异常区域。 工业异常检测最大的难题在于异常样本少,一般采用无监督方法,在训练过程中只使用正常样本。 解决工业异常检…

【CSS in Depth 2 精译_034】5.4 Grid 网格布局的显式网格与隐式网格(下)

当前内容所在位置(可进入专栏查看其他译好的章节内容) 第一章 层叠、优先级与继承(已完结) 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位(已完结) 2.1 相对…

Qt-QTextEdit的输入类控件(30)

目录 描述 相关属性 相关信号 使用 文本内容改变时触发 选中内容时发生改变 光标位置发生改变时触发 可复制,可撤销,可恢复发生改变时触发 undo撤销 redo恢复 copy复制 描述 这是一个多行输入框 有两个很像的,需要注意一下&…

边缘计算网关在工业中的应用

在工业4.0和智能制造的浪潮中,边缘计算网关扮演着至关重要的角色。AIoTedge边缘计算网关,作为工业互联网的关键组件,通过其强大的数据处理能力和智能分析功能,正在改变工业生产的面貌。 边缘计算网关的定义与角色 边缘计算网关是…

Python学习——【4.3】数据容器:str字符串

文章目录 【4.3】数据容器:str字符串一、再识字符串二、字符串的下标(索引)三、字符串的常用操作四、字符串的遍历五、字符串的特点 【4.3】数据容器:str字符串 一、再识字符串 虽然之前已经学习过字符串,但此处我们需…

自制工具 | 局域网文本、文件传输与共享,跨设备剪切板(预览版)

本文将介绍一款自制文本和文件传输工具,可实现局域网内文本/文件传输与共享。支持传输文本,可一键复制、粘贴,文本字数无限制,以缩略形式展示。支持传输文件,文件大小无限制。工作在局域网,含操作校验&…

买家账号被feng?探讨亚马逊、Lazada和速卖通的解决方案

账号登录的安全注意事项 当亚马逊买家账号在多个手机或电脑上进行登录时,这些设备的独特硬件网络参数,如设备型号、地区码、监管码、主板码、WIFI地址等,均会被亚马逊系统读取并记录。特别是在风控加强期间,平台会深入分析这些参…

MemFire Cloud,让Coding更丝滑

作为一个开发者,每天与代码打交道的你,是否总觉得开发流程太繁琐?后端搭建复杂,接口设计麻烦,甚至连数据库配置都让你心烦不已。别担心,今天要给你推荐一个真正能让开发变得丝滑的工具——MemFire Cloud。如…

【Python数据分析】pandas apply自定义函数+分组操作+分析案例

文章目录 1.apply()1.1函数 操作series对象1.2 apply()函数 > 操作DataFrame对象1.3 向量化函数1.4 apply()函数的案例-泰坦尼克号数据集1.5 apply()函数 结合 lambda表达式使用. 2. 分组操作2.1 分组 聚合操作2.2 分组 转换2.3 分组 过滤2.4 DataFrameGroupby df的分组对…

Java面试题大全(全网最全,持续更新)中级(2)

1. 集合与泛型 1.1. 什么是泛型?泛型的优势是什么? 泛型允许类、接口和方法在定义时不指定具体的类型,在使用时再指定类型。优势: 提高代码复用性。提供类型安全,避免强制类型转换带来的 ClassCastException。 pub…

word批量裁剪图片,并调整图片大小,不锁定纵横比

在word中有若干图片待处理,裁剪出指定内容,调整成指定大小。如下是待处理的图片: 这时,选择视图,选择宏,查看宏 选择创建宏 添加cut_picture代码如下,其中上、下、左、右裁剪的橡塑尺寸根据自己…

李飞飞创业公司World Labs:引领AI新方向的“大世界模型”

引言 随着人工智能的不断进步,AI领域涌现了许多新兴技术和研究方向。在这其中,李飞飞创办的World Labs凭借其独特的“空间智能”和“大世界模型”(Large World Model, LWM)理念,迅速成为焦点。尤其是在获得了2.3亿美元…

系统架构设计师教程 第10章 10.5 软件架构演化评估方法笔记

10.5 软件架构演化评估方法 ★★★☆☆ 10.5.1 演化过程已知的评估 目的在于通过对架构演化过程进行度量,比较架构内部结构上的差异以及由此导致的外部质量属性上的变化,对该演化过程中相关质量属性进行评估。 1.评估流程 架构演化评估的基本思路是将架…

IDEA快速查看类中有那些方法的快捷键

IDEA快速查看类中有那些方法的快捷键 1.显示类结构弹出窗口 你可以使用以下快捷键来快速查看当前类的方法和成员: Windows/Linux: Ctrl F12 macOS: Option F12 或 ⌥ F12 这会打开一个弹出窗口,显示当前类的结构,包括方法、字段、构造函…

派可数据:解锁数据潜力,驱动业务价值新增长

前 言 当前,企业数字化转型经过初始探索阶段,各行各业进入高速发展百花齐放的创新应用新阶段。创新应用阶段的核心是企业应用先进的数字技术和工具,对企业多年在全领域积累的各类数据,包括财务、业务、生产、设计、设备、工艺等结…

车载应用的多功能需求与公安、金融等行业的应用特点

随着科技的快速发展,车载应用的功能需求也日益多样化。除了基本的视频监控功能外,现代车载应用还需满足一系列高级功能,如无线网络视频监控、GPS卫星定位、车辆调度、语音报站、行驶信息记录以及多媒体娱乐广告播放等。这些功能在公安、金融等…

Vue 实战教程:从 0 到 1 手把手打造新手友好的聊天应用,附完整开源代码,快速上手前端开发!(包含发送消息、发送表情包、发送文件、下载文件、截图等功能)

b站视频演示效果&#xff1a; 效果图&#xff1a; 完整代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8" /><title>简单聊天功能示例</title><!-- 引入 Vue.js&#xff08;通过 …

深度优先搜索算法及其matlab程序详解

#################本文为学习《图论算法及其MATLAB实现》的学习笔记################# 深度优先搜索算法(DepthFirst Search),简记DFS算法,是图论中的首要算法,其思想方法渗透到图论中的许多算法之中,尤其是DFS算法在求生成树、割点、块和平面图嵌入算法中起着极为关键的作用。…

开源ids snort (windows版)

Snort-IPS-on-Windows-main资源-CSDN文库 GitHub - eldoktor1/Snort-IPS-on-Windows: A comprehensive guide to installing and configuring Snort IPS on Windows, ensuring robust network security 解压后安装 npcap-1.75.exe Snort_2_9_20_Installer.x64.exe 安装后cm…

MiniMind环境搭建训练推理测试

引子 写了那么多篇大模型环境搭建推理部署的blog&#xff0c;如果没记错有几篇就是因为GPU资源hold不住&#xff0c;没有无法得到最终结果的&#xff08;智谱AI GLM-4V-9B视觉大模型环境搭建&推理-CSDN博客&#xff09;。我个人一直觉得大模型发展最终还是要走向端侧&…