angular-movies

angular-movies

高性能Angular电影应用展示最佳实践

angular-movies是一个基于Angular和RxAngular的开源电影应用,利用TMDB API提供数据。项目实现了多项性能优化,如bundle size缩减和渲染效率提升,在与Next.js和Nuxt.js版本的对比中表现出色。这个示例应用为开发者提供了学习Angular和RxAngular最佳实践的机会,同时欢迎社区贡献。

Angular电影应用性能优化RxAngularTMDB APIGithub开源项目

angular-movies

这是一个使用 AngularRxAngular 构建的电影应用程序。 数据源使用了 The Movie Database (TMDB) API。

angular-and-rx-angular

演示

可以尝试使用这个应用程序的在线部署版本

性能优化

angular-movies--after-before

目前,您可以在代码库中搜索"Perf Tip",稍后这里将会有适当的文档说明。

优化前的测量结果 angular-movies-before_michael-hladky

优化后的测量结果 angular-movies-after-optimization_michael-hladky

打包统计

<!-- bundle-stats-start -->
名称大小
main.js343.15 KB
styles.css6.17 KB
runtime.js2.61 KB
初始总计351.93 KB
名称大小
app_pages_movie-detail-page_movie-detail-page_component_ts.js16.83 KB
app_pages_person-detail-page_person-detail-page_component_ts.js11.79 KB
a-6a8199.js10.07 KB
app_pages_account-feature_list-detail-page_list-movies_list-movies_compon-d13d08.js9.83 KB
common.js7.69 KB
app_pages_account-feature_list-detail-page_list-items-edit_list-items-edi-13eb42.js7.23 KB
app_pages_movie-list-page_movie-list-page_component_ts.js5.84 KB
app_pages_account-feature_list-create-page_list-create-page_component_ts--1f481e.js5.7 KB
app_app-shell_account-menu_account-menu_component_ts.js5.63 KB
app_pages_account-feature_account-list-page_account-list-page_component_ts.js4.89 KB
app_pages_account-feature_list-detail-page_list-image_list-image_componen-cb4b89.js4.36 KB
default-node_modules_rx-angular_template_fesm2022_template-if_mjs.js4.23 KB
app_pages_account-feature_list-detail-page_list-remove_list-remove_compon-a10eb2.js3.41 KB
app_pages_account-feature_list-detail-page_list-detail-page_component_ts--a2c81d.js3.24 KB
app_pages_not-found-page_not-found-page_component_ts.js1.77 KB
app_pages_account-feature_list-detail-page_list-detail-page_routes_ts.js1.54 KB
app_pages_account-feature_account-feature-page_routes_ts.js926 字节
<!-- bundle-stats-end -->

与 next 和 nuxt 的比较

angular-vs-next-vs-nuxt

贡献

欢迎随时提供贡献!

对于大型更改,请先提交一个 issue 来讨论您的提议,然后再进行 PR :)

安装

在本地克隆并安装 angular-movies 的依赖项:

git clone https://github.com/tastejs/angular-movies.git cd angular-movies npm install

快速设置

  1. 复制 src/environments/environment.local.example.ts 文件并重命名为 src/environments/environment.production.ts
  2. 获取您的 TMDb API 密钥
  3. 获取您的 TMDB API 读取访问令牌
  4. 将详细信息输入到 src/environments/environment.production.ts 文件中

本地运行

  • nx run movies:serve:开发服务器

技术栈

使用以下技术构建:

angular-and-rx-angular

测量工具:

作者

基于 @clamarque 的原始 angular-movies 基础。

许可证

MIT

编辑推荐精选

音述AI

音述AI

全球首个AI音乐社区

音述AI是全球首个AI音乐社区,致力让每个人都能用音乐表达自我。音述AI提供零门槛AI创作工具,独创GETI法则帮助用户精准定义音乐风格,AI润色功能支持自动优化作品质感。音述AI支持交流讨论、二次创作与价值变现。针对中文用户的语言习惯与文化背景进行专门优化,支持国风融合、C-pop等本土音乐标签,让技术更好地承载人文表达。

QoderWork

QoderWork

阿里Qoder团队推出的桌面端AI智能体

QoderWork 是阿里推出的本地优先桌面 AI 智能体,适配 macOS14+/Windows10+,以自然语言交互实现文件管理、数据分析、AI 视觉生成、浏览器自动化等办公任务,自主拆解执行复杂工作流,数据本地运行零上传,技能市场可无限扩展,是高效的 Agentic 生产力办公助手。

lynote.ai

lynote.ai

一站式搞定所有学习需求

不再被海量信息淹没,开始真正理解知识。Lynote 可摘要 YouTube 视频、PDF、文章等内容。即时创建笔记,检测 AI 内容并下载资料,将您的学习效率提升 10 倍。

AniShort

AniShort

为AI短剧协作而生

专为AI短剧协作而生的AniShort正式发布,深度重构AI短剧全流程生产模式,整合创意策划、制作执行、实时协作、在线审片、资产复用等全链路功能,独创无限画布、双轨并行工业化工作流与Ani智能体助手,集成多款主流AI大模型,破解素材零散、版本混乱、沟通低效等行业痛点,助力3人团队效率提升800%,打造标准化、可追溯的AI短剧量产体系,是AI短剧团队协同创作、提升制作效率的核心工具。

seedancetwo2.0

seedancetwo2.0

能听懂你表达的视频模型

Seedance two是基于seedance2.0的中国大模型,支持图像、视频、音频、文本四种模态输入,表达方式更丰富,生成也更可控。

nano-banana纳米香蕉中文站

nano-banana纳米香蕉中文站

国内直接访问,限时3折

输入简单文字,生成想要的图片,纳米香蕉中文站基于 Google 模型的 AI 图片生成网站,支持文字生图、图生图。官网价格限时3折活动

扣子-AI办公

扣子-AI办公

职场AI,就用扣子

AI办公助手,复杂任务高效处理。办公效率低?扣子空间AI助手支持播客生成、PPT制作、网页开发及报告写作,覆盖科研、商业、舆情等领域的专家Agent 7x24小时响应,生活工作无缝切换,提升50%效率!

堆友

堆友

多风格AI绘画神器

堆友平台由阿里巴巴设计团队创建,作为一款AI驱动的设计工具,专为设计师提供一站式增长服务。功能覆盖海量3D素材、AI绘画、实时渲染以及专业抠图,显著提升设计品质和效率。平台不仅提供工具,还是一个促进创意交流和个人发展的空间,界面友好,适合所有级别的设计师和创意工作者。

图像生成AI工具AI反应堆AI工具箱AI绘画GOAI艺术字堆友相机AI图像热门
码上飞

码上飞

零代码AI应用开发平台

零代码AI应用开发平台,用户只需一句话简单描述需求,AI能自动生成小程序、APP或H5网页应用,无需编写代码。

Vora

Vora

免费创建高清无水印Sora视频

Vora是一个免费创建高清无水印Sora视频的AI工具

下拉加载更多