GitHub

General

Getting Started

VK API Angular is a VK Open API and widgets wrapper for AngularJS.

  • Supports VK API methods via AngularJS service.
  • Supports VK widgets via AngularJS directives.
  • Replaces callbacks with promises.

Include the official VK API script(s) and the VK API Angular wrapper: 



<script type="text/javascript" src="https://vk.com/js/api/openapi.js"></script>
<script type="text/javascript" src="https://vk.com/js/api/share.js"></script>
<script type="text/javascript" src="vk-api-angular.js"></script>
<script type="text/javascript" src="https://vk.com/js/api/openapi.js"></script>
<script type="text/javascript" src="vk-api-angular.js"></script>
<script type="text/javascript" src="https://vk.com/js/api/share.js"></script>
<script type="text/javascript" src="vk-api-angular.js"></script>
<!-- Check at least one option -->

You may initialize your VK application using the provider during the configuration phase:

angular.module('my-app', ['vk-api-angular'])
  .config(function (VKApiProvider) {
    VKApiProvider.init(10000); // Your VK APP_ID
  });

Open API Methods

VKApi factory duplicates the official VK Open API method naming, in particular:

  • VKApi.Api.call
  • VKApi.Auth.login
  • VKApi.Auth.logout
  • VKApi.Auth.revokeGrants
  • VKApi.Auth.getLoginStatus
  • VKApi.Auth.getSession

However, the promises are used instead of callbacks. This gives a better control over the success/error handling mechanism. 

// Log in and request the "photos" and "video" permissions.
// See https://vk.com/dev/permissions for the full permission list.

VKApi.Auth.login({
  photos: true,
  video: true
}).then(
  // Success:
  function (response) {
    var name = response.session.user.first_name;
    alert('Hello, ' + name + '!');
  },
  // Error:
  function (response) {
    alert('Sorry, access denied.');
    console.error(response);
  }
);
// Call "users.get" API method.
// See https://vk.com/dev/methods for the full method list.

VKApi.Api.call('users.get').then(
  // Success:
  function (response) {
    var name = response[0].first_name;
    alert('Hello, ' + name + '!');
  },
  // Error:
  function (response) {
    alert('Sorry, could not fetch the user data.');
    console.error(response);
  }
);

Widgets

{{widget.title}} Widget

Example

HTML:
{{widget.html}}
JavaScript:
{{widget.js}}

Check the options section at the VK documentation for the full list of parameters.

Preview