Lets Create a Twitter like website with nodejs & angularjs together

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/angularjs/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>

About the author

Deven Rathore

I'm Deven Rathore, a multidisciplinary & self-taught designer with 3 years of experience. I'm passionate about technology, music, coffee, traveling and everything visually stimulating. Constantly learning and experiencing new things.

  • Marcpowo

    +1 ;)

Pin It on Pinterest

Shares