In the previous tutorial, we implemented the sign-up functionality and also saw how to use AngularJS services to share data between controllers. In this part of the tutorial series, we'll be creating an interface for the logged in user to create a blog post.
Getting Started
Let's start by cloning the third part of the tutorial from GitHub.
1 |
git clone https://github.com/jay3dec/AngularJS_Firebase_Part3.git |
After cloning the source code, navigate to the project directory and install the required dependencies.
1 |
cd AngularJS_Firebase_Part3 |
2 |
npm install |
Once the dependencies are installed, start the server.
1 |
npm start |
Point your browser to http://localhost:8000/app/#/home and you should have the application running.
Creating the Add Post Page
We need a page with which the user can create and publish blog posts. Let's add the require templates and files to create the Add Post page.
Navigate to the AngularJS_Firebase_Part3/app directory and create a folder called addPost. Inside addPost create an HTML file called addPost.html and addPost.js. In addPost.html add the following HTML code:
1 |
<html lang="en"> |
2 |
|
3 |
<head>
|
4 |
|
5 |
<title></title>
|
6 |
|
7 |
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> |
8 |
|
9 |
<link href="blog.css" rel="stylesheet"> |
10 |
|
11 |
|
12 |
</head>
|
13 |
|
14 |
<body>
|
15 |
|
16 |
<div class="blog-masthead"> |
17 |
<div class="container"> |
18 |
<nav class="blog-nav"> |
19 |
<a class="blog-nav-item " href="#">Home</a> |
20 |
<a class="blog-nav-item active" href="addPost.html">Add Post</a> |
21 |
|
22 |
</nav>
|
23 |
</div>
|
24 |
</div>
|
25 |
|
26 |
<div class="container"> |
27 |
|
28 |
<form class="form-horizontal"> |
29 |
<fieldset>
|
30 |
|
31 |
<!-- Form Name -->
|
32 |
<legend>Create Post</legend> |
33 |
|
34 |
<!-- Text input-->
|
35 |
<div class="form-group"> |
36 |
<label class="col-md-4 control-label" for="txtTitle">Title</label> |
37 |
<div class="col-md-4"> |
38 |
<input id="txtTitle" name="txtTitle" type="text" placeholder="placeholder" class="form-control input-md"> |
39 |
|
40 |
</div>
|
41 |
</div>
|
42 |
|
43 |
<!-- Textarea -->
|
44 |
<div class="form-group"> |
45 |
<label class="col-md-4 control-label" for="txtPost">Post</label> |
46 |
<div class="col-md-4"> |
47 |
<textarea class="form-control" id="txtPost" name="txtPost"></textarea> |
48 |
</div>
|
49 |
</div>
|
50 |
|
51 |
<!-- Button -->
|
52 |
<div class="form-group"> |
53 |
<label class="col-md-4 control-label" for="singlebutton"></label> |
54 |
<div class="col-md-4"> |
55 |
<input id="singlebutton" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" /> |
56 |
</div>
|
57 |
</div>
|
58 |
|
59 |
</fieldset>
|
60 |
</form>
|
61 |
|
62 |
|
63 |
</div>
|
64 |
<!-- /.container -->
|
65 |
|
66 |
<div class="blog-footer"> |
67 |
<p>AngularJS & Firebase Blog App</p> |
68 |
|
69 |
</div>
|
70 |
|
71 |
|
72 |
|
73 |
</body>
|
74 |
|
75 |
</html>
|
Inside addPost.js, we'll define the routes for the Add Post view. $routeProvider has a method called when, which we'll use to create a route for our addPost view. We'll set a templateUrl which would be rendered in the index.html. We'll also set a controller (logic which controls a view) for the newly created $scope of the addPost view. Here's how addPost.js finally looks:
1 |
'use strict'; |
2 |
|
3 |
angular.module('myApp.addPost', ['ngRoute']) |
4 |
|
5 |
.config(['$routeProvider', function($routeProvider) { |
6 |
$routeProvider.when('/addPost', { |
7 |
templateUrl: 'addPost/addPost.html', |
8 |
controller: 'AddPostCtrl' |
9 |
});
|
10 |
}])
|
11 |
|
12 |
.controller('AddPostCtrl', ['$scope', function($scope) { |
13 |
|
14 |
}]);
|
Include the myApp.addPost module in app.js.
1 |
angular.module('myApp', [ |
2 |
'ngRoute', |
3 |
'myApp.home', |
4 |
'myApp.register', |
5 |
'myApp.welcome', |
6 |
'myApp.addPost' // Newly added module |
7 |
])
|
Also, add a reference to the addPost.js in the app/index.html page.
1 |
<script src="addPost/addPost.js"></script> |
Save the changes, restart the server and point your browser to http://localhost:8000/app/#/addPost and you should be able to see the add post page.
Validating the Add Post Fields
First, we need to add an ngModel directive to the input text box and text area in the add post page to enable the two-way data binding.
1 |
<input id="txtTitle" name="txtTitle" ng-model="article.title" type="text" placeholder="placeholder" class="form-control input-md"> |
2 |
|
3 |
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea> |
When a user publishes a blog post, it should have a title and post. So we'll add validation to check if a blog post has title and post. If the title and post are provided, we'll enable the publish button and the user can publish his or her blog post. We'll use an ngDisabled directive to disable the publish button. Add the ngDisabled directive to the publish button as shown.
1 |
<input id="singlebutton" ng-disabled="!article.title || !article.post" name="singlebutton" class="btn btn-primary" type="submit" value="Publish" /> |
As seen in the above code, ngDisabled would disable the publish button when the title or post of the article is not provided.
Implementing the Add Post Functionality
Next, we'll save the title and post of the article to Firebase when the user clicks the publish button. In order to save the data to Firebase, we'll use the $push API.
Add the ngController directive to the body of addPost.html and also add the ngSubmit directive to the form in addPost.html.
1 |
<body ng-controller="AddPostCtrl"> |
1 |
<form class="form-horizontal" ng-submit="AddPost()"> |
Open up addPost.js and add a new function called AddPost inside the AddPostCtrl controller as shown:
1 |
.controller('AddPostCtrl', ['$scope', function($scope) { |
2 |
$scope.AddPost = function() { |
3 |
|
4 |
// Add Post logic will be here
|
5 |
|
6 |
}
|
7 |
}]);
|
We'll be needing $firebase to push data to Firebase Db, so inject the $firebase module in the AddPostCtrl controller.
1 |
.controller('AddPostCtrl', ['$scope','$firebase',function($scope,$firebase) { |
Create a Firebase object using your Firebase URL.
1 |
var firebaseObj = new Firebase("https://blistering-heat-2473.firebaseio.com"); |
Using firebaseObj we'll create an instance of $firebase which we'll use to push data to Firebase.
1 |
var fb = $firebase(firebaseObj); |
Read the title and post entered by the user using $scope.
1 |
var title = $scope.article.title; |
2 |
var post = $scope.article.post; |
Since we have the title and post, we'll call the Firebase push API to save data to Firebase.
1 |
fb.$push({ |
2 |
title: title, |
3 |
post: post |
4 |
}).then(function(ref) { |
5 |
console.log(ref); |
6 |
}, function(error) { |
7 |
console.log("Error:", error); |
8 |
});
|
Now, save all the changes, restart the server, and try to add a new blog post. Once you've clicked the publish button, check the browser console for the reference object. After that, log into your Firebase account and you should be able to see the data.
Wrapping It Up
In this part of the series, we created an interface to add or publish blog posts. In the next part of this series, we'll create an interface to fetch and display all the blog posts added by users.
Source code from this tutorial is available on GitHub. Do let us know your thoughts in the comments below!
