使用 Ionic Firebase 构建应用程序
介绍
在我之前的指南《如何使用 Ionic Firebase 设置购物应用程序》中，我们探讨了如何设置我们的应用程序以及我们的最终产品的外观。
登录.html
首先，让我们通过检查login.html模板来检查登录逻辑。这里唯一有趣的部分是登录按钮上的ng-click 。这将调用oauthLogin()函数（传入适当的提供程序 - “facebook”或“google”）并调用testAppWithoutLogin()函数，该函数将使用现有的演示帐户登录用户。
登录控件
LoginCtrl位于js/controllers.js文件中，是包含login.html模板逻辑的控制器。
该控制器包含三个功能：
- oauthLogin：根据传递的参数，调用Auth服务中相应的函数
- testAppWithoutLogin：准备演示用户对象并调用validateUser函数。
- validateUser：调用前面提到的 Auth 服务中的loginWithEmail函数。
认证服务
Auth 服务基本上是一个自定义工厂，通过 AngularFire（Firebase 的 Angular 包装器）的$firebaseAuth服务调用$authWithOAuthPopup和$authWithPassword等函数。
在 Auth 服务中需要注意的一件重要事情是onAuth函数，它使用$timeout包装$onAuth函数，以便它在摘要循环中处理。如果您想知道，我们正在app.js文件中监听此事件。
您可以从官方 Firebase 文档中了解有关 AngularFire 的更多信息。更具体地说，他们还为 Ionic 提供了分步教程，您可以按照该教程更好地掌握该主题。
社交登录
至于社交登录（Facebook 和 Google），您必须在其开发者网站上创建应用程序。您可以按照此处和此处的相应分步官方教程来了解如何创建这些应用程序。基本 Firebase 用户身份验证文档可在此处找到。
关联 Facebook 与 Firebase
您所要做的就是在设置中启用 Facebook 身份验证并输入适当的应用程序 ID 和密钥（您在创建 Facebook 应用程序后就会获得）。
此外，您必须在 Facebook设置 -> 高级选项卡上设置正确的 OAuth 以重定向 URI ：
用户资料
一旦用户能够成功登录，我们就可以将其转发到app.profile状态，如代码所示。现在，我们回到app.js 配置部分来查看此状态的路由定义：
.state('app.profile', {
url: '/profile',
views: {
'menuContent': {
templateUrl: 'templates/profile.html',
controller: 'ProfileCtrl'
},
'fabContent': {
templateUrl: 'templates/profileFabButtonAdd.html',
controller: 'ProfileCtrlFabButton'
}
}
})
从这里我们可以得出几条结论：
- 配置文件状态是app.profile，我们可以通过该字符串引用它。
- 个人资料 URL 是/profile，如果您在浏览器中运行它，您将在 URL 中看到它。
- 该资料有两个视图：menuContent和fabContent。
- menuContent视图的 HTML在templates/profile.html文件中定义。此外，此模板具有相应的ProfileCtrl控制器。* fabContent视图的 HTML 在templates/profileFabButtonAdd.html文件中定义。此外，此模板具有相应的ProfileCtrlFabButton控制器。
个人资料.html
profile.html模板显示（已登录）用户的个人资料图片、姓名和电子邮件。此外，它还使用ng-repeat 指令列出现有项目（如果有）。
在 ng-repeat 指令中，我们显示项目图像和名称。通过使用<ion-option-button>指令，我们添加了对“向左滑动”手势的支持，该手势会显示Remove和Edit按钮。这些按钮依次通过ng-click指令调用ProfileCtrl中相应的Remove和Edit函数。
profileFabButtonAdd.html
此文件包含一个用于添加新项目的简单按钮。ng-click指令调用在ProfileCtrlFabButton 控制器中定义的add函数。
添加函数基本上显示弹出窗口（通过$ionicPopup服务），并且在用户输入新项目名称并确认后，它会调用在Groups 工厂（在名为data.js的文件中）上定义的GroupAdd函数。
将项目添加到列表中
一旦用户创建新项目（列表）并在其个人资料中单击此列表，他们将被转发到 app.list ({id: g.id, ime: g.name})状态，如代码所示。再次，我们将返回app.js 配置部分以查看此状态的路由定义：
.state('app.list', {
url: '/list/:id/:ime',
views: {
'menuContent': {
templateUrl: 'templates/list.html',
controller: 'ListCtrl'
},
<s免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~