如何build立一个完整的后端可扩展的SPA

在过去的几个星期里,我一直在努力与Angular,Node,TDD,Heroku,Amazon S3等合作。试图更好地了解如何构build一个完整的可扩展的SPA,以及一个可靠的后端,使用grunt,bower,天堂尽pipe我明白通过噶玛testing是如何进行的,但是这应该是我的下一步了。

有一件事是肯定的: 它是一个信息


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

首先,我玩了

  • Angular App https://github.com/angular-app/angular-app
  • NG锅炉板https://github.com/joshdmiller/ng-boilerplate

读了好几十个post等

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

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

  • NodeJS作为后端
  • 表示为一个Web应用程序框架
  • NG锅炉作为客户
  • 该应用程序部署到Heroku
  • MongoDB for DB
  • Amazon S3用于dynamic存储

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

我想知道如何:

  • 从我看到的客户端直接连接到MongoDB?
  • angular度客户如何来回expression?
  • 我读了一篇有趣的文章http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application相关的authentication工作。

长话短说,没有我问了一大堆的问题,有人请详细描述这样一个应用程序的工作stream程? 获取会话,login,访问编辑内容,将高速路由绑定到angular度路由(例如X路由可以由pipe理员访问)等##

我头上有一个很大的模糊:)。

       

网上收集的解决方案 "如何build立一个完整的后端可扩展的SPA"

在过去的几个月里,我对这些问题和问题进行了很多研究,得出了以下结论:

为了达到我的目的,我需要一个几乎完全依赖于Angular的应用程序,而不需要单独的后端,而现在的后端应该来自Angular。

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

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

那么我要谈谈的主要问题是,对于在Angular中创build的真正的后端,我们需要安全的路由和安全的持久化方法,即数据库。

对于应用程序,我利用了ng-boilerplate的模块化和依赖意识的结构,我认为这是完美的angular度的应用程序。

无论如何,我会把事情从头到尾(最终产品明智的,如上所述的build设环境,这取决于你,但ng-boilerplate是真棒),在这里我们去。

  1. 在上层,我们有实际的Angular应用程序,只是我们想要的方式
  2. 服务器容器是一个NodeJS服务器,具有快速和其他模块,可以在不同的浏览器和设备上部署PARTIAL路由(在我的应用程序中,我制作了HTML5路由,通过express,.htaccess等设置,只要有部分URL应该redirect到索引,Angular将读取请求的path,并将zapp到那个位置)
  3. 在我的情况下,整个事情在Heroku上运行,在一个Node.JS应用程序上,如果你愿意的话,你可以安装其他的东西。

现在,持久性,有authentication和安全性,而不是依靠后端的,我使用的是firebase( https://www.firebase.com/ ),有一些伟大的教程,在那里帮助你去和真实在Angular APP中持久化,在login时使用路由,在login时访问数据库中的自定义表格/对象等。这是真正的交易。

如果您不希望依赖OAuth的可能网站(Facebook,github,persona或twitter)login,并希望自定义电子邮件和地址,则可以直接使用Firebase进行操作,创build帐户并将其删除。

FIREBASEangular度后端。

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

我不知道如何解决这个问题,所以我要创build一个Firebase数据库。 一旦我们创build它,在后端我们有几个选项,其中之一就是安全性。

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

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

我们可以保护每个用户的基础上,不同的规则,如果login或没有,我们也有规则inheritance等,请认真阅读文档,这是一个很好的阅读。

现在,要使这些规则生效,我们需要启用Firebase简单login并从Facebook,Twitter,Github,angular色,电子邮件和密码以及匿名中select所需的login方法。

对于一个真正的应用程序,我们需要写信息到数据库也作为匿名(用户会话等),也logging(上述任一选项)来存储和读取信息。

我想要快速简单的方法,做了一个Facebook身份validation,阅读那里的文档,我做了一个快速的Facebook应用程序,并在Facebook上的应用程序的设置我把Firebase的后端https://www.dropbox。 COM / S / xcd4b8tty1nlbm5 /截图%202014-01-22%2013.51.26.png

这给出了一个临时链接来login到Facebook,并有权访问“表”,否则locking,如果规则是auth !=null


现在,到angular落的后端。

Firebase为我们提供了一个库,可以放入我们的应用程序,以及一个用于Angular的SimpleLogin库,一个名为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之一。

这里暴露的范围两个button,login/注销,从Facebookpopup的OAuth窗口,电子邮件/密码设置,你不需要经过这个我想,要充分了解请阅读完整的文档在firebase。

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

现在,通过路由,我们可以检查$ scope.auth状态,如果我们放在$ rootScope中,并检查路由时的状态,如果状态检查,我们到达该路由,并获得填充否则,即使有人攻击它的路由,它不会看到任何东西,因为没有权限读取该表的未经授权/错误的电子邮件用户。

这是松散的基础上这篇文章, http://www.gn-newsletter.com/posts/back-end-with-firebase.html …我很难改变从那家伙写在那里的心态,但是,之后从Firebase阅读文档(并设置中间件,介意您)整整一天,我就明白了它的工作原理。

与数据库的连接就像一个BIG对象一样暴露,你可以在其中进行任何你想要的操作。


这不是最完整的解释,但它应该让你很好地做出一些令人敬畏的事情:D

我遇到的这个最好的例子叫做angular-app。

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

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

从github回购:

AngularJS CRUD应用程序演示目的

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

我们在使用和支持邮件列表上的AngularJS方面学到了很多东西,并希望分享我们的经验。

持久性存储:在MongoLab上托pipe的MongoDB后端:Node.js客户端上的Awesome AngularJS基于Twitter的引导构build的CSS

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

由使用Jasmine语法testing编写的Grunt.jstesting所支持的testing由Karma Test Runner(与Grunt.js构build集成)构build,支持JS,CSS和AngularJS模板微缩Twitter的引导与LESS模板处理集成到构buildTravis-CI集成