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 get registry

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.rhkb.cn/news/322713.html

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

相关文章

改进灰狼算法优化随机森林回归预测

灰狼算法(Grey Wolf Optimization,GWO)是一种基于自然界灰狼行为的启发式优化算法,在2014年被提出。该算法模仿了灰狼群体中不同等级的灰狼间的优势竞争和合作行为,通过不断搜索最优解来解决复杂的优化问题。 灰狼算法…

如何使用ESOP电子作业指导书系统提高工作效率?

在当今工业生产和制造领域,实现作业标准化是提高生产效率、保证产品质量、提升企业竞争力的重要途径。而 ESOP 无纸化指导书系统作为一种创新的技术手段,正逐渐成为实现作业标准化的关键所在。 ESOP 无纸化指导书系统通过数字化的方式,将传统…

docker学习笔记(四)制作镜像

目录 第1步:编辑Dockerfile 第2步:编辑requirements.txt文件 第3步:编辑app.py文件,我们的程序文件 第4步:生成镜像文件 第5步:使用镜像,启动容器 第6步: 启动redis容器、将容器…

MySQL中JOIN连接的实现算法

目录 嵌套循环算法(NLJ) 简单嵌套循环(SNLJ) 索引嵌套循环(INLJ) 块嵌套循环(BNLJ) 三种算法比较 哈希连接算法(Hash Join) 注意事项: 工…

93、动态规划-最长回文子串

思路 首先从暴力递归开始,回文首尾指针相向运动肯定想等。就是回文,代码如下: public String longestPalindrome(String s) {if (s null || s.length() 0) {return "";}return longestPalindromeHelper(s, 0, s.length() - 1);…

django中的cookie与session

获取cookie request.COOKIE.GET 使用cookie response.set-cookie views.py from django.http import HttpResponse from django.shortcuts import render# Create your views here. def cookie_test(request):r HttpResponse("hello world")r.set_cookie(lan, py…

【第38天】SQL进阶-SQL设计优化-范式设计(SQL 小虚竹)

回城传送–》《100天精通MYSQL从入门到就业》 文章目录 零、前言一、练习题目二、SQL思路初始化数据什么是范式设计第一范式(1NF)第二范式(2NF)第三范式(3NF) 三、总结四、参考 零、前言 今天是学习 SQL …

Sealos急速部署生产用k8s集群

最近一段时间部署k8s全部使用sealos了,整体使用感觉良好,基本没有什么坑。推荐给大家。 使用 Sealos,可以安装一个不包含任何组件的裸 Kubernetes 集群。 最大的好处是提供 99 年证书,用到我跑路是足够了。不用像之前kubeadm安装…

CISCN 2023 初赛

Web unzip 文件上传页面 upload.php页面源码显示了出来 <?php error_reporting(0); highlight_file(__FILE__);$finfo finfo_open(FILEINFO_MIME_TYPE); if (finfo_file($finfo, $_FILES["file"]["tmp_name"]) application/zip){exec(cd /tmp &am…

中间件之异步通讯组件RabbitMQ进阶

这里我们必须尽可能确保MQ消息的可靠性&#xff0c;即&#xff1a;消息应该至少被消费者处理1次 那么问题来了&#xff1a; 我们该如何确保MQ消息的可靠性&#xff1f; 如果真的发送失败&#xff0c;有没有其它的兜底方案&#xff1f; 首先&#xff0c;我们一起分析一下消息…

文本批量操作技巧:内容查找不再繁琐,自动化批量移动至指定文件夹

在文本处理和信息管理的日常工作中&#xff0c;我们经常需要处理大量的文件和数据。面对这些海量的信息&#xff0c;如何快速而准确地查找特定的内容&#xff0c;并将它们批量移动至指定的文件夹&#xff0c;成为了一项关键的技能。本文将介绍办公提效工具一些实用的文本批量操…

企业车辆管理系统参考论文(论文 + 源码)

【免费】关于企业车辆管理系统.zip资源-CSDN文库https://download.csdn.net/download/JW_559/89282550 企业车辆管理系统 摘 要 随着经济的日益增长,车辆作为最重要的交通工具,在企事业单位中得以普及,单位的车辆数目已经远远不止简单的几辆,与此同时就产生了车辆资源的合理…

实践精益理念:精益生产培训助力企业持续增长

在日益激烈的市场竞争中&#xff0c;企业如何寻找持续增长的动力&#xff0c;提升整体创新能力和核心竞争力&#xff1f;张驰咨询通过多年来的深入研究和实践&#xff0c;结合众多企业的实际情况&#xff0c;带来了精益生产培训的全新视角。 在近期举办的一次精益生产培训中&am…

DDR4 SDRAM 和DDR5 SDRAM的区别

DDR4 SDRAM和DDR5 SDRAM作为两代内存技术,它们在多个方面展现出了显著的差异和改进,以下是对两者区别的详细介绍: 性能与频率 DDR4 SDRAM 的标准工作频率范围从1600MHz(DDR4-1600)到3200MHz(DDR4-3200),在非超频情况下。它的数据传输速率和带宽因此在该范围内。DDR5 S…

JavaScript手写专题——图片懒加载、滚动节流、防抖手写

图片懒加载场景&#xff1a;在一些图片量比较大的网站&#xff08;比如电商网站首页&#xff0c;或者团购网站、小游戏首页等&#xff09;&#xff0c;如果我们尝试在用户打开页面的时候&#xff0c;就把所有的图片资源加载完毕&#xff0c;那么很可能会造成白屏、卡顿等现象&a…

新手向的s2-046漏洞复现

一、前期准备 1.docker容器 作为第一次接触struts2漏洞类型的小白&#xff0c;第一步从搭建环境开始。首先我们需要准备一个服务器或者本地系统&#xff0c;我这里是使用本地的kali&#xff0c;kali里面需要有docker容器&#xff0c;docker容器的安装教程请自行搜索&#xff0c…

【C++】STL — List的接口讲解 +详细模拟实现

前言&#xff1a; 本章我们将学习STL中另一个重要的类模板list… list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭代。list的底层是带头双向循环链表结构&#xff0c;双向链表中每个元素存储在互不相关的独立节点中&#xf…

Prompt提示词教程 | 提示工程指南 | 提示词示例 入门篇

在上一节中&#xff0c;我们介绍并给出了如何赋能大语言模型的基本示例。如果还没看而且是刚入门的同学建议看下&#xff0c;有个基本概念。 Prompt提示词教程 | 提示工程指南 | 提示工程简介https://blog.csdn.net/HRG520JN/article/details/138523705在本节中&#xff0c;我…

2024 GESP6级 编程第一题 游戏

题目描述 你有四个正整数 &#xff0c;并准备用它们玩一个简单的小游戏。 在一轮游戏操作中&#xff0c;你可以选择将 减去 &#xff0c;或是将 减去 。游戏将会进行多轮操作&#xff0c;直到当 时游戏结束。 你想知道游戏结束时有多少种不同的游戏操作序列。两种游戏操作…

为软件教学文档增加实践能力

为了更方便软件教学&#xff0c;我们在凌鲨(OpenLinkSaas)上增加了公共资源引用的功能。 目前可以被引用的公共资源: 微应用常用软件公共知识库Docker模板 引用公共资源 引用微应用 目前微应用包含了主流数据库&#xff0c;终端等工具&#xff0c;可以方便的进行各种相关实…