Tutorial: Calling Kimono with AngularJS!

Kimono and AngularJS!

Angular JS is a popular framework for awesome front end web development. In this tutorial, we show you how to integrate it with Kimono!

And, what’s more, combining Angular with Kimono let’s you build really awesome apps that can consume Kimono APIs. This tutorial will walk you through making a simple angular app that displays images from a Kimono API. Check out our demo on jsfiddle here: jsfiddle

Getting Started + Prequisites

We’re gonna run this tutorial in jsfiddle, so you don’t have to worry about setting up a server. Wahoo! So all we’ll need is: 

  • A working Kimono API (make sure to enable CORS support for jsfiddle or angular will complain) Kimono CORS Support. Don’t have an API in mind? Make one or use this one: https://www.kimonolabs.com/apis/bzq274q4
  • If you’re not using our jsfiddle...make sure to include the angular script so you have access to the framework!

Setting up our Angular App

The inner workings of an angular app gets split between your html file and a (or multiple) js file. For this demo we’ll just be using one, but as your app scales you’ll probably break things out. Of course, you could also just have everything sitting in one html file. Whatever dude, I’m not your mom.

In the JS fiddle, you’ll see the html and the js split out. Let’s start with the js.

 

var myApp = angular.module('myApp', []);

 

This sets up our Angular app, which essentially tells html to do a bunch of angular magic. At the top of our html, you’ll see our app gets referenced like so:

 

<div ng-app="myApp">

This is a pretty common pattern in Angular: we set up something in our js file and feed it into html with an ng-something=”   “ attribute. Let’s keep going and do the same thing with our controller, which does all of the heavy lifting in this example.

 

Our controller

function MyCtrl($scope, $http) { 
url = "https://www.kimonolabs.com/api/bzq274q4?
apikey=[your api key]&callback=JSON_CALLBACK";
$http.jsonp(url).
success(function (data) { $scope.data = data['results']
['collection1']; });

}

 

Ok so let’s break this down at a high level first. Our controller makes an http request to a kimono api. If that succeeds, it will take the data it gets, filter it a little bit, and then pass that data to our DOM.


First, let’s look at our http request-

    url = "https://www.kimonolabs.com/api/bzq274q4?  
apikey=[your api key]&callback=JSON_CALLBACK";
$http.jsonp(url).

 

We use the $http module to make a get request to our kimono API. We use the jsonp method to get around some CORS issues here, but it

So we need to specify 2 things -

  1. the method (jsonp)
  2. the url to make that request to (this includes your API Key)

All this gets thrown together inside curly braces, and if you look at the code above again, it probably looks a lot less intense.

 

But we’re not done! Setting that up doesn’t actually do anything. We need to specify a success function that will actually do something once it gets the data. That’s why you’ll notice there is a period at the end of the function above - we need to chain that success function to the http request. In a more robust scenario we would also have an error function in case things are less gravy, but this a tutorial so let’s just assume everything is perfect :)

 success(function (data) {
        $scope.data = data['results']['collection1'];
    });

Here’s our success function. This takes an argument, data, that it gets from making our request. With that data we do two things, all in one line:

  1. parse the data with: data['results']['collection1']. The exact verbage of this might change based on how you structure your API, but essentially we’re navigating to the results bit of the API, skipping over the meta information, and then grabbing all the items in collection1.
  2. Once we’ve got that data (which is a list of objects), we want to pass it to our html file. To do this we add it to our scope with $scope.data = … . We could add anything to our scope this way, eg $scope.foo = “foo”; Then we’d be able to reference foo in our html. But we just want the data so let’s leave it at that for now.

 

All of this http magic gets wrapped in our controller, MyCtrl. We also pass our controller $scope and $http so that we can perform those two operations above.

function MyCtrl($scope, $http) {

…


}

 

And that’s it for our controller! Let’s take a look at what’s happening on the html side.

 

HTML Directives

 

Here’s our HTML app:

<div ng-app="myApp">

  <div ng-controller="MyCtrl">

     <div class= "jumbotron">

         <ul class="list-group">

            <li class="list-group-item" ng-repeat="row in data">

                <img src="{{row['property1']['src']}}"/>

            </li>

         </ul>
</div> </div> </div>

We already talked about how we link our app, so let’s skip ahead into linking our controller. That’s done simply with this:

 

<div ng-controller="MyCtrl">


Now we can get into our serious angular magic! The really serious stuff gets done with our first directive, ng-repeat.

        <li class="list-group-item" ng-repeat="row in data">
             <img src="{{row['property1']['src']}}"/>       
   </li>

ng-repeat basically says, take this list/array of objects, and for each one, create an html object. In this example, we’re doing it with an li, but you could do it with pretty much anything. We can only do this with data because we’ve passed it our html through our scope.

ng-repeat="row in data"

Here, we take an array--data, and specify how we are going to create individual objects from it. in this case we name those individual objects row, but it could be anything.

 

Now that we’ve done that, we have access to {{row}}. But our kimono API has a couple of pieces of data that we want to get around, so we filter the JSON object a little further by doing:

{{row['property1']['src']}}

This takes us straight to a link to our images! Again, your own API might be nested a little differently, so you can play around with the keys to get what you need



Then all we’ve got to do is wrap that into an image tag, and angular will repeat it for each of the images in our API. See, magic!

 

And that’s pretty much it! Of course, this is just the tip of the iceberg as far as what you can do with Angular and Kimono. You could combine multiple attributes to build out some really cool things, or even multiple APIs.

 

Gotchas!

A final word of warning: For client side requests to Kimono, you’ll need to enable your domain to make a request to the kimono API. If you don’t do this, you’ll get hit with an error telling you that there’s an Access Control Origin error. To change that setting, go to your api detail page ( eg: https://www.kimonolabs.com/apis/bzq274q4), click “use in code” and add your domain to the list. Not sure what the domain making the request is? Open up chrome developer tools if you’re getting an error and it will tell you the domain that’s not allowed. Copy and paste that sucker in to our CORS support and you should be good to go! https://www.kimonolabs.com/learn/cors-support

Powered by Zendesk