MLS Example

Installing node

Go to http://nodejs.org and download the binary for your platform. Installing node will also install npm.

Example application

Install global modules

Yoeman:

$npm install -g yo

Grunt:

$npm install -g grunt-cli

Bower:

$npm install -g bower

Angular fullstack generator:

$npm install -g generator-angular-fullstack

Step 1 - generate

Create a directory for the applicaiton and generate it:

mkdir ~/mlshack
cd ~/mlshack
yo angular-fullstack mlshack

Run it:

grunt server

Check it out. Browse to http://localhost:9000 to view your generated application.

Step 2 - hook up the API

Install the request module (request provides simplified http and https client services).

$npm install request --save

Open the file ~/mlshack/lib/controllers/api.js. Add the line:

var request = require('request');

Now add the function below to the same file

exports.listings = function(req, res) {
request('https://api.solidearth.com/sandbox/v1/search/baarmls?MlsStatusin=Active&sortOption=ListPrice&class=Residential&page=0&format=json&api_key=9c2pk3rma6jzbf8v8ccsm6yy', function(error, response, body) {
if (!error && response.statusCode === 200) {
res.json(JSON.parse(body));
}
else {
res.send(500, {error: error});
}
});
};

Open the file ~/mlshack/lib/routes.js and add the line:

app.get('/api/listings', api.listings);

Run it:

$grunt server

Check it out. Navigate to http://localhost:9000/api/listings. This should now display the raw data from your MLS query. Congratulations you have successfully fetched MLS data using node.js and express.

Step 3 - Do something with the data

Create a file ~/mlshack/app/scripts/controllers/listings.js. Add the following code to the file:

'use strict';
angular.module('mlshackApp').controller('ListingsCtrl', function ($scope, $http) {
$scope.formatAddress = function(listing) {
var address = listing.Location.address;
return address.StreetNumber + ' ' + address.StreetName + ' ' + address.City + ' ' + address.PostalCode;
};
$http.get('/api/listings').success(function(listings) {
$scope.listings = listings.listing;
});
});

Create a file ~/mlshack/app/views/partials/listings.html. Add the following templatized markup

<div ng-include="'partials/navbar'"></div>
<div class="row marketing">
<h4>Address</h4>
<div ng-repeat="listing in listings">
<p>{{formatAddress(listing)}}</p>
</div>
</div>
<div class="footer">
<p>♥ from nearForm</p>
</div>

Include the newly created angular controller in index.html between the build:js comment markers

 <!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="scripts/controllers/navbar.js"></script>
<script src="scripts/controllers/listings.js"></script>
<!-- endbuild -->

Open the file ~/mlshack/app/scripts/app.js and add the following client route:

.when('/listings', {
templateUrl: 'partials/listings',
controller: 'ListingsCtrl'
})

Check it out. Browse to http://localhost:9000/listings, You shoud now see some address listing data formatted in the page. Congratulations you now have a running MEAN stack application that is fetching and rendering MLS data in a single page.

Step 4 - Go create your own Awesomeness