英文原文正文为项目原始 README（英文），本站后续会翻译为中文，当前仅剔除图片与无关章节并统一排版。

Angular-10 - 购物车 MDBootstrap Firebase（实时数据库） 多语言支持（i18n）

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

使用 Angular-10 开发一个 购物车（电子商务）应用程序。

在线演示 : Angular-购物车

此项目是使用 Angular CLI 版本 10.0.1 生成的。

功能

1. 使用 Firebase 身份验证进行用户注册（使用电子邮件/密码 | Google 身份验证）
2. CRUD 操作，如

• 用户可以将产品添加到购物车。
• 管理员可以将产品添加到产品列表中。
• 管理员可以编辑/删除产品。

3. 拖放 Angular Drag & Drop

• 实现了 Angular 拖放 CDK

1. 安全性

• 实现了身份验证和授权

工具和技术

• 技术：HTML, MDBootstrap, CSS, Angular-10, Firebase, i18n, 拖放, 渐进式网页应用, jsPDF（用于下载收据为PDF）。
• 数据库：Angular Firebase（实时数据库）。

该项目涵盖了Angular的所有基础内容。

• 多个模块
• 组件、模板和数据绑定
• 表单验证
• Http客户端
• 动画
• 依赖注入
• 路由与导航
• 服务工作者
• 管道
• 守卫等..

安装

1. Angular CLI

   • 下载 Angular CLI

2. NodeJs

   • 下载 Nodejs

3. 包管理器 - NPM / Yarn

4. 克隆仓库并运行 npm install 如果你使用 npm 作为包管理器，或者如果你使用 yarn 作为包管理器则运行 yarn install。

5. Angular Firebase 教程 - Angular Firebase TypeScript — 逐步教程

6. 激活 Firebase 身份验证提供程序

   Authentication -> Sign-in-method -> Enable Email/Password & Google provider

7. 更新 Firebase (实时数据库) 规则

   Database -> Rules

   {
   "rules": {
       ".read":true,
       ".write": true
   }
   }

8. 配置你的 firebase 配置 src/environments/firebaseConfig.ts

   export const FireBaseConfig = {
       apiKey: "YOUR_API_KEY",
       authDomain: "YOUR_AUTH_DOMAIN",
       databaseURL: "YOUR_DATABASE_URL",
       projectId: "YOUR_PROJECT_ID",
       storageBucket: "YOUR_STORAGE_BUCKET",
       messagingSenderId: "YOUR_SENDER_ID"
   };

9. 将产品 JSON 导入实时数据库 Products JSON

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

10. 运行服务器。

我如何支持开发者？

• 给我的Github仓库加星 ⭐
• 创建拉取请求，提交错误报告，建议新功能或文档更新 🛠

截图：

首页：

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

产品页面：

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

工作板页面：

📷 原文此处有图片，请前往 GitHub 仓库查看完整内容。

开发服务器

运行 ng serve 启动开发服务器。然后访问 http://localhost:4200/。如果你更改了任何源文件，应用程序会自动重新加载。

代码脚手架

运行 ng generate component component-name 来生成一个新组件。你也可以使用 ng generate directive|pipe|service|class|guard|interface|enum|module。

构建

运行 ng build 来构建项目。构建产物将存储在 dist/ 目录中。使用 -prod 标志进行生产构建。

运行单元测试

运行 ng test 通过 Karma 执行单元测试。

运行端到端测试

运行 ng e2e 来通过 Protractor 执行端到端测试。

进一步帮助

要获得更多关于 Angular CLI 的帮助，请使用 ng help 或查看 Angular CLI 自述文件。

出了点问题！！

• 如果你发现这个包有问题，你可以通过在 GitHub 问题跟踪器上提出问题来告诉我

许可证

本项目根据 MIT 许可协议获得许可 - 详情请参阅 MIT 许可 文件