Tracking Expenses with CouchDB and Angular

This tutorial demonstrates building an expense-tracking application using CouchDB (a NoSQL database) and Angular (a JavaScript framework). The unique aspect is CouchDB's HTTP API, enabling direct communication between the Angular frontend and the database, eliminating the need for a separate backend server.

We'll cover building a small app step-by-step, with each step represented by a commit (including tests, though not detailed here). The complete code is available on GitHub (link not provided in the original, needs to be added if available).

Key Concepts:

• CouchDB's HTTP API: Direct client-side interaction via HTTP requests simplifies development.
• Angular's Dependency Injection (DI): Manages application dependencies, improving modularity and testability.
• Two-Way Data Binding: Efficiently synchronizes the Angular model and view, ensuring UI consistency with CouchDB data.
• Client-Side and Server-Side Validation: Angular handles frontend validation, while CouchDB enforces document validation for data integrity.
• Scalability: The tutorial showcases techniques like directives and data binding to build a scalable solution.

Why Choose CouchDB?

While client-side options like IndexedDB and Local Storage exist, a database server offers advantages, especially for collaborative applications. Multiple users can access and update the expense list concurrently. CouchDB's native HTTP support eliminates intermediary layers, simplifying communication between the application and the database. Its inherent support for replication makes distributed database systems easy to implement.

Prerequisites:

Install the latest CouchDB (version 1.6 or later) and a recent stable Node.js release (version 0.10.x or later).

Setting Up the Development Environment:

1. Install Node.js and Tools: Use an installer (available on the Node.js website) or a package manager like nvm. Install yo, generator-angular, grunt-cli, and couchapp globally using npm: npm install -g yo generator-angular grunt-cli couchapp

2. Create and Scaffold the Angular Application: Create a project directory, navigate to it, and use the Angular generator: mkdir expenses && cd expenses && yo angular expenses

3. Run the Development Server: Use Grunt to start a development server: grunt serve. This should open http://127.0.0.1:9000 in your browser.

4. Install CouchDB: Follow the CouchDB installation instructions for your operating system. (e.g., using brew on macOS).

Initial CouchDB Setup:

1. Start CouchDB: couchdb &

2. Create the Database: curl -X PUT http://127.0.0.1:5984/expenses

3. Insert Initial Documents: Use curl to add sample expense entries (example commands are provided in the original tutorial).

Enabling CORS:

To allow cross-origin requests from the Angular application to CouchDB, enable CORS in CouchDB's configuration (usually local.ini). The tutorial provides curl commands to enable CORS and set the origins to * (for development only; change this for production).

Angular and Dependency Injection:

The tutorial demonstrates using Angular's dependency injection to manage the database connection settings. A constant appSettings is created to hold the database URL.

Fetching Data with Angular's $http Service:

A CouchDB view (_design/expenses/_view/byName) is created to retrieve expense data. The Angular controller uses the $http service to make requests to this view and update the $scope with the retrieved data. The tutorial demonstrates using ng-repeat to display the data in the view.

Creating and Handling the Expense Submission Form:

An HTML form is added to allow users to input new expenses. ng-model directives bind the form inputs to the Angular scope. The ng-submit directive calls a controller function to send the data to CouchDB using $http.post. Optimistic updates are used to provide immediate feedback to the user.

Adding Validation:

Server-side validation is implemented in the CouchDB design document using validate_doc_update. Client-side validation is added using Angular's required and ng-pattern directives. The form's validity is checked using form.$invalid to disable the submit button if the form is invalid.

Conclusion:

The tutorial concludes by summarizing the key concepts covered and suggesting further exploration topics, such as hosting on CouchDB, document updates, custom directives, replication, and more advanced view functionalities. A FAQ section is also included to address common questions regarding hosting, using JavaScript/Node.js/CouchDB together, and installation/hosting recommendations.

The above is the detailed content of Tracking Expenses with CouchDB and Angular. For more information, please follow other related articles on the PHP Chinese website!