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.
Comments