9

在过去的几周里,我一直在努力使用 Angular、Node、TDD、Heroku、Amazon S3 等。试图更好地了解如何构建具有可靠后端的完全可扩展的 SPA,与 grunt、bower、have 合作我还没有使用 Jasmine 涉足 TDD,尽管我了解如何通过 Karma 进行测试,这应该是我的下一步。

有一件事是肯定的:这是很多信息


关于使用所有这些技术的问题/理由。

首先,我玩过

并阅读数十篇文章等。

我发现 NG Boilerplate 的结构最符合逻辑(就我对这些事情的理解而言)。

作为一个演示项目(从非常小的东西演变而来),我想使用以下方法制作一个单页 CRUD 应用程序:

  • NodeJS 作为后端
  • Express 作为 Web 应用程序框架
  • NG Boilerplate 作为客户端
  • 部署到 Heroku 的应用
  • 用于数据库的 MongoDB
  • 用于动态存储的 Amazon S3

现在我想使用 Angular-Apps ( https://github.com/angular-app/angular-app ) 服务器作为我的 NGBoilerplate kickstarter 的后端

我想知道如何:


长话短说,不用我问很多问题,有人可以详细描述这样一个应用程序的工作流程吗?获取会话、登录、访问编辑内容、将快速路由绑定到角度路由(例如 X 路由只能由管理员访问)等。##

我脑子里一片模糊:)。

4

2 回答 2

4

在过去的几个月里,我在这些问题和问题上玩了很多,我得出了以下结论:

出于我的目的,我需要一个几乎完全依赖 Angular 的应用程序,没有单独的后端,并且当前的后端应该来自 Angular。

为什么?因为我希望我所有的鸡蛋都放在一个篮子里,所以我不想在很多不同的部分上配置大量的东西。

作为我项目的基础,我最终使用了 ng-boilerplate,作为样板:),对开发过程、Grunt 任务等进行了一些更改,每个人都可以根据每个特定项目来弄清楚。

嗯,我要在这里讨论的主要问题是,对于一个真正的后端,用 Angular 制作,我们需要安全路由和安全持久性方法,一个数据库。

对于应用程序,我利用了 ng-boilerplate 的模块化和依赖感知结构,我认为它非常适合 Angular 应用程序。

无论如何,我将从上到下(最终产品明智,如我上面所说的构建环境,这取决于你,但 ng-boilerplate 很棒),我们开始吧。

  1. 在上层,我们有真正的 Angular 应用程序,按照我们想要的方式制作
  2. 服务器容器是一个带有 express 和其他模块的 NodeJS 服务器,用于部分处理不同浏览器和设备上的路由(在我的应用程序中,我创建了 HTML5 路由,只要有部分 URL应该重定向到索引,Angular 将读取请求的路径并将您发送到该位置)
  3. 就我而言,所有东西都在 Heroku 上运行,在 Node.JS 应用程序上,如果你愿意,你可以在那里安装其他几个东西。

