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 ==全局 阅读详情

相关推荐

配电网故障重构/孤岛划分/故障恢复

程序主要复现《基于GA_BFGS算法的配电网故障恢复性重构研究_郑海广》,采用matlab编程软件实现,依据网络结构和DG供电方式对配电网进行孤岛划分,将含有 DG 的配电网拓扑结构看成一个树,搭建成连通图模型,使得将孤岛的划分变成了求取最小生成树,以网损和开关开断次数作为目标,采用 IEEE33 节点配电网为算例,通过遗传算法寻优计算,从而得到最佳的重构方案。

zhangxd212489的博客 2500

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

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

几百块的博客 2万+

从零到一:Mapviz实战部署与多源数据可视化全解析

本文详细解析了Mapviz在机器人开发中的实战部署与多源数据可视化应用。从安装配置、卫星地图接入,到GPS轨迹、相机图像与激光雷达点云的融合显示,提供了完整的操作指南。针对ROS1与ROS2环境的选择与迁移给出了明确建议,并分享了坐标系对齐、数据同步等常见问题的避坑方案,帮助开发者高效构建室外机器人的“上帝视角”调试平台。

weixin_29230773的博客 252

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

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

jeason_chan_zju的博客 880

OpenMV模块视觉测距(避障)+颜色识别+TFT-LCD显示(实现原理与代码分析)

上图所示代码实际运行的帧率比较低,主要原因有以下两个:1.硬件问题,博主使用的版本比较低,可以尝试使用高版本OpenMV2.图像滤波问题。之前加入图像滤波是想提高色块识别的准确性,但是相应的运算速度也会下降。

ediykk的博客 1万+

AxMath行间公式转化为office公式求和符号以及编号显示问题

AxMath行间公式转化为office公式求和符号以及编号显示问题问题描述解决方法 问题描述 首先打出axmath公式,如下: 转换后的OfficeMath公式: 字体先不说,word公式字体默认cambria math且无法编辑。比较难受的一点是求和符号与后面的 ai+bi2a_i+b_i^2ai​+bi2​比例不匹配啊!正常的比例应该是: (虽然也不太正常,将就下) 解决方法 点击变换后的office公式右侧,选择更改为"显示" 可以看到,多了一些软回车符号(⬇),如果你想删除它,不要直接选中

weixin_43543177的博客 4653

前端项目创建流程

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

MIKE21 MIKE软件 教程 0.1 软件介绍与教学目录

MIKE 21是一个专业的工程软件包,用于模拟河流、湖泊、河口、海湾、海岸及海洋的水流、波浪、泥沙及环境问题。在MIKE Zero集成平台中,主要有MIKE11,MIKE21,MIKE3三类软件,分别对应一维,二维,三维的水动力模型模拟。同时还包括MIKE HYDRO,MIKE FLOOD等其他功能,各软件的具体介绍请参考DHI公司的官方文档,在此不作赘述。学习过程中,对于任何操作界面的疑问,建议大家仔细阅读帮助文档(在有疑问的界面按F1调出),同时官方也提供了对应的线上和线下教学服务(免费+收费)。

Hello Word 2万+

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

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

weixin_43938259的博客 1万+

VSS shielding线可以floating吗?

shielding vss不打孔,就相当于dummy metal,如果周围有其他干扰线,他们影响了这段dummy metal,这段dummy metal仍然会对目标线产生干扰,bug的是,工具知道这段dummy是vss,那么计算寄生的时候仍然把它当vss,就有可能噪声没有完全消除,而用户又看不见。而真正接地的线,相当于一直是0,就不会对目标线产生干扰,一般加shield是在route之前,这时候shield能尽量覆盖目标线,等到绕线后再加就会出现shield只覆盖到一部分目标线的情况。

m0_61544122的博客 6637

Simulink开发项1000例实战专栏--实例17:基于 Simulink 的 BLDC 电机驱动系统的设计与实现

项目背景无刷直流电机(BLDC)因其高效、可靠、低维护的特点,广泛应用于电动汽车、无人机、工业自动化等领域。基于 Simulink 的 BLDC 电机驱动系统可以实现对电机的精确控制,包括速度控制、位置控制和转矩控制。通过仿真和测试,可以优化控制算法,提高系统的性能和可靠性。

xiaoheshang_123的博客 562

Angular学习总结-入门篇

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

小冷在努力~ 1万+

SAP BOM批量反查代码分享

SAP BOM反查批量查询代码分享

我小时候很黑的博客 4972

Angular 学习项目教程

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

gitblog_00084的博客 438

jre9下载 jdk9

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

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

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

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

gitblog_00544的博客 1089

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

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

《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、付费专栏及课程。

余额充值