Specifications
Before beginning work on any project, it's usually a good idea to know what you're building. Below is a basic list of things we want our users to be able to do:
Create new postsView all posts ordered by upvotesAdd comments about a given postView comments for a given postUpvote posts and comments
In addition to technologies that make up MEAN, we're going to enlist the help of several other libraries to help us achieve our goals:
Mongoose.js for adding structure to MongoDBAngular ui-router for client-side routingTwitter Bootstrap for some quick styling
Jumping in with Angular
To begin this tutorial, we're going to start with the Angular side of things. AngularJS is a frontend framework developed by Google with the goal of making single page web applications easier to build, test, and maintain. Throughout this tutorials, we'll be linking to our A Better Way to Learn Angular guide which can provide supplementary information.
Without further ado, let's jump in...
Getting Started
As mentioned before, this tutorial will take you through building out a Hacker News/Reddit clone, which we're going to name "Flapper News". To keep things simple, we're going to kick things off with two files.
Create two empty files calledindex.html (for writing the template) and app.js (for defining our AngularJS logic)
To begin, our index.html will look like this:
<html> <head> <title>My Angular App!</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script> <script src="app.js"></script> </head> <body ng-app="flapperNews" ng-controller="MainCtrl"> <div> {{test}} </div> </body> </html>
Our app.js is going to look like this:
angular.module('flapperNews', []) .controller('MainCtrl', [ '$scope', function($scope){ $scope.test = 'Hello world!'; }]);
With these several lines of code, we've set up a new AngularJS app and created a new controller. You'll notice that we declare a variabletest in the controller and display its contents using the AngularJSnotation. This is demonstrating one of the most powerful features of AngularJS, which is its two-way data-bindings.
If you aren't familiar with data-binding in AngularJS, read the AngularJS Guide on two-way data-binding
Displaying Lists
One thing that's is going to be absolutely fundamental to our app is displaying lists. Fortunately, angular makes this really easy using the ng-repeat directive.
To begin, we're going to modify our controller to include a new$scope variable that defines a list of post titles on line 8 inapp.js:
$scope.posts = [ 'post 1', 'post 2', 'post 3', 'post 4', 'post 5' ];
The $scope variable serves as the bridge between Angular controllers and Angular templates. If you want something to be accessible in the template such as a function or variable, bind it to$scope
Now that we have a list of data we want to repeat, let's use ng-repeat to do it. Add the following code to line 8 of index.html, replacing the div that was there before:
<div ng-repeat="post in posts"> {{post}} </div>
When you refresh the page you should see a list of posts!
Now what if we want to display additional information about our posts? ng-repeat lets us do that too!
Let's amend our posts object to include some additional information we might be interested in displaying like the number of upvotes:
$scope.posts = [ {title: 'post 1', upvotes: 5}, {title: 'post 2', upvotes: 2}, {title: 'post 3', upvotes: 15}, {title: 'post 4', upvotes: 9}, {title: 'post 5', upvotes: 4} ];
Now we change our ng-repeatdirective to display the new information:
<div ng-repeat="post in posts"> {{post.title}} - upvotes: {{post.upvotes}} </div>
Of course it is important to order posts by number of upvotes, and we can tap into an angular filter to make it happen.
Add a filter to our posts based on the number of upvotes in descending order:
<div ng-repeat="post in posts | orderBy: '-upvotes'"> {{post.title}} - upvotes: {{post.upvotes}} </div>
AngularJS comes with several built in filters but you can also write custom filters tailored to your specific needs.
Getting User Input
Now that we've learned how to display lists of information with Angular, it'd really be great if we could have the user add posts. To do this, we first need to add a function to our $scope variable.
Create a $scope function that will add an object into the posts array:
$scope.addPost = function(){ $scope.posts.push({title: 'A new post!', upvotes: 0}); };
When this function is invoked, it will append a new post to our$scope.posts variable. Now we're going to have to allow the user to actually execute this function.
Create a button that executes our addPost $scope function using the ng-click directive:
<button ng-click="addPost()">Post</button>
Great, we can now click a button and have a new post show up! Let's extend this by allowing the user to actually specify what they want the title to be. First, we need to build out the form in HTML and sprinkle it with some Angular Magic.
Create a form below the ng-repeat div that will allow us to enter custom posts:
<form ng-submit="addPost()"> <input type="text" ng-model="title"></input> <button type="submit">Post</button> </form>
Here we've created a form that encompasses our title text-box and 'Post' button. We are also now calling our addPost() function using the ng-submit directive, which has the added benefit of the user being able to press the 'enter' key to submit the form. Finally, we're using the ng-model directive to bind the contents of the text box to$scope. This will allow our controller to access the contents of the text box using $scope.title.
To accompany the changes to our template, we need to make some tweaks to addPost().
Have the addPost function retrieve the title entered into our form, which is bound to the $scope variable title, and settitle to blank once it has been added to the posts array:
$scope.addPost = function(){ $scope.posts.push({title: $scope.title, upvotes: 0}); $scope.title = ''; };
When we add a post we are now getting the title from $scope.title, which we then clear after the post has been created. At this point, it makes sense to prevent the user from posting a blank title.
Prevent a user from submitting a post with a blank title by adding the following line to the beginning of addPost():
if(!$scope.title || $scope.title === '') { return; }
