Angular基础-搭建Angular运行环境

这篇文章介绍了在Angular项目中进行开发环境搭建的关键步骤。包括node.js安装和配置、安装Angular CLI工具、安装angular-router、创建Angular项目等步骤。这篇文章为读者提供了清晰的指南,帮助他们快速搭建Angular开发环境,为后续的项目开发奠定基础。


​一、node.js 安装和配置

1、下载安装node.js

官方网站下载地址:Node.js (nodejs.org)

选择长期维护版本(LTS)下载。

001 - Node.js安装教程


下载完成后,双击安装包,安装Node.js,一直点下一步,直到完成。

002 - Node.js安装教程

003 1 - Node.js安装教程

测试安装是否成功。

控制台查看Node.js版本:

node -v     // 显示node.js版本npm -v      // 显示npm版本

如果出现版本号则说明安装成功。

004 - Node.js安装教程

成功显示版本说明安装成功。


2、环境配置

配置安装目录和缓存目录。

我们需要设置全局安装包的目录路径、设置 npm 包的缓存路径

安装目录下新建 “node_global”和 “node_cache” 文件夹

005 - Node.js安装教程

创建完毕后,使用管理员身份打开cmd命令窗口,输入:

npm config set prefix "C:\Program Files\nodejs\node_global" //设置全局安装包的目录路径
npm config set cache "C:\Program Files\nodejs\node_cache" //设置 npm 包的缓存路径

006 - Node.js安装教程


3、配置环境变量

首先我们检查刚刚的配置:

命令行输入:

npm config list

image 2 - Node.js安装教程

可以看到我们刚刚设置的配置:

cache=”C:\ProgramFiles\nodejs\node_cache”
prefix=”C:\ProgramFi1es\nodejs\node_g1oba1″

复制prefix的值:C:\ProgramFi1es\nodejs\node_g1oba1

此电脑右键>属性>高级系统设置>环境变量,
将prefix的值复制到环境变量系统变量的Path。

OUM8 VYCS4V3K0MYR - Node.js安装教程


4、测试是否安装成功

配置完成后,全局安装一个最常用的 express 模块进行测试

npm install express -g   // -g代表全局安装

出现以下界面即为配置成功

010 - Node.js安装教程


5、设置npm下载源为淘宝镜像源

