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 项目已经部署成功。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python中动画显示与gif生成

1. 动画生成 主要使用的是 matplotlib.animation ,具体示例如下: import matplotlib.pyplot as plt import matplotlib.animation as animation import numpy as np fig, ax plt.subplots() t np.linspace(0, 3, 40) g -9.81 v0 12 z g * t**2 / …

【项目学习01_2024.05.02_Day04】

学习笔记 4 课程分类查询4.1需求分析4.2 接口定义4.3 接口开发4.3.1 树型表查询4.3.2 开发Mapper 4 课程分类查询 4.1需求分析 有课程分类的需求 course_category课程分类表的结构 这张表是一个树型结构,通过父结点id将各元素组成一个树。 利用mybatis-plus-gen…

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

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

IDEA 创建Servlet-HelloWorldServlet

servlet 1.创建空项目2.配置web项目3.配置Tomcat4.加载Tomcat包5.创建HelloWorldServlet类6.配置web.xml7.运行get与post请求 1.创建空项目 2.配置web项目 3.配置Tomcat 4.加载Tomcat包 5.创建HelloWorldServlet类 public class controller extends HttpServlet {Override//get…

java入门-包装类

包装类 Java语言是一个面向对象的语言,但是Java中的基本数据类型却是不面向对象的。基本类型的数据不具备"对象"的特性(没有属性和方法可以调用),因此,java为每种数据类型分别设计了对应的类,即*…

《与 Apollo 共创生态——Apollo7周年大会干货分享》

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” 文章目录 阿波罗X企业自动驾驶解决方案自动驾驶技术提升与挑战自动驾驶系统功能与性能的详细解析<td alig…

在智慧城市的建设中智能车载监控录像机发挥什么作用

引言 随着科技的快速发展&#xff0c;智慧城市的概念逐渐深入人心。在智慧城市的建设中&#xff0c;智能车载监控录像机作为一种重要的技术工具&#xff0c;发挥着越来越重要的作用。本文将从多个方面探讨智能车载监控录像机在智慧城市建设中的作用。 一、智能车载监控录像机概…

纯血鸿蒙APP实战开发——主页瀑布流实现

介绍 本示例介绍使用ArkUIWaterFlow组件和LazyForEach实现瀑布流场景。该场景多用于购物、资讯类应用。 效果图预览 使用说明 加载完成后显示整个列表&#xff0c;超过一屏时可以上下滑动。 实现思路 创建WaterFlowDataSource类&#xff0c;实现IDataSource接口的对象&…

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

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

Vue+Element UI el-progress进度条内显示自定义数字及文字

需求 进度条内展示 具体的数字值&#xff0c;进度条外展示 百分比数值 数据 data() {return {reNum: 3214,rePer:40,warmPer: 40,warmNum:2132,}}因为样式要求&#xff0c;显示的百分数也是自己写的哈 &#xff0c;没有用进度条自带的 代码 <div class"pick"&g…

2024五一杯数学建模A题思路分析-钢板最优切割路径问题

文章目录 1 赛题选题分析 2 解题思路3 最新思路更新 1 赛题 A题 钢板最优切割路径问题 提高钢板下料切割过程中的工作效率&#xff0c;是模具加工企业降低成本和增加经济效益的重要途径&#xff0c;其中钢板切割的路径规划是钢板切割过程的一个关键环节。 钢板切割就是使用特殊…

【C++】哈希的应用---布隆过滤器

目录 1、引入 2、布隆过滤器概念 3、选择哈希函数个数和布隆过滤器长度 4、布隆过滤器的实现 ①框架的搭建 ②设置存在 ③检查存在 ④不支持 reset 5、布隆过滤器计算误差 6、布隆过滤器的优缺点 ①布隆过滤器优点 ②布隆过滤器缺陷 7、布隆过滤器的实际应用 8、完…

KUKA机器人KR3 R540维护保养——涂润滑脂

KUKA机器人在保养时少不了润滑脂&#xff0c;不同型号的机器人需要的润滑脂类型也不一样&#xff0c;保养时注意选用合适的润滑脂。本篇文章以KUKA机器人KR3 R540为例&#xff0c;在轴盖板 A2、A3、A5 的内侧涂上润滑脂。 一、涂润滑脂的作用 拆开机器人一个轴的盖板&am…

Android Kernel源码下载方法

Android Kernel的源码是git管理的&#xff0c;和之前下载的Android源码管理方式不一样&#xff0c;所以下载方式也不一样&#xff0c;直接用git下载就可以了&#xff1b;去网上搜的下载方式五花八门&#xff0c;有很多问题&#xff0c;因为服务器经常无法访问&#xff0c;也一直…

质谱原理与仪器3-笔记

质谱原理与仪器3-笔记 一、质量分析器类型1、聚焦磁场分析器&#xff1a;A、单聚焦磁场分析器B、双聚焦磁场分析器 2、四极杆质量分析器3、飞行时间质谱仪(Time of Flight MS, TOF-MS)4、离子阱质量分析器 二、质谱仪的主要性能指标1、质量范围(mass range)2、分辨率(resolutio…

C语言编译的优化等级应该选哪个?O0、O1、O2还是O3

在使用IDE开发STM32程序时&#xff0c;IDE一般都会提供优化等级设置的选项&#xff0c;例如下图中KEIL软件优化等级的设置。 从上图中也可以看出&#xff0c;设置不同的优化等级&#xff0c;实际上是修改了编译器的编译参数。这个编译器是由ARM公司提供的C/C编译器armclang或者…

家里挂宗教画是否合适?

凡在我们这改名取名的客户&#xff0c;峰民都会建议他们挂一副这样或那样的画&#xff0c;这也是根据你命中的五行来给你助运的。而现在许多人都有自己的宗教信仰&#xff0c;有些人会在家供奉佛像&#xff0c;有些人甚至会在家里挂上宗教画&#xff0c;亦同样产生五行效应&…

持续更新|UNIAPP适配APP遇到的问题以及解决方案

在使用UNIAPP开发APP的时候遇到的一些奇奇怪怪问题记录 组件样式丢失 问题&#xff1a;组件引入界面中&#xff0c;在小程序和H5环境下样式正常&#xff0c;而在APP中却出现高度异常问题 解决&#xff1a;增加view标签将组件包裹起来即可正常显示 解决前&#xff1a; 解决后…

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

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

企业信创中间件落地的 9 个实践经验:从选型测试到使用和运维

背景 随着各个行业对IT系统建设自主可控要求的提升&#xff0c;各个企业对信创中间件的使用范围也越来越广、深度越来越深。与此同时&#xff0c;信创中间件涉及的产品和种类也是多种多样&#xff0c;对于一个企业而言要从哪些维度来评估信创中间件&#xff0c;从而选择适合自…