How I Found A Job With Node + Angular, Part 5: Mind The Map

In this post I would like to start adding some mapping functionality to our application. As always, there are a lot of different ways to achieve this goal, but I have chosen to go with Google Maps as the mapping solution provider, because of their clean and simple API, the visualization layers, and frankly – because I have used it in the past and know it a little bit. Even with that decided – there still a lot of ways to incorporate the Google Map in our application. Let’s try an Angular add-on that will aBowerdd Google Maps directives to Angular. It is called Google Maps for AngularJS, and before we can use it, let’s install another package and dependency manager that will ease the add-on installation – Bower. You can install it yourself by placing the add-on JS in your js sub folder, but you will need to install some dependencies as well (lodash in this case). Bower packages will be placed under the “bower_components” sub folder.

> npm install -g bower
...
> bower install angular-google-maps

After the packages are installed, you can reference them directly from the install folders:
bower-packages Continue reading

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

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

How I Found A Job With Node + Angular, Part 3: The Angular Angle

In the first post, I explained my frustration about seeking possible close (geographically) and awesome future employers. I started my journey towards geo aware job finding application by discussing Node.JS basics. In the previous post we added some database functionality with CouchDB.jquery

Now it is time to start showing some UI, to display the jobs stored in our database. There are many modern UI/Web frameworks that can do the job. My favorites are jQuery (mainly because of jQuery mobile anjquery-mobiled me being mobile oriented) and Angular.JS. I’ve chosen Angular for this tutorial. Download and install the Angular files. I would also recommend the excelleAngularJS-largent Angular free tutorial to get you started with basic Angular concepts.

Continue reading

How I Found A Job With Node + Angular, Part 1: Let’s Do Some Node

After 4 years in AT&T as mobile R&D group manager and system architect (working on AT&T Connect and Unified Communications products) I was leaving and looking for a new position. If you ever looked for an appealing position in the past, you must have connectnoticed a disturbing fact: some of the more attractive positions are offered far far away (geographically speaking) from where you live. At this time in my life I was not willing to move out for a new job (the family really likes our humble neighborhood and community) nor commute to death (in here that meant no more than 1 hour travel for each direction). So my career council shared with me a web site that offered all the relevant companies in my field, with a geographical distribution information, to help me choose the “right” company for me. While this web site was a helping factor in my job search, it was annoying me for its old user interface design, and poor usability. And since I had some free time now, I decided (you know me – if there is something I love it is to learn some new stuff, and fix some broken things) to try to make a better tool for my fellow job seekers. Continue reading