目标
- 防止页面刷新的瞬间空白
效果动画
效果实现
方法介绍 (基于Angular8)
- 01 Angular Universal（首屏输出）
- 02 使用ngIf方法以及Index.html写入动画
- 03 补充点：如何只用Angular与cordova直接打包(windows)
01 Angular Universal
官网文档：https://angular.io/guide/universal
《Angular5 服务端渲染实战》：阅读资料
《angualr 6+ 服务端渲染 SSR 问题记录》：阅读资料
参照官方文档，在新建的angular8项目内部安装。遇到的问题结合另外两个链接进行配置和解决即可。另外，由于在本次练习中使用了 localstorage ，而服务器端渲染不支持浏览器api，因而需要下载插件进行配置。
// server.ts
// cmd: npm install localstorage-polyfill
import 'localstorage-polyfill';
global['localStorage'] = localStorage;
执行 npm run build:ssr , 运行node.js，点击localhost进行查看。文本直接渲染显示，配置成功。
效果展示
02 使用ngIf方法以及Index.html写入动画
src/index.html的<app-root></app-root>内写入加载动画
src/style.css写入加载动画
src/app/pages/home-page/home-page.html写法如下
<div class="content" *ngIf="galleryList; else loading">
//在加载gallertList完毕之前，显示#loading
...
</div>
<ng-template #loading>
//搭建骨架屏，使用静态页面填充
//何为骨架屏 --> https://ng.ant.design/components/skeleton/zh
...
</ng-template>
03 补充点：如何只用Angular与cordova直接打包(windows)
配置cordova：cordova中文网
- 使用
管理员身份运行打开cmd，进入项目文件。执行cordova新建命令：cordova create [文件名]
在名为mobile-with-ssr的项目下新建文件名为mobile的cordova项目
-
进入mobile文件，删除原www文件，软连接dist文件。以下3步均在cordova项目内执行，此处即我新建的mobile文件夹下。
cd mobile: 进入cordova文件rmdir /s www: 删除www文件
删除www文件
mklink /d [目标文件][源文件]: 将mobile/www和build出的dist文件同步
mklink /d [目标文件][源文件]
-
修改文件
browser/index.html:
<base href="/"> --修改为--> < base href="./">
mobile/config.xml :
<content src="index.html" /> --修改为--> <content src="/browser/index.html" />
必须修改以上文件的对应路径，否则打包出来的应用在模拟器上运行会报出如下错误。
报错信息
最后，执行cordova platform add android在模拟器上运行即可。
总结
最近做的Loading一直都在用小菊花转啊转的，就想除了旋转也来尝试下另一种加载形式—骨架屏。加之这几天也在研究服务端渲染，顺便也想舔舔我OOR的颜，写点小清新的东西净化心灵，就一起用上了。初体验一下还是蛮开心的，也和前辈总结出不少有意思的东西。虽然知晓还有不少东西值得深挖。所以嘛，虽然上海最近的天气不是很美丽，但还是很快乐游了坑。
最后，祝大家，一起游坑快乐哦。
网友评论