现在,为了持久性,拥有身份验证和安全性,而不是依赖后端,我正在使用 firebase ( https://www.firebase.com/ ),那里有一些很棒的教程可以帮助你去真正Angular APP 中的持久性,登录时使用路由,登录时访问数据库中的自定义表/对象等。这是真正的交易。

如果您不想依赖 OAuth 的可能站点来登录(Facebook、github、persona 或 twitter)并且想要自定义电子邮件和地址,您可以直接使用 Firebase 来执行此操作,以创建帐户并删除它们等。

FIREBASE 角度后端。

所以,Firebase,就像他们在网站上所说的那样,是一个强大的 API,可以实时存储和同步数据。

我不确切知道如何解决这个问题,所以我将从创建一个 Firebase 数据库开始。一旦我们创建它,在后端我们有几个选项,其中之一是安全性。

{
    "rules": {
        ".read": true,
        ".write": "auth != null"
    }
} 

在这里,如果我们阅读https://www.firebase.com/docs/security/security-rules.html上的文档,我们将了解到我们可以为数据库中的每个“表”添加规则,所以我们可以像3 个受保护的“表”对象和一些不受保护的对象。

我们可以根据用户,根据不同的规则保护表,无论是否登录,我们也有规则继承等,请阅读那里的文档,这真的是一个很好的阅读。

现在,要使这些规则生效,我们需要启用 Firebase 简单登录并从 Facebook、Twitter、Github、Persona、Email&Password 和 Anonymous 中选择所需的登录方法。

对于一个真正的应用程序,我们需要以匿名(用户会话等)和记录(使用上述任一选项)的形式将信息写入数据库,以存储和读取信息。

我,我想用快速简单的方法进行 Facebook 身份验证,在那里阅读文档我制作了一个快速的 Facebook 应用程序,在 Facebook 上的应用程序设置中,我将 Firebase 的后端放在https://www.dropbox。 com/s/xcd4b8tty1nlbm5/Screenshot%202014-01-22%2013.51.26.png

这提供了一个临时链接,用于登录 Facebook 并有权访问“表格”,如果规则为auth !=null.


现在,进入 Angular 后端。

Firebase 提供了一个库供我们放入我们的应用程序,以及一个 SimpleLogin 库,对于 Angular,还有一个名为 AngularFire 的工厂服务。

就我而言,我使用连接到我的数据库的使用方法创建了本地 firebaseService:

angular.module('firebaseService', ['firebase'])
  .service('firebaseService', function ($firebase, $rootScope) {

    //Input data in Firebase
    var URL = "https://glowing-fire-xxxx.firebaseio.com";
    var tellFirebase = function(ID, JSON) {
      users = $firebase(new Firebase(URL + '/' + ID));
      users.details = JSON;
      users.$save('details');
    };

    return {
      addUser: function(ID, JSON) {
        tellFirebase(ID, JSON);
        if ($rootScope.debugStatus === true) {
          console.log('Firebase Service .addUSer Called');
        }
      },
      getUser: function(ID) {
        if ($rootScope.debugStatus === true) {
          console.log('Firebase Service .getUser Called');
        }
      }
    };
  }) 

从这里我们做我们的读/写,在控制器的页面上我有这个:

值得注意的是,我有一个中间件服务 (storageManagement),我在其中切换 Firebase 和 MongoDB,以避免混淆。

.controller( 'SomeCtrl', function SomeController( $scope, storageManagement, $firebase, $firebaseSimpleLogin ) { 
     /*===========================
     * ==== FIREBASE LOGIN
     * ===========================*/

    var URL = "https://glowing-fire-XXXXX.firebaseio.com";
    var users = new Firebase(URL);

    $scope.auth = $firebaseSimpleLogin(users, function(error, user){});

    if ($scope.auth.user == null) {
      //$scope.auth.$login('facebook');
    }

    console.log($scope.auth);

    //$scope.auth.$logout('facebook');


    $scope.doLogin = function() {
      console.log($scope.facebookemail);
      console.log($scope.facebookpassword);

      $scope.auth.$login('facebook');

      $scope.$on("$firebaseSimpleLogin:login", function(evt, user) {
        storageManagement.runFirebase();
      });

      /* example of logging in while asking access to permissions like email, user_list, friends_list etc.
       * auth.$login('facebook', {
       rememberMe: true,
       scope: 'email,user_likes'
       });*/
    };
    $scope.doLogout = function() {
      $scope.auth.$logout();
    };
});

我正在将 $firebase 服务添加到我的控制器中,并将 $firebaseSimpleLogin 服务添加到我的控制器中。

这里暴露了两个按钮,登录/注销,从 Facebook 弹出 OAuth 窗口,我认为您不需要通过电子邮件/密码设置进行此操作,为了全面理解,请阅读 firebase 上的完整文档。

所以,一旦我们登录,我们可以访问规则中描述的表,如果我们选择电子邮件/密码,实际上即使对于 Facebook 或其他方法,我们也可以为某些 IDENTITIES 分配某些规则,所以你可以有一个 ADMIN 表,你可以保存在页面加载时读取的设置以应用您想要的任何内容。

现在,通过路由,我们可以检查 $scope.auth 的状态,如果我们把它放在 $rootScope 中,并在去路由时检查状态,如果状态检查,我们到达那个路由并且它被填充数据库中的东西,否则,即使有人破解了通往该路线的方法,它也不会看到任何东西,因为没有权限为未经授权/错误的电子邮件用户读取该表。

这大致基于这篇文章,http://www.ng-newsletter.com/posts/back-end-with-firebase.html ......我很难改变那个人在那里写的心态,但是,之后一整天,从 Firebase 阅读文档(并设置中间件,请注意),我想通了,它有效。

与数据库的连接像一个大对象一样暴露出来,您可以在其中执行任何您想要的操作。


这不是最完整的解释,但它应该让你在制作一些很棒的东西的路上做得很好:D

于 2014-01-22T09:36:45.647 回答
3

我遇到的最好的例子是 angular-app。

它非常全面,可满足您的所有需求。它是由《用 AngularJS 掌握 Web 应用程序开发》这本书的作者之一编写的。

https://github.com/angular-app/angular-app

来自 github 存储库:

AngularJS CRUD 应用程序演示目的

这个想法是为了演示如何使用 AngularJS 编写一个典型的、非平凡的 CRUD 应用程序。为了在其最有利的环境中展示 AngularJS,我们已经着手编写一个简化的项目管理工具,支持使用 SCRUM 方法的团队。示例应用程序试图展示以下方面的最佳实践:文件夹结构、使用模块、测试、与 REST 后端通信、组织导航、解决安全问题(身份验证/授权)。

在邮件列表中使用和支持 AngularJS 的过程中,我们学到了很多东西,并愿意分享我们的经验。

持久性存储:MongoDB 托管在 MongoLab 后端:Node.js 基于 Twitter 的引导构建的客户端 CSS 上的很棒的 AngularJS

这是一个完整的项目,其构建系统专注于 AngularJS 应用程序,并与 AngularJS 社区中常用的其他工具紧密集成:

由 Grunt.js 提供支持 使用 Jasmine 编写的测试 语法测试由 Karma Test Runner 执行(与 Grunt.js 构建集成) 构建支持 JS、CSS 和 AngularJS 模板缩小 Twitter 的引导程序,将 LESS 模板处理集成到构建中 Travis-CI 集成

于 2013-09-29T02:00:56.407 回答