跟踪CouchDB和Angular的费用

>本教程演示了使用CouchDB（NOSQL数据库）和Angular（JavaScript框架）构建费用跟踪应用程序。 独特的方面是CouchDB的HTTP API，可以在Angular Frontend和数据库之间进行直接通信，从而消除了对单独的后端服务器的需求。

>我们将逐步构建一个小型应用程序，每个步骤都以提交为代表（包括测试，尽管在此处尚未详细介绍）。完整的代码可在github上找到（原始代码未提供，需要添加如果可用，则需要添加）。

密钥概念：

>

> couchdb的http api：通过http请求直接客户端交互简化开发。
• > Angular's依赖注入（DI）：
管理应用程序依赖性，改善模块化和可检验性。
• 双向数据绑定：有效地同步了角模型和视图，确保UI与CouchDB数据一致。
>
• >客户端和服务器端验证：可伸缩性：教程展示了指令和数据绑定的技术，以构建可扩展解决方案。>
• 为什么选择couchdb？
• > >客户端选项（例如IndexEdDB和Local Storage存在），数据库服务器提供了优点，尤其是对于协作应用程序。 多个用户可以同时访问和更新费用列表。 CouchDB的本机HTTP支持消除了中间层，简化了应用程序和数据库之间的通信。 它对复制的固有支持使分布式数据库系统易于实现。
>先决条件：

>安装最新的couchdb（1.6版或更高版本）和最新的稳定node.js版本（版本0.10.x或更高版本）。

设置开发环境：

>

>

> install node.js and Tools：

使用安装程序（在Node.js网站上可用）或NVM等软件包管理器。安装

，，和

使用npm：
1. >

   yo创建和脚克式Angular应用程序：创建一个项目目录，导航到它，然后使用Angular Generator：generator-angulargrunt-cli couchapp npm install -g yo generator-angular grunt-cli couchapp

运行开发服务器：
2. 使用Grunt启动开发服务器：。 这应该在您的浏览器中打开

   。> mkdir expenses && cd expenses && yo angular expenses

3. 4. >>安装couchdb：按照操作系统的CouchDB安装说明。 （例如，在macos上使用）。brew

   初始couchdb设置：

   1. 启动couchdb：couchdb &

   2. 创建数据库：curl -X PUT http://127.0.0.1:5984/expenses>

   3. >插入初始文档：>使用添加示例费用条目（原始教程中提供了示例命令）。 curl

   启用CORS：

   允许从Angular应用程序到CouchDB的交叉原始请求，在CouchDB的配置中启用CORS（通常）。 该教程提供

   命令以启用CORS并将其设置为

   >（仅用于开发；为生产更改此内容）。local.ini curl*>角度和依赖注入：

   > >教程演示了使用Angular的依赖项注入来管理数据库连接设置。 创建一个常数以保存数据库URL。

   > 用Angular's

   服务：appSettings

   >

   $http> >创建一个CouchDB视图（

   ）来检索费用数据。 Angular Controller使用服务来向此视图提出请求，并使用检索到的数据更新

   。 教程演示了使用_design/expenses/_view/byName在视图中显示数据。 $http$scope ng-repeat

   创建和处理费用提交表格：>

   添加了HTML表单，以允许用户输入新的费用。 指令将表单输入结合到角范围。 该指令调用控制器函数，使用

   将数据发送到couchdb。 乐观的更新用于向用户提供立即反馈。>

   添加验证：

   ng-model>服务器端验证使用ng-submit>在CouchDB设计文档中实现。 使用Angular's$http.post和

   指令添加客户端验证。 如果表格无效，则使用

   检查表格的有效性。

   validate_doc_update结论： required

   教程结束时，总结了所涵盖的关键概念并建议进一步的探索主题，例如在CouchDB上托管，文档更新，自定义指令，复制和更高级的视图功能。 还包括一个常见问题部分，以解决有关托管，使用JavaScript/node.js/couchdb的常见问题，以及安装/托管建议。

以上是跟踪CouchDB和Angular的费用的详细内容。更多信息请关注PHP中文网其他相关文章！