Angular 安装与创建第一项目

news2024/10/7 18:26:40

1. 下载nodejs 并且安装

https://nodejs.org/en

2. 打开命令窗口,验证是否安装成功

C:\Users\Harry>node -v
v18.16.0

C:\Users\Harry>npm -v
9.5.1

3. 安装Angular CLI

C:\Users\Harry>npm install -g @angular/cli

added 239 packages in 9s
npm notice
npm notice New minor version of npm available! 9.6.7 -> 9.7.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.7.1
npm notice Run npm install -g npm@9.7.1 to update!
npm notice

经过不算漫长的等待,你的Angular CLI就装好了。确认一下:

C:\Users\Harry>ng v

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 16.1.0
Node: 18.16.0
Package Manager: npm 9.5.1
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1601.0 (cli-only)
@angular-devkit/core         16.1.0 (cli-only)
@angular-devkit/schematics   16.1.0 (cli-only)
@schematics/angular          16.1.0 (cli-only)

4. 新建Angular项目

C:\Users\Harry>ng new ai_service_ui
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

CREATE ai_service_ui/angular.json (2735 bytes)
CREATE ai_service_ui/package.json (1044 bytes)
CREATE ai_service_ui/README.md (1065 bytes)
CREATE ai_service_ui/tsconfig.json (901 bytes)

5. 启动项目

cd 你的项目中

C:\Users\Harry>cd ai_service_ui

然后启动

C:\Users\Harry\ai_service_ui>ng serve
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes

Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:

    ng analytics disable

Global setting: enabled
Local setting: enabled
Effective status: enabled
√ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.28 MB |
polyfills.js          | polyfills     | 332.99 kB |
styles.css, styles.js | styles        | 230.29 kB |
main.js               | main          |  48.11 kB |
runtime.js            | runtime       |   6.52 kB |

                      | Initial Total |   2.88 MB

Build at: 2023-06-20T14:58:31.261Z - Hash: cbf12963274fa959 - Time: 15056ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

6. 访问页面 http://localhost:4200/

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

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

相关文章

Python Anaconda创建虚拟环境及Pycharm使用虚拟环境

目录 前言 一、Anaconda与Pycharm 二、conda常用命令 三、Pycharm使用虚拟环境 总结 前言 我们在做开发任务时可能会创建多个项目,这些项目可能会依赖于不同的Python环境。比如有的用到Python3.6、有的用到Python3.7;有的用Pytorch开发、有的用Tens…

SpringBoot整合模板引擎Thymeleaf(4)

版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl 概述 在之前的教程中,我们介绍了Thymeleaf的基础知识。在此,以案例形式详细介绍Thymeleaf的基本使用。 项目结构 要点概述: 1、在st…

性能优化往往成为 Android 高工的一道分水岭

不论是大厂小厂,对于Android开发者来说,性能优化往往成为了是否真正配得上高级开发的一道分水岭,性能优化也是如今大厂在招聘要求中作出要求,且会高频提问: Android的性能优化,主要从以下几个方面开展&…

论文解读|基于RealSense的三维散乱部件点云分割

原创 | 文 BFT机器人 01 摘要 本文提出了一种针对垃圾拾取系统中点云分割的算法。该算法使用低成本的深度相机RealSense获取点云数据,并对点云数据进行滤波处理和分割,最终将分割后的子块片段独立地连接起来,形成完整的工件模型。通过测试案…

spark 数据倾斜处理

spark优化总结: 一、spark 代码优 六大代码优化: 避免创建重复的RDD 尽可能复用同一个RDD 对多次使用的RDD进行持久化 尽量避免使用shuffle类算子 使用map-side预聚合的shuffle操作 使用高性能的算子 广播大变量 使用Kryo优化序列化性能 优化数据结构 使用高性能的库fa…

怎么通过电商数据分析选择好货源?

什么样的货源才算好货源?自然是拿货成本低、销售前景(趋势)好、利润度高、去库存快的。这就需要综合销售、库存、财务、采购等多部门环节的数据进行分析挖掘,最终才能找到符合需求的供货商以及商品清单。在这个过程中,…

vue3引入uview-plus3.0移动组件库

vue3引入uview-plus3.0移动组件库 引入流程 导入插件到项目 项目地址:https://ext.dcloud.net.cn/plugin?nameuview-plus 在main.js引入uview // main.js import uviewPlus from /uni_modules/uview-plus// #ifdef VUE3 import { createSSRApp } from vue expor…

红日ATTCK系列靶场(-)简记

