Building networking site twitter with Nodejs & Angularjs

Building networking site twitter with Nodejs & Angularjs

  • 2016-09-06
  • 1795

Have you Ever think about creating your own social networking site twitter or facebook if yes then you have gone with many scripts ! but why if you can create it by you self ! here is full series about creating a scial networking site like twitter please  note that i will update a tutorial daily with this series so come back often !

The application will look similar to Twitter. There will be a main page showing the newest posts, and there will be a profile page for each user showing their recent posts. As you explore different parts of the application, I’ll introduce new features such as live updating via WebSockets.

To start, you’ll build a page showing the most recent posts. Posts will be anonymous until you add some authentication.

Creating a Static Mockup of the Recent Posts Page

The first step is to build a static mockup page with HTML and Bootstrap (http://getbootstrap.com) for styling. Create a new directory for your application and create a file called posts.html with the following HTML:

<!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 </head>
 <body>
 <div class='container'>
 <h1>Recent Posts</h1>
 <ul class='list-group'>
 <li class='list-group-item'>
 <strong>@deven</strong>
 <span>Node rules!</span>
 </li>
 <li class='list-group-item'>
 <strong>@deven</strong>
 <span>Trying out angular.js...</span>
 </li>
 </ul>
 </div>
 </body>
 </html>

Now open this HTML document in your browser.  I like to start building all Angular features following this approach, first by dropping static HTML into a page and then replicating it with dynamic Angular code.

Angularizing the Page

Angular.js essentially allows you to data bind JavaScript objects to the DOM (also known as HTML elements). You basically wire up objects in a controller to something called $scope and declare in your HTML how it should be displayed.

Include Angular before your closing </body> tag:

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js'></script>

Now declare your <body> element as an Angular app:


<body ng-app='app'>

For this to work, you need to first declare a matching module. Do the following in a <script> tag after the Angular include tag:

 <script>
 angular.module('app', [])
 </script>

At this part of the book, you will be working in a <script> tag inside the HTML rather than referencing external JavaScript files. It might seem messy, but this is just temporary until you get Node to serve your HTML for you.

Modules are a way to separate parts of Angular code. This is a module declaration; the first argument is the name of the module, and the second is an array of modules that this module depends on. You’ll use modules to get access to things such as ngAnimate (animation tools), ngRoute (client-side router for single-page apps), or modules of your own. I’ll talk more about modules later, but for now just know that your app must be declared as a module.

To declare a controller, you call the .controller() method on an instance of a module. This method takes two arguments: a name and a function used to build an instance of the controller. All Angular components follow this same pattern.

Make your `<script>` tag look like the following:
<script>
 var app = angular.module('app', [])
 app.controller('PostsCtrl', function ($scope) {
 $scope.posts = [
 {
 username: 'deven',
 body: 'Node rules!'
 },
 {
 username: 'deven',
         body: 'trying out angular.js...'
 }
 ]
 })
 </script>

Here you’re storing the app module into a variable app and then creating a controller on it called PostsCtrl. This controller has an array that represents the posts you see in the HTML.

When you declare a controller, you do what’s known in the Angular world as dependency inject $scope.

Creating a controller (or other Angular component) involves declaring a function like you did earlier. When you declare arguments, Angular looks up the dependencies based on what you named them. If you rename $scope to $foobar, for example, you would see an error (although not with the code you have right now since the controller wouldn’t load). In my opinion, this dependency injection is the most powerful part of Angular.

What is $scope? It’s simply an object you can access in the HTML and in the controller.

You’ll see more examples of dependencies later. For now, let’s just dump $scope.posts onto the page. Add the following HTML to the page (keep your existing static HTML mockup for reference):

 <div ng-controller='PostsCtrl'>
 {{ posts }}
 </div>

You should now see a JSON representation of the controller’s $scope.posts on the page. You can have JavaScript inside those double-curly brackets, so if you wanted to see just the body of the first post, you would do this:

<div ng-controller='PostsCtrl'>
 {{ posts[0].body }}
 </div>

Remember that when sharing controller data to the view, use $scope. When referencing controller data from the view, leave out $scope.

Now that you’re this far, you can finish Angularizing this page, at least the static version of it. Here’s a complete example:

<!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 </head>
 <body ng-app='app'>
 <div ng-controller='PostsCtrl' class='container'>
 <h1>Recent Posts</h1>
 <ul class='list-group'>
 <li ng-repeat='post in posts' class='list-group-item'>
 <strong>@{{ post.username }}</strong>
 <span>{{ post.body }}</span>
 </li>
 </ul>
 </div>
 <script src='https://ajax.googleapis.com/ajax/libs/<a href="">angularjs</a>/1.2.18/angular.js'></script>
 <script>
 var app = angular.module('app', [])
 app.controller('PostsCtrl', function ($scope) {
 $scope.posts = [
 {
 username: 'deven',
 body: 'Node rules!'
 },
 {
 username: 'deven',
 body: 'trying out angular.js...'
 }
 ]
 })
 </script>
 </body>
 </html>

Adding New Posts

You’ve now linked up the code to Angular such that your controller is providing the data and then allowing the view to display it, but right now it’s the same as when you started with the static HTML.

What you need to do is have a field on the page for users to add new posts.

If you add a new element to the $scope.posts array, Angular will automatically update the view to show it. If you also have an input and button on the page to add a new post, you just need to append to that array.

To illustrate, let’s add a button to the page. Before the list-group <ul>, add this button:

<button ng-click=’addPost()’ class=’btn btn-default’>Add Post

ng-click is a directive that is typically used to call a function on $scope. Right now clicking it will do nothing, but if you add the function, you can add a new post to your list of posts. Add the following line inside your controller:

$scope.addPost = function () {
 $scope.posts.unshift({
 username: 'deven',
 body: 'my new post!'
 })
 }

unshift is a JavaScript method on arrays that pushes a new element to the beginning of the array. You should now be able to click the Add Post button and add elements to the list

Because you didn’t have to write any code to actually update the list when $scope.posts changed, this allows you to cleanly separate the logic that updates the data from the view logic. If you updated the posts by deletion, Ajax call, or WebSockets information, you just need to update $scope.posts, and Angular will take care of updating the view for you.

Now you need to add a couple of inputs to let the user put their own body in as the post. To do this, you will add an <input> to the page, data bind it to $scope, and then use that under addPost(). Add the following HTML before the Add Post button:

<input ng-model=’postBody’ class=’form-control’ />

The ng-model directive hooks an input to a $scope property. Now if you access $scope.postBody inside the controller, you’ll get the data inside this text field.

To use this instead of your stock data, update the addPost() function like so:

$scope.addPost = function () {
 $scope.posts.unshift({
 username: 'dickeyxxx',
 body: $scope.postBody
 })
 }

Now whatever the user enters in the input field will be their post body.

One issue is that the field doesn’t clear after they make a post. To fix that, simply set $scope.postBody to null inside addPost():

$scope.postBody = null

Because the data binding is two-way, anything you set $scope.postBody to will update the input element, and vice versa.

Here is a complete example of the app with some Bootstrap code added for pizazz:

<!DOCTYPE html>
 <html>
 <head>
 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
 </head>
 <body ng-app='app'>
 <div ng-controller='PostsCtrl' class='container'>
 <h1>Recent Posts</h1>
 <form role='form'>
 <div class='form-group'>
         <div class='input-group'>
 <input ng-model='postBody' class='form-control' />
 <span class='input-group-btn'>
 <button ng-click='addPost()' class='btn btn-default'>Add Post</button>
 </span>
 </div>
 </div>
 </form>
 <ul class='list-group'>
 <li ng-repeat='post in posts' class='list-group-item'>
 <strong>@{{ post.username }}</strong>
 <span>{{ post.body }}</span>
 </li>
 </ul>
 </div>
 <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js'></script>
 <script>
 // create our app module
 var app = angular.module('app', [])
// create the PostsCtrl module
 // dependency inject $scope
 app.controller('PostsCtrl', function ($scope) {
// the function runs when the "Add Post" button is clicked
 $scope.addPost = function () {
 // Only add a post if there is a body
 if ($scope.postBody) {
 // unshift a new post into $scope.posts
 $scope.posts.unshift({
 username: 'dickeyxxx',
 body: $scope.postBody // use the text entered
 })
 // clear out the input field
 $scope.postBody = null
 }
 }
      // starting data
 $scope.posts = [
 {
 username: 'dickeyxxx',
 body: 'Node rules!'
 },
 {
 username: 'jeffdickey',
 body: 'trying out angular.js...'
 }
 ]
 })
 </script>
 </body>
 </html>

Next Steps

You now have a fully functioning app for posting status updates. As I’m sure you’re astutely aware, the major problem now is that it never persists. These posts disappear when the user closes the browser window. You could persist them into the browser’s local storage, but that wouldn’t allow you to share the data with other users (which is pretty important for a social networking application).

Source via: dunebook.com

Suggest

Angular 2 with TypeScript for Beginners: The Pragmatic Guide

The Complete Angular 2 With Typescript Course - Update RC 6

Angular 2 and NodeJS - The Practical Guide to MEAN Stack 2.0

JavaScript Tutorials: Understanding the Weird Parts

Learn How To Deploy Node.Js App on Google Compute Engine