In this tutorial you will learn to build a simple social networking app using Angularjs .To start, you’ll build a page showing the most recent posts. Posts will be anonymous until you add some authentication. so lets get started.. ;)

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>@dickeyxxx</strong>
        <span>Node rules!</span>
      </li>
      <li class='list-group-item'>
        <strong>@jeffdickey</strong>
        <span>Trying out angular.js...</span>
      </li>
    </ul>
  </div>
</body>
</html>

Now open this HTML document in your browser. You should see the screen shown below 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.

Image
Advertisements