将npm的模块下载仓库从默认的国外站点改为国内的站点,这样下载模块的速度才能比较快,现在用的都是淘宝镜像源(https://registry.npm.taobao.org),使用淘宝镜像源方式:

npm安装淘宝镜像

npm config set registry https://registry.npmmirror.com

查看是否成功:

npm config set registry https://registry.npmmirror.com

image - Node.js安装教程


二、安装Angular及Angular CLI工具

Angular CLI 是一个基于 Angular 的官方脚手架工具,用于创建和管理 Angular 项目。当执行 npm install @angular/cli 时,它会安装 Angular CLI 的最新版本,并且这个版本中包含了 Angular 的依赖。如果要安装指定版本则在@angular/cli增加@+版本号就可以,比如npm install @angular/cli@15 就是安装 Angular 版本 ^15.0.0。

Angular CLI 除了包含 Angular 本身,还提供了一套项目搭建和开发的工具,例如项目初始化、开发服务器、构建工具等。一旦安装完成,您可以使用 ng new 命令来创建新的 Angular 项目,并且可以通过 Angular CLI 提供的各种命令和配置来进行项目开发和管理。

简单来说,就是安装Angular CLI工具时包含Angular的安装,不需要单独安装Angular。

命令行输入

npm i -g @angular/cli@15

请在此添加图片描述


三、创建Angular项目

安装完成后我们新建一个项目,这里我的项目叫 empower-cloud-assistant,输入命令:

ng new empower-cloud-assistant && cd empower-cloud-assistant

请在此添加图片描述

创建过程中,会需要做出几个选择:

Would you like to share pseudonymous usage data about this project with the Angular Team

at Google under Google’s Privacy Policy 这个是问你愿不愿意将使用数据基于谷歌的隐私政策提供给 Angular 团队,这个我选的否。

其他的我都直接 Enter,直接选择是。

创建项目的命令执行完成后,我们打开命令行所处的文件夹,可以看到项目 empower-cloud-assistant 已经被创建,并且我们通过cd命令将目录切换到了该项目路径下。

请在此添加图片描述


四、引入Angular组件库/框架

接着我们引入需要的 Angular组件库/框架,这里我引入的 DevUI 的框架,输入命令:

ng add ng-devui-admin

系统会自动下载 ng-devui-admin 这个框架。

请在此添加图片描述


五、启动项目

下载完成后,我们启动这个项目,输入命令:

npm start

请在此添加图片描述

请在此添加图片描述

启动成功。

提示我们项目发布 localhost 的 4200 端口,我们浏览器访问:

请在此添加图片描述

请在此添加图片描述

可以看到我们的 Angular 项目已经部署成功。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Debug】TensorRT报错汇总

搭建TensorRT过程参见:【通俗易懂】Windows系统安装TensorRT 下面是运行中的问题汇总及解决。 报错1. No module named ‘pycuda’ 解决: pip install pycuda报错2. AttributeError: ‘tensorrt.tensorrt.Builder’ object has no attribute ‘max_wor…

在ubuntu 24.04 上安装vmware workstation 17.5.1

ubuntu安装在新组装的i9 14900机器上,用来学习笨叔的ARM64体系结构编程,也熟悉Linux的用法。但有时候写文档总是不方便,还是需要window来用。因此想在ubuntu 24.04上安装Linux版本的vmware worksation 17.5.1以虚拟机的方式安装windows 11。其…

信息技术内涵及意义

一、信息技术及其演进趋势 (一)信息技术概况概念 信息技术(Information Technology,IT)指“应用在信息加工和处理中的科学、技术与工程的训练方法与管理技巧;上述方法和技巧的应用;计算机及其…

JavaScript+B/S版云LIS系统源码ASP.NET CORE 3.1 MVC云LIS系统如何实现样本追踪的预警功能?医院云LIS检验系统源码

JavaScriptB/S版云LIS系统源码ASP.NET CORE 3.1 MVC云LIS系统如何实现样本追踪的预警功能?医院云LIS检验系统源码 实验室信息管理系统(Trasen Laboratory Information Management System)是一套专业的医疗实验室信息管理软件,包含…

【C++庖丁解牛】C++11---新的类的功能 | 可变参数模板

🍁你好,我是 RO-BERRY 📗 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 🎄感谢你的陪伴与支持 ,故事既有了开头,就要画上一个完美的句号,让我们一起加油 目录 1.新的类功能1.1 默认成员…

pyqt标签常用qss格式设置

pyqt标签常用qss格式设置 QSS介绍标签常用的QSS设置效果代码 QSS介绍 Qt Style Sheets (QSS) 是 Qt 框架中用于定制应用程序界面样式的一种语言。它类似于网页开发中的 CSS(Cascading Style Sheets),但专门为 Qt 应用程序设计。使用 QSS&…

24.4.28(板刷dp,拓扑判环,区间dp+容斥算回文串总数)

星期一: 昨晚cf又掉分,小掉不算掉 补ABC350 D atc传送门 思路:对每个连通块,使其成为一个完全图,完全图的边数为 n*(n-1)/2 , 答案加上每个连通块成为完全图后的…

第十五届蓝桥杯Java软件开发大学B组自我经验小结

自我介绍 23届大一 双非 计院科班 软件工程 江苏人在吉林上大学 Java蒟蒻 在学校的宣传下 有幸参加了第十五届蓝桥杯Java大学b组省赛 蓝桥杯说明 就是一个算法比赛吧 考试时间9.00到1.00 四小时 带准考证和身份证和笔 草稿纸会发 赛制是IOC就是不会给任何反馈 就是你…

富唯智能案例|双3D相机引导衔架抓取铝型材

随着制造业的快速发展和自动化水平的不断提升,铝型材的自动化抓取和加工成为行业内的一大技术难题。铝型材因其轻便、耐腐蚀、易加工等特点,广泛应用于建筑、汽车、电子等领域。然而,铝型材的形状多样、尺寸不一,以及生产线上的高…

【算法系列】哈希表

目录 哈希表总结 leetcode题目 一、两数之和 二、判定是否互为字符重排 三、存在重复元素 四、存在重复元素 II 五、字母异位词分组 六、在长度2N的数组中找出重复N次的元素 七、两个数组的交集 八、两个数组的交集 II 九、两句话中的不常见单词 哈希表总结 1.存储数…

C语言/数据结构——每日一题(链表的中间节点)

一.前言 今天我在LeetCode刷到了一道单链表题,想着和大家分享一下这道题:https://leetcode.cn/problems/middle-of-the-linked-list。废话不多说让我们开始今天的知识分享吧。 二.正文 1.1题目描述 1.2题目分析 这道题有一个非常简便的方法——快慢指…

袁庭新ES系列17节|Spring Data Elasticsearch基础

前言 为了简化对Elasticsearch的操作Spring Data提供了Spring Data Elasticsearch。Spring Data Elasticsearch是Spring Data技术对Elasticsearch原生API封装之后的产物,它通过对原生API的封装,使得程序员可以简单的对Elasticsearch进行各种操作。接下来…

信融算网,创启未来 | 移动云一体化算网调度平台发布

4月29日上午,中国移动算力网络大会“自主可控算力网络应用”分论坛在苏州召开,中国移动云能力中心副总经理吴世俊、中国移动信息技术中心副总经理陈国出席论坛并发表致辞。论坛发布全国首个实现通算、智算、超算、量子计算,以及网络、安全一站…

全栈开发之路——前端篇(2)文件、组件与setup引入

全栈开发一条龙——前端篇 第一篇:框架确定、ide设置与项目创建 本文系该系列第二篇,主要将介绍各个文件的意义、组件结构与导入以及setup的引入。 目录 一、src外文件介绍.gitignore为git忽略文件env.d.ts用于识别其他文件index.htmljson文件vite.confi…

【JAVASE】带你了解的方法魅力

✅作者简介:大家好,我是橘橙黄又青,一个想要与大家共同进步的男人😉😉 🍎个人主页:橘橙黄又青-CSDN博客 目标: 1. 掌握方法的定义以及使用 2. 掌握方法传参 3. 掌握方法重载 …

[C++][算法基础]四种基本背包问题(动态规划)

1. 01背包问题 有 𝑁 件物品和一个容量是 𝑉 的背包。每件物品只能使用一次。 第 𝑖 件物品的体积是 𝑣𝑖,价值是 𝑤𝑖。 求解将哪些物品装入背包,可使这些物品的总体…

10.JAVAEE之网络编程

1.网络编程 通过网络,让两个主机之间能够进行通信 >基于这样的通信来完成一定的功能进行网络编程的时候,需要操作系统给咱们提供一组 AP1, 通过这些 API才能完成编程(API 可以认为是 应用层 和 传输层 之间交互的路径)(API:Socket API相当…

【树——数据结构】

文章目录 1.基本概念2.基本术语1.结点之间的关系描述2.结点,树的属性描述3.有序树,无序树4.森林 3.树的性质考点1考点2考点3考点4 4.树的存储结构5.树和森林的遍历 1.基本概念 结点,根节点,分支结点,叶子结点&#xf…

Redis系列-1 Redis介绍

背景: 本文介绍Redis相关知识,包括Redis的使用、单线程机制、事务、内存过期和淘汰机制。后续将在《三方件-3 Redis持久化机制》中介绍Redis基于RDB和AOF的持久化机制;在《三方件-4 Redis集群》介绍主从、哨兵和Cluster集群相关的内容&#…

python 11Pandas数据可视化实验

实验目的: 学会使用Pandas操作数据集,并进行可视化。 数据集描述: 该数据集是CNKI中与“中药毒理反应”相关的文献信息,包含文章题目、作者、来源(出版社)、摘要、发表时间等信息。 实验要求&#xff1…