介绍
在本教程中，您将了解如何构建应用程序ShoppingTODO（已在Apple 的 App Store和Google 的 Play Store发布）。您可以在Github上访问完整的源代码。我们将逐一介绍每个文件，并解释其运行所需的所有细节。
您将学习如何使用Firebase作为后端以及如何融入 Material Design。该应用将具有列表共享、预算跟踪和实时更新等功能。
一切始于一个想法
这个想法可以解决我们可能遇到的一个问题。我们的问题很容易定义：我们往往会忘记在商店必须购买的东西。更重要的是，我们不喜欢被骗购买我们不需要的东西，然后回到家后后悔不已。你有多少次拿着一张要买的东西的清单去商店？你有多少次一边用笔划掉清单，一边用智能手机和朋友聊天？那么，直接用手机完成这两项任务，放弃纸笔，不是更有意义吗？
我们即将构建的应用程序将允许您输入商品、输入这些商品的确切价格以及您实际购买的每件商品的金额。此外，它还会立即显示您列表中商品的总价。最后，实时更新将启用即时编辑，这样与您共享列表的人就不必打电话通知您应该添加“另一件事”。
设计
我们实现此目标的方法是尝试使用开源主题尽可能多地重用开源帮助。我们将使用以下开源模板。更具体地说，我们将仅使用演示示例。
完成的项目屏幕
您可以在此处查看已完成的应用程序，它包含以下屏幕：
登录：该应用提供 Facebook 和 Google 登录。它甚至有一个 DEMO 模式，您可以在其中测试该应用而无需登录。
主屏幕：您可以根据需要添加任意数量的项目（在代码中我们称之为组）。
项目屏幕：显示需要购买的物品和已购买的物品列表。它还可以查看已购买/待购买物品的价格。
将项目添加到项目屏幕：
将用户添加到您的项目：
完成的项目代码
您可以通过执行以下操作来克隆项目并使其在本地运行：
- 从Github克隆代码
- 进入新文件夹
- 运行ionic serve
您应该会在浏览器中看到登录屏幕（如上所示）。如果您想在手机上运行此应用，则需要确保安装了下面列出的插件（使用ionic platform add ios或ionic platform add android添加平台后）。您可以在项目根目录（ionic.project文件所在的位置）中执行ionic plugin list来列出已安装的插件。
- cordova-plugin-admobpro 2.11.1 “AdMob 插件专业版”
- cordova-plugin-extension 1.2.9 “Cordova 插件扩展”
- cordova-plugin-inappbrowser 1.2.1 “InAppBrowser”
- cordova-plugin-splashscreen 3.2.0 “启动画面”
- cordova-plugin-statusbar 2.1.1 “状态栏”
- cordova-plugin-whitelist 1.2.1 “白名单”
- ionic-plugin-keyboard 1.0.8 “键盘”
要安装缺少的插件，这里有一个复制/粘贴安装快捷方式（在项目根目录中的命令提示符/终端中执行一次）：
- Cordova 插件添加 cordova-plugin-admobpro
- Cordova 插件添加 cordova-plugin-extension
- Cordova 插件添加 cordova-plugin-inappbrowser
- Cordova 插件添加 cordova-plugin-splashscreen
- Cordova 插件添加 cordova-plugin-statusbar
- Cordova 插件添加 cordova-plugin-whitelist
- Cordova 插件添加 ionic-plugin-keyboard
您还可以通过输入代码：4f055b6d使用Ionic View应用程序查看此项目。或者您可以从App Store、Play Store下载它，甚至可以在浏览器中试用它。
它是如何工作的？
正如我在上面的设计部分中提到的，我使用了一个很棒的Ionic Material模板作为这个项目的基础。如果您从未克隆过 Github 存储库，那么这里有许多资源可供您参考。
我使用demo文件夹作为项目的基础。进入 demo 文件夹后，如果运行“ionic serve --lab”，您将看到以下屏幕：
起点
从现在开始，我将为您提供我所指的确切文件/函数的 Github 链接，并且仅显示解释正在发生的事情所需的代码行。
根据我的经验，当尝试理解一些 Ionic 框架代码时，我总是首先转到app.js文件并检查config() 函数以查看路由是如何设置的。查看我们的示例，我们可以看到显示的第一个屏幕位于路由/app/login：
$urlRouterProvider.otherwise（'/ app / login'）;
我们现在可以检查这个状态的定义，看到它看起来像这样：
.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
},
'fabContent': {
template: ''
}
}
})
从这里我们可以得出几条结论：
- 登录状态是app.login，我们可以通过该字符串引用它。
- 登录 URL 是/login，如果您在浏览器中运行它，您将在 URL 中看到它。
- 登录有两个视图：menuContent和fabContent。
- MenuContent视图的 HTML在templates/login.html文件中定义。
- fabContent视图没有与之关联的模板。
注意：“fab”这个名字来自于Material design 文档中的 Floating Action Button 。
Firebase
在这个项目中，Firebase 用作应用程序的后端，包括数据存储和用户身份验证。它具有实时数据库，也可以进行静态托管。您可以在此处了解有关 Firebase 的更多信息。
下一步
继续阅读我的下一个指南《使用 Ionic Firebase 构建应用程序》，我们将深入研究最终应用程序中可用的每个屏幕。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
