Angular 项目学习总结

angular + material 从0开始小项目开发(以项目入手学习)(一) 自学angular有一段时间了,由于本人重度懒癌,导致学习进度严重缓慢,因此决定开始以记录的方式进行…从这篇博客开始记录学习的过程,更新多少期就要看缘分了… 闲话少叙,现在开始第一篇: 搭建项目 开发系统:macos + webstorm 1,使用angular-cli来搭建 如果没有装过angular-cli,需要先安装angular-cli,如果不确定自己是否装过,可以在控制台输入下ng 看下是否有这个命令,如果没有会显示 command not found 之类的,那么使用npm 安装 命令为: np 阅读详情

用Angular作前端开发框架,nodejs做后端(angular必须基于nodejs)

几个关键的文件夹:

node_modules/: 通过node 的npm(软件包管理系统)安装的angular核心包和第三方包

src/:源代码文件夹

src/app/: app 组件文件夹

src/index.html:开始编译的根html文件

.gcloudignore: 在GCP上部署时需要的文件,记录了不需要上传的文件夹(如node_modules)

angular.json: angular配置文件,记录服务器配置,静态文件路径灯,包配置,根目录信息等

app.yaml:在GCP上部署时需要的文件,记录运行环境(runtime:nodejs16)

package.json: 在GCP上部署时需要的文件,记录依赖包和版本号,服务器文件名。

package-lock.json:在GCP上部署时需要的文件, 记录在package.json中包的下载路径。

server.js: nodejs服务器程序

dist/: ng build 生成的工程文件,也是最后要部署上传的文件

在每个组件,有四个文件:

.html, .css, .spec.ts, .ts

其中.ts是typescript文件,类似于js

.spec.ts是单元测试文件 一般用不到

遇到的bug: 配置路由之后,访问其中一个字组件,刷新浏览器出现“Refused to apply style from '...' because its MIME type ('text/html') is not a supported stylesheet” ,显示目标文件mime类型错误,但其实是找不到对应的css和js文件。 最后找到的问题是在index.html里

<base href="">

把基地址设成了 “”, 这样在每次加载css和js文件的时候会从当前路径寻址,因为子组件的url路径会变化 这样就会找不到对应文件

改成

<base href="/">

这样就好了

当时是新建了一个项目, 一个个文件复制 看结果 对比 最后才找到

记录一下防止以后再遇到这个bug

Angular 8 从基础到项目实战 完整的Angular学习路径 注意nodejs版本、以及angular-cli版本 ng --version 查看是否安装成功 ng new taskAngular 生成项目cli 目录结构介绍 src/app ==项目开发的主要目录== src/assets ==项目静态文件== src/environments ==项目的环境变量== src/main.ts ==项目的根文件== src/polyfills.ts ==设置动画后处理js对各浏览器厂商的兼容性== src/styles.scss ==全局 阅读详情

相关推荐

ICM42670-P嵌入式开发实战:从寄存器配置到姿态解算全解析

本文全面解析ICM42670-P高性能6轴MEMS运动传感器的嵌入式开发实战,涵盖寄存器配置、数据采集滤波、低功耗优化及姿态解算算法。通过详细代码示例和应用案例,帮助开发者快速掌握从硬件对接到姿态跟踪系统的完整开发流程,适用于可穿戴设备和智能家居等低功耗应用场景。

gold的博客 1068

angular框架简介基础与使用(全文2w8字)前端框架angular

angular作为一个完整的框架,模块化做的特别好。内置的路由,httpclient,rxjs,除了界面相关的组件库,几乎可以不用任何第三方工具库就可以完成一个spa项目。对typescript支持非常好,或者说只有typescript以一个选择。Angular是三大巨头中,框架版本升级最容易的,虽然目前在国内不是特别火。...

几百块的博客 2万+

emwin与Modbus通信结合:项目实例

通过实际项目讲解emwin界面设计与Modbus通信协议的融合应用,深入剖析数据交互流程。掌握emwin在工业控制场景中的实用技巧,提升系统人机交互与稳定通信能力。

weixin_34618526的博客 483

【前端】1. Angular环境搭建、创建Angular项目、运行Angular项目

一、Angular环境搭建 (一)下载并且安装Node.js 官方网站下载:https://nodejs.org/en/ 安装angular的计算机上面必须安装最新的nodejs–注意安装nodejs稳定版本 双击点开下载好的安装包 进入安装界面,点next 选择nodejs安装路径,默认是c盘,这里改成d盘(选择内存比较大的盘,尽量不要安装在c盘里) next下一步,准备安装 安...

weixin_43938259的博客 1万+

在 Dify 平台部署一个 知识库问答(KBQA) 工作流

