Tag Archives: Node.LS

How I Found A Job With Node + Angular, Part 4: Strap The Boot

Posted on by
Reply

In the previous posts we learned some Node.JS (and express) basics, incorporated CouchDB as our database and used some Angular.JS code to present our list of jobs.

But the final result we got is not a pretty sight, and not very usable or friendly. Those who know me, agree that I’m not that strong in UI desigbootstrapn or implementation, so to make our application prettier and more usable, let’s use some framework for that. There are a lots of frameworks out there, but I had my eye on Bootstrap. Maybe it’s my strong mobile orientation, maybe the ease of use or maybe it’s just one of the frameworks I encountered first. In any case, I like the thinking of Bootstrap makers, I like that it is a remarkable responsive UI framework, and that it is fairly easy to us. So you can download Bootstrap from here, and lets make some changes to our application, using Bootstrap styles:

<html ng-app="geojob">
<head>
  <title>GeoJob Finder - Bootstrap GeoJob</title>
  <link rel="stylesheet" href="bootstrap-3.1.1-dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="bootstrap-3.1.1-dist/css/bootstrap-theme.min.css" />
  <link rel="stylesheet" href="css/geojob.css" />
</head>
<body>
  <section class="container"  ng-controller="JobsController">
    <div class="header"><h1>GeoJob Finder <small>Bootstrap GeoJob</small></h1></div>
    We have a total of: {{jobs.total_rows}} jobs
    <div class="list-group">
      <a href="#" class="list-group-item" ng-repeat="job in jobs.rows">{{job.key}}</a>
    </div>
  </section>
  <script type="text/javascript" src="js/angular.min.js"></script>
  <script type="text/javascript" src="js/geojob-app.js"></script>
</body>
</html>

Continue reading →