MakeAPI-Angular

Install

bower install k88hudson/makeapi-angular

Setup

  1. Add makerstrap in your head 
    <link rel="stylesheet" href="bower_components/makerstrap/dist/makerstrap.complete.min.css" />
    . There are other ways to do this -- see the makerstrap docs.
  2. Make sure angular.js, makeapi-client.js, makeapi-angular.js and makapi-angular.templates.js are all added to your document.
  3. Add the wmMakeApiAngular module to your angular app.

Directives

Make

To create an individual make, just add a make element with make-id and user-id attributes.

<make make-id="539f56c3522cf67163000154" user-id=""></make>
Note: You have to give the user id from your controller. e.g.: 
controller('yourController', ['$rootScope', '$scope',
  function ($rootScope, $scope) {
    function init() {
      $scope.userId = $rootScope._user.id;
    }
    init();
  }
])

Make-Gallery

To create a gallery of makes, use a make-gallery element (or attribute): 

<make-gallery
  tags="['puppy']"
  user-id=""
  container-class="col-sm-3">
</make-gallery>

Make galleries have the following optional attributes:

  • limit [number] - This max number of makes. The default is 20.
  • tags [array] - An array of tags
  • ids [array] - An array of ids
  • makeList [string] - An id of a [makeList](http://mozilla.github.io/makeapi-docs/client-docs/#get-list)
  • container-class [string] - Classes to be added to each make's container element

Masonry

In webmaker, you can use make galleries with Masonry:

Just give the masonry-gallery attribute to an element and put the masonry options (documented here) in the data-masonry-options attribute. Then, add makes as normal: 

<div masonry-gallery data-masonry-options='{"itemSelector": ".sample-make", "gutter": 10, "columnWidth": 300}'>
  <make class="sample-make" user-id="" make-id="539f57af553a77203f000173"></make>
  <make class="sample-make" user-id="" make-id="5400dad39f2f4aac36000003"></make>
  <make class="sample-make" user-id="" make-id="5400dae29f2f4aac36000004"></make>
  <make class="sample-make" user-id="" make-id="5400daf59f2f4aac36000005"></make>
</div>

They should automatically be masonry-fied thanks to the masonryGallery directive.

Service

Included in this module is the makeApi service.

You should use it just like the normal makeapi-client except instead of using the final function `.then()`, use `.get()` instead.

.get() returns a promise that can be resolved just like $http's get, i.e. with the functions .success() and .error():

Example

makeApi
    .tags(['puppy'])
    .limit(10)
    .get()
    .success(data) {
      console.log(data);
    })
    .error(err) {
      console.error(err);
    });