加强检索约束,Prompt 加限制(“仅基于知识库回答”):启用缓存,使用轻量级 LLM(如 Mistral-7B)(OpenAI Embedding、M3E、BGE等)(支持 PDF/TXT/Markdown/Word)(GPU/CPU 资源,用于向量数据库和模型推理)企业内部文档(PDF/Word/Excel)网页爬取数据(Markdown/HTML)分块大小(太小→信息碎片化,太大→噪声多)相似度阈值(太高→漏检,太低→噪声多)(是否返回正确文档)结构化数据(数据库/API)

井底小蛙的博客 1520

Halcon实战:基于图像清晰度自动筛选最佳对焦图片

本文详细介绍了如何使用Halcon实现基于图像清晰度的自动筛选最佳对焦图片技术。通过分析灰度值统计和标准差等核心指标,结合实战代码示例,帮助开发者高效处理工业检测中的对焦问题,提升自动化检测的准确性和效率。

weixin_27015733的博客 440

前端:基础、Angular、node.js的后端

文章目录Angularnpm Angular npm NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用 ...

jeason_chan_zju的博客 880

《生化危机9:安魂曲》D加密免BIOS破解方案详解

数字版权管理(DRM)技术通过加密手段保护软件版权,Denuvo(D加密)作为主流方案常应用于3A游戏。其原理是通过实时验证机制阻止未授权访问,但可能影响性能表现。本文以《生化危机9》为例,解析一种免BIOS修改的D加密绕过方案,该方案通过授权启动器模拟正版验证流程,保持系统零侵入性。实测表明,该方法在GTX 1060至RTX 3070等多硬件平台均能稳定运行,支持MOD扩展且兼容Reshade画质增强,为玩家提供开箱即用的绿色版体验。

weixin_33898233的博客 926

前端项目创建流程

1.安装node.js node -v 查看是否安装成功; 2.安装node.js镜像加速器 (npm/cnpm) 一般安装node.js会自动安装镜像加速器; 3.安装vue/cli----- (项目的搭建) 安装命令:npm install -g @vue/cli 查看是否安装成功命令: vue --version4.启动项目 (可以在cmd中启动,也可以在windows powerShell中启动) 1.进入项目存放的目录; c...

m0_64733039的博客 2711

【AHE数据集】中国2019年多源热排放数据集-500m空间分辨率

【AHE数据集】中国2019年多源热排放数据集

WW、forever的博客 411

3. NVIDIA GPU Xid 常见错误码全解析、故障定位与标准化处理方案

摘要: Xid是NVIDIA显卡驱动记录的硬件/软件异常日志,通过dmesg等工具可获取,包含PCI总线、GPU编号、故障码等信息,是诊断显卡问题的核心依据。Xid故障分为四类:应用程序类(如代码错误,Xid13/31)、显存ECC硬件类(如显存损坏,Xid48/63)、链路/供电温控类(如PCIe故障,Xid74/79)和GSP固件类(如静电干扰,Xid119/154)。排查流程包括日志采集、软件修复(如重启进程、升级驱动)、硬件检查(如PCIe链路状态)及断电复位(针对GSP故障)。预防措施包括监控EC

jundao1997的专栏 693

Angular学习总结-入门篇

目录 一、Angular介绍 二、 学习Angular必备基础 三、 Angular环境搭建 四、 Angular创建项目 五、 Angular环境搭建以及创建项目的时候可能遇到的错误 六、Angular开发工具介绍 Angular项目结构介绍 创建组件/服务 angular语法 变量 ngFor循环+ngIf判断+ngSwitch 动态修改样式ngClass+ngStyle 双向数据绑定 管道(Pipe) 获取dom节点 ng...

小冷在努力~ 1万+

【100%通过率】华为od机试C卷【出差 / 员工派遣】Java&Go 实现

某公司部门需要派遣员工去国外做项目。现在,代号为 x 的国家和代号为 y 的国家分别需要 cntx 名和 cnty 名员工部门每个员工有一个员工号 (1,2,3,......),工号连续,从 1开始。部长派遣员工的规则:

MISAYAONE的博客 2640

Angular 学习项目教程

Angular 学习项目教程 1. 项目介绍 learn-angular 是一个开源项目,旨在通过逐步学习的方式帮助开发者掌握 Angular 框架。该项目由 panacloud 组织维护,提供了从基础到高级的 Angular 学习路径。每个步骤都包含了详细的代码示例和解释,适合初学者和有一定经验的开发者。 2. 项目快速启动 2.1 环境准备 在开始之前,请确保你已经安装了以下工具: Node...

gitblog_00084的博客 438

温度PID控制PLC程序