Step 1>》信息收集 nmap 发现80、 3306 nmap -T4 -O 192.168.92.100 访问80端口 dirsearch(御剑)扫描 发现:/phpMyadmin Step 2 》漏洞利用 1.弱口令 http://192.168.92.100/phpMyadmin root/root 登录成功 2.getshell select basedir //查绝对路径 int…

Flink 学习三 Flink 流 process function API

Flink 学习三 Flink 流&process function API 1.Flink 多流操作 1.1.split 分流 (deprecated) 把一个数据流根据数据分成多个数据流 1.2 版本后移除 1.2.分流操作 (使用侧流输出) public class _02_SplitStream {public static void main(String[] args) throws Excep…

Python接口自动化之登录接口测试

01 什么是接口? 接口:检测外部系统与系统之间以及内部各个子系统之间的交互点。 通俗来说,接口就是连接前后端的桥梁,接口测试可以简单理解为脱离了前端的功能测试。一个又一个的接口就对应功能测试内一个又一个的功能。但注意&am…

前端vue入门(纯代码)10

【10.TodoList-自定义事件】 TodoList案例的完整代码请点击此处粉色文字 TodoList案例中的子组件TodoHeader给父组件App传递数据 App.vue文件中需要修改的代码 原本&#xff1a; Todo案例中子给父传递数据【通信】的方法&#xff1a;props <!-- 把App组件里的方法addTodo(…

2023 Nature 健康系统规模的语言模型是通用预测引擎

文章目录 一、论文关键信息二、论文主要内容三、总结与讨论🍉 CSDN 叶庭云:https://yetingyun.blog.csdn.net/ 一、论文关键信息 论文标题:Health system-scale language models are all-purpose prediction engines 期刊信息:2023 Nature 论文地址:h

Armbian 23.05(代号Suni)操作系统已全面上市

Armbian社区通知我们&#xff0c;适用于ARM和RISC-V单板计算机以及其他平台的Armbian 23.05&#xff08;代号Suni&#xff09;操作系统已全面上市。 在Armbian 23.02发布三个月后&#xff0c;Armbian 23.05版本是第一个在完全重构的构建框架上创建的版本&#xff0c;基于即将发…

Flink 学习八 Flink 容错机制 checkpoint savepoint

Flink 学习八 Flink 容错机制 & checkpoint & savepoint https://nightlies.apache.org/flink/flink-docs-release-1.14/docs/concepts/stateful-stream-processing/ 1.容错基础概念 上一节讲述状态后端;Flink是一个 带状态stateful 的数据处理系统,在处理数据的过程…

基于深度学习的高精度蜜蜂检测识别系统(PyTorch+Pyside6+YOLOv5模型)

摘要&#xff1a;基于深度学习的高精度蜜蜂检测识别系统可用于日常生活中或野外来检测与定位蜜蜂目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的蜜蜂目标检测识别&#xff0c;另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标检测模型…

VUE 2X ClassStyle ⑦

目录 文章有误请指正&#xff0c;如果觉得对你有用&#xff0c;请点三连一波&#xff0c;蟹蟹支持✨ V u e j s Vuejs Vuejs C l a s s Class Class与 S t y l e Style Style绑定总结 文章有误请指正&#xff0c;如果觉得对你有用&#xff0c;请点三连一波&#xff0c;蟹蟹支持…

初始java String类型

文章目录 初始java String类型理解 next和nextLine的区别new String(); 括号里面可以放什么呢放byte类型的数组放byte类型的数组&#xff0c;索引&#xff0c;长度放char类型的数组放char类型的数组&#xff0c;索引&#xff0c;长度 String 类型对应同一字符串&#xff0c;是否…

boost 异步服务器开发

目录 1、 异步服务器简介 2、异步服务器开发 2.1 会话类 2.1.1 会话类头文件 2.1.2 会话类源文件 2.2 服务类 2.2.1 服务类头文件 2.2.2 服务类源文件 2.3 主函数 3、异步服务器测试 4、当前异步服务器存在的问题及后续优化 1、 异步服务器简介 boost 异步服务器分为…

【Pytest实战】Pytest 如何生成优美的测试报告(allure-pytest)

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。&#x1f60a; 座右铭&#xff1a;不想…

施耐德电气:以数字化利器,助力中国产业“双转型”

近日&#xff0c;以“创新融生态&#xff0c;加速双转型”为主题的2023施耐德电气创新峰会在乌镇圆满举行。大会上&#xff0c;数千位行业专家、业界领袖和专业人士共聚一堂&#xff0c;共同探讨中国产业如何迈向“数字化”和“绿色低碳”的双转型&#xff0c;旨在为中国产业的…