07 Getting Notes via the API

Getting Notes via the API

Notely has an API that we can use to retrieve notes data as JSON.

First off, let's open up notes.js and make NotesController do something useful:

We're going to use a RESTful API that happens to be from a Ruby on Rails app called Nevernote. Go to Nevernote and sign up for an account:

Nevernote

Once you're signed up and logged in, look at your user settings page by clicking your name near the upper-right corner of the app. Among other things, you should see an API key and a button for copying the key to your clipboard. You'll be using your personal API key to connect Notely to Nevernote.

In notes.js, let's two new variables near the top of the file. The first, nevernoteBasePath, will point to the root of the Nevernote API.

app/notes/notes.js

'use strict';

var nevernoteBasePath = 'https://nevernote-1150.herokuapp.com/api/v1/';

Under that, create an apiKey variable, and paste in your personal API key from Nevernote.

var apiKey = '$2a$10$5GO4Gw5d9Snpy.KfhHDhJesJ4XKZ7iCTJaeUO0D0Z51T586TEbUTa';

Next, let's build out that NotesController that we added in the previous commit.

.controller('NotesController', ['$scope', '$http', function($scope, $http) {
}]);

We gave our previously anonymous inline function a name (NotesController) and added two dependencies: $scope and $http.

$scope "is the glue between application controller and the view," to use the AngularJS documentation's words. The $http service, meanwhile, lets us communicate with remote servers via Ajax.

If you browse to https://nevernote-1150.herokuapp.com/api/v1/notes?api_key=YOUR_API_KEY_HERE (substituting your own API key, naturally), you should see some JSON containing any notes that you added to your account in Nevernote. If you have none, you should see an empty array.

If you don't have any notes in Nevernote yet, take a moment to add a few now.

Now let's make an HTTP GET request to the Nevernote API by using $http.get.

.controller('NotesController', ['$scope', '$http', function($scope, $http) {
  $http.get(nevernoteBasePath + 'notes?api_key=' + apiKey);
}]);

Let's chain a success callback that assigns the returned JSON data to a variable on our scope.

.controller('NotesController', ['$scope', '$http', function($scope, $http) {
  $http.get(nevernoteBasePath + 'notes?api_key=' + apiKey)
    .success(function(notesData) {
      $scope.notes = notesData;
    });
}]);

Let's use this controller for the sidebar by adding an ng-controller directive to the sidebar, and then list the titles of every note we loaded:

app/index.html

          <nav id="sidebar" ng-controller="NotesController">
            <div class="well">
              <ul>
                <li ng-repeat="note in notes">
                  {{ note.title }}
                </li>
              </ul>
            </div>
          </nav>

We've told this <nav> element that it is governed by the NotesController controller, and used ng-repeat to iterate over the note JSON data stored in $scope.notes, which is exposed as simply notes.

If you refresh the page, you should see the notes populate.

Let's commit.

Next: Creating Notes