Yandex maps for angular.js

Greetings to all, dear charbers!
This post is about how to make friends with Yandex maps and javascript framework angular.js for their collaboration. You can, of course, use the google map, but for the CIS countries their quality leaves much to be desired.
A little googling, and not finding a ready solution, I had to write my own. Who cares, welcome under cat.

Git demo repository
As a result of the publication of this article for the first time, I received valuable constructive comments, which you can see from below, in the comments. Thanks to everyone who was ready to teach me the mind, and what came out of it, now we will see.
Let's start with the simplest, the task is to display the map. Decision:

<ya-map ya-zoom="8" ya-center="[37.64,55.76]"></ya-map> 

At the same time, if you do not set the ya-center attribute, the map center will be set to the current location of the user.
Add geo. Objects on the map are possible in 2 ways, the first is the direct addition, the second is the addition of geo to the collection. objects. Collections are used to combine geo. objects into groups in order to further manipulate them in a similar manner. Collections are of two types: the usual collection and clustering. There can be any number of regular collections on the map, but there can be only one clusterizer, and it accepts only points. Well, enough of the theory, let's move on to the code. Adding geo. object directly to the map:

 <ya-map ya-zoom="10" ya-center="[37.64,55.76]"> <ya-geo-object ya-source="geoObject"></ya-geo-object> </ya-map> 

 $scope.geoObjects= { geometry: { type: 'Circle', coordinates: [37.60,55.76], radius: 10000 }, properties: { balloonContent: "  - 10 ", hintContent: " " } }; 

Adding geo. object to collection:

 <ya-map ya-zoom="10" ya-center="[37.64,55.76]"> <ya-collection> <ya-geo-object ya-source="geoObject"></ya-geo-object> <ya-collection> </ya-map> 

Add point to clusterizer:

 <ya-map ya-zoom="10" ya-center="[37.64,55.76]"> <ya-cluster> <ya-geo-object ya-source="geoObject"></ya-geo-object> <ya-cluster> </ya-map> 

It is clear that geoObject should now point to a point.
Implemented support for all map events. To subscribe to an event, use the ya-event[-target]-eventname . Here, ya-event is a prefix that determines whether this is a subscription to an event, target — if specified, the property inside the element for which we want to subscribe, eventname — the name of the event to which we subscribe. The event handler is passed the native object of the Yandex map events via the $event parameter. You can get the object that fired the event through $event.get('target') . So, let's subscribe to the click event of the map and the add event of the geoObjects map geoObjects .

 <ya-map ya-zoom="10" ya-event-click="click($event)" ya-event-geo-objects-add="added($event)"></ya-map> 

 $scope.click = function(e){ //-      }; $scope.added=function(e){ //-       }; 

Adding controls to the card is just as easy. Standard controls are added using the yaToolbar directive, and if you want to create your own panel (well, or upgrade the existing one), then yaControl directives are placed inside it. Example:

 <ya-map ya-zoom="8" ya-center="[37.64,55.76]"> <!--    --> <ya-toolbar ya-name="zoomControl"></ya-toolbar> <!--    --> <ya-toolbar ya-name="toolBar"> <ya-control ya-type="button" ya-params=": balloonHeader" ya-event-select="balloonHeader($event)" ya-event-deselect="balloonHeader($event)"></ya-control> </ya-toolbar> </ya-map> 

In addition to everything described, it is possible to create your own maps, use templates for non-standard controls, and other objects on the map, and much more.
More information you can get on the project github , as well as on the website with examples .