angular8 | 网易云音乐项目实战(一)
angular8 网易云音乐项目实战(一)
视频教程原地址:https://www.bilibili.com/video/av70355308
本文为学习笔记
从github上clone相关源码
css样式:https://github.com/lycHub/ng-wyy
网易云音乐接口:https://github.com/Binaryify/NeteaseCloudMusicApi
编译运行网易云接口
shift+右键单击NeteaseCloudMusicApi-master
,选择“在此处打开Powershell窗口”
输入npm start并回车
如果遇到annot find module '某模块'
的情况,则输入npm install 某模块
并回车
以此来安装该项目中需要但缺少的模块
创建angular项目
全局安装angular :npm install -g angular-cli
设置淘宝代理:
npm config rm proxy
npm config rm https-proxy
npm install cnpm -g --registry=https://registry.npm.taobao.org
在指定文件夹下新建一个项目:
ng new ng-wyy --style=less --routing -S
ng-wyy
是项目名(自动生成一个以此命名的文件夹,新生成的文件存放在里面)
--style=less
是指生成的样式类型是less
--routing
是指生成一个路径文件
-S
是指不生成调试文件
在visual studio code里编译运行
在vs code里打开ng-wyy文件夹,并依次选择
编译运行,即可在http://localhost:4200/
中看到默认的项目已经运行
安装其他模块
zorro-atnd,方便地安装第三方依赖:ng add ng-zorro-antd
是否添加图标资源 y
是否设置自定义样式文件 y
本土语言 zh_CN
模板 blank空模板
安装完成后,http://localhost:4200/
中页面发生改变
添加样式文件
由于项目中会用到很多全局的样式文件,所以把样式文件放在assets目录之下
- 在assets目录下新建styles文件夹
- 将原本在根目录下的styles.less剪切到styles文件夹中,并重命名为index.less(该文件中的样式是引入zorro-atnd后获得的,import中的
../node_modules/
可以直接用~
代替) - 更改angular.json中两个“styles”为src/assets/styles/index.less
将第一步下载好的样式文件项目中的assets文件夹直接覆盖到本项目中
index.less
引入以下所有样式
zorro.less
中存放安装zorro时自动添加的样式文件
varibles.less
存放样式中的一些变量
mixins.less
存放一些函数
layout.less
存放常用的class文件
~minireset.css
也是一个第三方的样式文件
安装:npm i minireset.css
此时如果更改html为
<button nz-button nzType = "primary">button</button>
即可看到一个采用了新样式的button
app.module.ts和其他模块
其中@NgModule会注入一些元数据
declarations数组中存放一些组件、指令、管道等一些类
imports数组中引入了一些依赖的模块
providers存放一些服务
bootstrap存放app入口的组件
如果所有的组件都放在这里,那么这里的压力太大了,需要创建一些其他的模块来分担压力。
使用ng g m core
会在app的目录下创建一个core模块,作为app的副经理,处理项目的大小事情。
由于 NgZorroAntdModule 和 FormsModule都是全局都会用到的ui组件,于是可以保留这两个,将其他模块都放入到core模块中,再在app模块中引入core模块。
core模块中默认引入的CommonModule可以去掉。
使用ng g m share
会在app的目录下创建一个share模块,存放全局都会用到的模块(指令组件等模块),将NgZorroAntdModule 和 FormsModule放到share模块中,再在app模块中引入share模块。
由于它存放共享的模块,所以要把这些模块导出,否则其他地方将无法用到,故写一个导出数组,将这些模块导出
exports:[
NgZorroAntdModule,
FormsModule,
]
同时,share模块也要在引入它的Core模块中导出,AppRoutingModule也是一样。
使用ng g m pages
会在app的目录下创建一个pages模块,管理所有的页面模块。把share模块引入,这样每一个页面都能共享到share模块中所引用到的模块
使用ng g m services
会在app的目录下创建一个services模块,主要用于引入http之类的服务。
把pages模块、services模块和share模块引入到core模块中。注意调整模块的顺序,使 AppRoutingModule放在最后,否则可能出现问题。
将根模块中的registerLocaleData(zh);及其相关的引入文件剪切到core模块中,删除根模块中已经不需要用到的import。
appModule的providers数组也可转移到core模块中
使core模块只能被appModule引入
由于core模块只能被app模块引入,其他模块不应该引入这个模块,所以我们要让core模块在构造函数中注入它自己。
export class CoreModule {constructor(@SkipSelf() @Optional() parentModule: CoreModule) {if (parentModule) {throw new Error('CoreModule 只能被appModule引入');}}
}
appModule对CoreModule的引入,是CoreModule第一次被引入。此时parentModule不存在,所以if语句会被跳过,可以正常执行。但是之后又其他模块又引入一次,那么if语句被执行,程序抛出一个错误。
但是如果CoreModule不断注入它自己,就会造成一个无限循环。
为了解决这个问题,添加一个skip装饰器@SkipSelf
来修饰这个参数,在查找CoreModule这个类的时候,不查找自己,跳过CoreModule这个文件,去父Module里去找有没有CoreModule。
但是如果这个Module没有被找到,那么它将会抛出一个错误,而在第一次注入的时候,CoreModule肯定是没有的,所以我们允许CoreModule不存在,于是再加一个@Optional
装饰器,在CoreModule没找到时,给parentModule赋值一个NULL,而不是抛出错误。
(我的理解是,在初始化CoreModule的时候,首先要初始化它的成员变量,但是由于CoreModule的成员变量类型就是CoreModule,不断初始化自己,则将造成无限循环。@SkipSelf
的作用,就是在初始化CoreModule的成员变量parentModule时,由于成员变量的类型就是本身的类型,所以直接跳过这个成员变量,不做初始化,此时CoreModule还没初始化过,所以不存在。但当第二次初始化CoreModule时,CoreModule已经存在了,parentModule也已经在初始化成员变量的时候被初始化为CoreModule类型了,所以parentModule存在,第二次引入CoreModule抛出错误)。
总结
core模块用于充当我们自己的“根模块”,引入了
,同时只允许被appModule引入:
pages模块用于管理页面,引入了ShareModule
services模块用于管理后期添加的一些服务
share模块用于引入共享的一些模块,包括
它引入的模块都要被导出,同时引入ShareModule的模块也要导出ShareModule
angular8 | 网易云音乐项目实战(一)相关推荐
- 高仿网易云音乐(vue实战项目)
高仿网易云音乐(Vue实战项目)
- 网易云音乐爬虫实战——肖战《红梅赞》下评论数据挖掘与分析
网易云音乐爬虫实战--肖战<红梅赞>下评论数据挖掘与分析 前言 本章工具 数据挖掘部分 1.获取歌曲评论 2.根据ID获取用户信息 数据分析部分 1.评论数时间分布 2.评论内容词云 3. ...
- Android项目实战之高仿网易云音乐项目介绍
这一节我们来讲解这个项目所用到的一些技术,以及一些实现的效果图,让大家对该项目有一个整体的认识,推荐大家收藏该文章,因为我们发布文章后会在该文章里面加入链接,这样大家找着就很方便. 目录 第1章 前期 ...
- Android项目实战之高仿网易云音乐项目介绍 1
这一节我们来讲解这个项目所用到的一些技术,以及一些实现的效果图,让大家对该项目有一个整体的认识,推荐大家收藏该文章,因为我们发布文章后会在该文章里面加入链接,这样大家找着就很方便. 目录 第1章 前期 ...
- Vue2 - 网易云音乐项目笔记(基于Vant UI组件库)
目录 一.项目技术 二.准备工作 1.初始化Vue项目 2.配置Vant UI组件库 3.下载并使用vue-router库 4.接口API 5.postcss插件 三.分析页面实现功能 1.路由页面准 ...
- React实现(Web端)网易云音乐项目(一),错过了真的可惜呀
首先肯定是搭建项目的结构了,通过脚手架安装这部分我就不说了 首先看项目的目录结构 assets:放我们的静态资源,图片,字体和公共初始样式等 common:放我们公共的JS文件 components: ...
- React实现(Web端)网易云音乐项目(三),错过了真的可惜呀
接着前面的继续写了,这篇博客就写这两个页面,下一篇就主要讲歌曲播放功能,进度条拉伸以及歌曲时间的变化了 先完成新碟上架Demo 一.第一步不用说肯定是先获取我们这个数据对吧 去到我们services文 ...
- [项目] 网易云音乐项目总结
最近准备把之前做的一个仿网易云音乐的自制音乐网页播放器项目做一个总结. 相关功能如下: 通过后台页面上传歌曲.编辑歌曲功能. 前端页面自动更新播放热度高的歌曲 在线听歌.查看歌词.且配有相应的播放动画 ...
- 仿网易云音乐项目的开始
开始 最近学习前端,比较迷茫,不知道该怎么做.决定做一个项目来梳理并锻炼自己的水平. 准备 网上有很多项目,之所以选择了仿网易云音乐的项目,是因为Github上有网易云音乐的接口项目,这样的话可以完全 ...
最新文章
- WiFi是SD-WAN的良好组合,但不是必备选择
- NFV业务技术说明—Vecloud微云
- h5 video 手机上无法显示_怎样把手机上的导航显示在汽车屏幕上
- Redis与python交互
- 计算机审计操作实验目的,计算机审计实验报告 满分原创!!.docx
- 双11猫晚直播:看阿里文娱如何“擒住”高并发、多视角、低卡顿!
- Yarn分布式集群操作系统
- 毕设题目:Matlab图像检索
- 拥有mac动态壁纸Backgrounds——让桌面更生动
- oracle入门教程+视频教程
- 美服lol服务器状态,LOL美服训练模式上线:炮塔可关闭 野区无限刷新
- 主题:程序的扩展性(第二节:如何扩展), 时间:2004-12-10 03:00 PM
- 三星+android+u盘模式,三星安卓机,如何开启开发者模式,进行USB调试?
- Day296.原子类 -Juc
- 倒计时,距离活动还有0天0时0分0秒
- 不务正业系列7:老照片去除斑点手法
- 图像恢复(加噪与去噪)
- ChatGPT的各种骚操作
- 覆盖问题:最大覆盖问题(Maximum Covering Location Problem,MCLP)和集覆盖问题(Location Set Covering Problem,LSCP)...
- 区块链赋能供应链,不让中间商赚差价!