An Angular CRUD Application with a PostgreSQL Database
AngularJS
NodeJS
Express
PostgreSQL
Knex.js
Bootstrap
Heroku
Reddit Clone is an Angular 1.6 CRUD (create, read, update, delete) Node.js Express application. This is a week-long individual assignment from the Angular unit of Galvanize's 24-week web development immersion course. The database is seeded and queried using Knex.js.
View Live View CodeLearning how to structure an AngularJS application was one of my biggest takeaways from this project.
The application architecture is compartmentalized by component type (e.g. the post components), rather than by services, controllers and templates. This places related content together, making it easier to find a component's associated service and template.
The comments component displays post comments to the view. On initialization, the comments component renders the comments template with content retreived using the comment service function getComments(). When the comments component's updateComments() function is called in the comments template, it uses the comment service functions getComments() and addComment() to add the user's new comment to the database and render the updated comments.
Any functions that make requests to query the database are seperated out into the comments service. Here getComments() retreives the comments currently in the database, while addComments() inserts a new comment into the database. The service also stores the comments retreived from the most recent database query. This allows multiple components to receive the same data from a single source of truth (eg. in posts, where the post-edit, post-form, post-list and post-single components alll draw on the post service to obtain current data).
The comments template uses two-way data binding to render a live view of the comments. If the user submits a new comment, the controller's updateComments() function is called. This updates the comments in the database to include the new comment, and the results are immediately reflected in the view.
One of the challenges I faced was figuring out how to pass data between components. For example, in order to edit a post, the user would ideally see an edit form prepopulated with the post's current data. In order to show this view, I needed to pass the post id and and post from the post-single component to the post-edit component.
The acceptable variables for the post-edit component are defined in the the app.config.js file's $stateProvider. The id variable is defined in the url '/post/:id/edit', and the post variable is included in the params object.
In the post-single template, there is a an 'edit' button. When clicked, user is rerouted to a view where they can edit the associated post. The post id and post are passed as variables from the post-single component to the post-edit component.
In the post-edit template, the current post's title is displayed, and the post variable is passed once again, this time to the post-form component.
The post form is rendered with prepopulated data from the passed down post variable. Because the user is editing an existing post, the submit button says 'Update Post'. When the user submits the form, the controller's createNewPost() function is called.
In the post-form controller, the form's submit button content is changed from 'Create Post' to 'Update Post' because a post with an id has been passed down from the post-edit component. In createNewPost() the post service's editPost() function is called.
In the post service, the editPost() function makes a patch request to update the database with the user's edited post information. Afterwards, the getPosts() function is called to request the updated version of the posts from the database, and the user is redirected to the post-list view.