温度PID稳定控制程序,适用于欧姆龙PLC,对其他PLC也具有很大参考价值

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

【亲测免费】 Angular 学习项目教程

Angular 学习项目教程 1. 项目介绍 本项目是基于 Angular 框架的学习资源,旨在帮助开发者快速掌握 Angular 的核心概念和实际应用。项目内容涵盖了 Angular 的基础知识、进阶技巧以及实际案例,适合初学者和有一定经验的开发者。 2. 项目快速启动 2.1 环境准备 在开始之前,请确保你已经安装了以下工具: Node.js (建议版本 14.x 或更高) npm (通常随...

gitblog_00544的博客 1089

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

angular+ionic学习之项目构建

安装ionic 本地全局安装 npm install -g ionic 或 // 用tabobao镜像装会快些 cnpm install -g ionic 安装完毕后,查看是否安装成功。 ionic -v xxxxMacBook-Pro:~ xxxx$ ionic -v 5.4.16 ──────────────────────────────────────────────────────────── Ionic CLI update available: 5.4.16 →

阑珊伊人 1165

jre9下载 jdk9

(Java SE Runtime Environment 9.0) 9.0u175 官方最新版 【x86|x64】

《Angular学习项目》常见问题解决方案

《Angular学习项目》常见问题解决方案 1. 项目基础介绍 本项目是一个开源的Angular学习项目,通过逐步的教程和代码示例,帮助初学者理解和掌握Angular框架的使用。项目主要使用了TypeScript作为编程语言,同时涉及HTML和CSS。 2. 新手常见问题及解决方案 问题一:如何开始运行项目? 问题描述:新手在下载项目后,不知道如何开始运行。 解决步骤: 确保已经安装了Node....

gitblog_00139的博客 326

【Angular学习】创建一个Angular项目

【背景】 学习Angular的第二篇博客,掌握如何创建一个新的Angular项目。 【内容】 创建Angular项目的步骤: 1、进入要创建项目的目录,在cmd命令框中输入:ng new +项目名称(ps:最好使用英文)。 2、在项目创建到绿色字体出现的时候,按CTRL+C,终止批处理操作。使用cmd命令:cd+创建的项目所在文件夹 进入项目文件夹,再输入Angular命令:cn

Yolanda94 1万+

Angular学习笔记—创建一个angular项目

开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI。 如何安装node.js和npm npm使用介绍 1.安装angular-cli Angular提供了一个命令行工具angular-cli,它能让用户通过命令行创建和管理项目。 安装命令: npm install -g angular-...

dmxhcwk90096748的博客 147

Angular学习之路——介绍、安装、创建Angular项目

Angular学习之路——介绍、安装、创建Angular项目 你好! 这是博主在学习 Angular 时做的笔记及分享。如果有什么错误和不足之处,请多多包含,并麻烦读者提出来,方便我做修改,谢谢! 一、Angular介绍 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。具体个版本的区别...

wwz948085103的博客 291

【Angular 学习】第一天:搭建环境,使用脚手架创建并运行项目

【Angular 学习】第一天:搭建环境,使用脚手架创建并运行项目

Dai的博客 1372

angular2学习1:用angular cli创建新项目

安装angular cli 利用cmd窗口或是Windows自带的power shell 工具检查node.js与npm的版本,为了确保系统中 Node.js 的版本高于 6.x.x 且 npm 的版本高于 3.x.x,这里我用的是cmd: 第一步确认无误后,在命令行使用 npm 安装 TypeScript: 输入 npm install -g typescript 国内用户可以先安...

weixin_45030020的博客 218

angularJS学习创建angular项目

1.angularJS的使用 angular在使用时一般有两种方法,一种是直接在html页面引用angular.min.js,如: &lt;script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"&gt;&lt;/script&gt; 版本的话可以看angular官方文档,需要哪个引入那个,angular1和a...

qq_39399252的博客 1188

框架学习:angular项目搭建

步骤: 官方下载node,js 安装后在黑窗口下载angular的@angular/cli 命令行 指令如下: npm -v 查看node版本 sudo npm install -g @angular/cli 下载angular命令行 ng -v 查看angular版本 ng new anction 创建生成angular项目 npm install jquery --save 安装j...

T_Tonz的博客 394

angular学习0:关于创建一个angular项目

1.安装cli脚手架 npm install -g @angular/cli 2.创建新项目 ng new angulaiproject 3.cd到项目路径 cd .\angulaiproject\ 4.npm安装依赖 npm install 5.运行项目 ng serve --open

weixin_43811753的博客 190
上一篇: LeetCode 316. Remove Duplicate Letters
下一篇: Android Picasso 无法加载图片
Dale_zero
博客等级 码龄9年 10粉丝 174原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值