{"id":265208,"date":"2015-09-08T18:34:02","date_gmt":"2015-09-08T14:34:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=265208"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=265208","title":{"rendered":"\u041e\u0447\u0435\u0440\u0435\u0434\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043d\u043e\u0439 \u0438\u0433\u0440\u0435 + \u043e\u0441\u043d\u043e\u0432\u044b Angular"},"content":{"rendered":"<p>       \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0434\u043d\u044f, \u043d\u043e\u0432\u0438\u0447\u043a\u0438, \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0442\u044c <a href=\"http:\/\/habrahabr.ru\/post\/259907\/\">\u043d\u0430\u0448\u0443 \u0438\u0433\u0440\u0443\u0448\u043a\u0443<\/a>, \u0440\u0430\u0437\u0443\u0447\u0438\u0432\u0430\u044f \u043e\u0441\u043d\u043e\u0432\u044b \u043d\u043e\u0432\u044b\u0445 \u0434\u043b\u044f \u043d\u0430\u0441 \u00ab\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439\u00bb:<\/p>\n<ul>\n<li>AngularJS<\/li>\n<li>DataBoom<\/li>\n<\/ul>\n<p>  \u041d\u0430 \u0430\u043d\u0433\u0443\u043b\u0430\u0440\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0438 \u0441 \u0447\u0435\u043c \u0435\u0433\u043e \u0435\u0434\u044f\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0430\u043c \u043a\u0443\u0440\u0441, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043d\u0435 \u0440\u0430\u0437\u0431\u0438\u043b\u0438\u0441\u044c \u043e \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043d\u0435\u043c\u0430\u043b\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u043f\u0443\u0442\u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430 \u0441 angular.<\/p>\n<p>  \u041d\u0443 \u0430 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e DataBoom \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043a\u0430\u043a \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u0433\u0440\u0435 (\u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u043f\u043e \u043e\u0431\u0440\u0430\u0437\u0443 \u0438 \u043f\u043e\u0434\u043e\u0431\u0438\u044e HeartStone). \u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437 \u043c\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u0438\u0437\u0431\u0430\u0432\u0438\u043c\u0441\u044f \u043e\u0442 php \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 Databoom, \u043d\u043e \u044d\u0442\u043e \u0443\u0436\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0434\u0440\u0443\u0433\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f\u2026<\/p>\n<p>  <a href=\"http:\/\/habrahabr.ru\/post\/266401\/\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ca4\/2ed\/147\/ca42ed1477d148139c1c28db90995e73.jpg\" alt=\"image\" \/><\/div>\n<p><\/a><br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2>AngularJS<\/h2>\n<p>  \u041d\u0430\u0447\u0430\u0442\u044c \u0441\u0442\u043e\u0438\u0442 \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0433\u0443\u043b\u044f\u0440-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u0430\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0438 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u044c \u0432 js \u0444\u0430\u0439\u043b\u0435. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 angular \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0432\u0430\u0448\u0438\u043c\u0438 html-\u0444\u0430\u0439\u043b\u0430\u043c\u0438 \u043a\u0430\u043a \u0441 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c (view), \u0447\u0442\u043e, \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434, \u043b\u0443\u0447\u0448\u0435 \u0434\u043b\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430. <\/p>\n<p>  \u0412 \u0430\u043d\u0433\u0443\u043b\u044f\u0440\u0435 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0430\u044f \u0441\u0443\u0449\u043d\u043e\u0441\u0442\u044c \u043a\u0430\u043a \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u2013 \u043e\u0441\u043e\u0431\u044b\u0435 html-\u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u0438 \u043e\u0434\u043d\u0438\u043c \u0442\u0430\u043a\u0438\u043c \u043c\u044b \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u0441\u044f \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u041f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043e\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u0441\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u043a \u043d\u0430 \u043d\u0435\u0439, \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0433\u0434\u0435 \u0432\u044b \u0435\u0433\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0435. \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b ng-app:<\/p>\n<pre><code class=\"html\">&lt;html ng-app&gt; <\/code><\/pre>\n<p>  \u042d\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u044d\u0442\u043e\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438 \u0432\u0441\u0435 \u043d\u0438\u0436\u0435 \u043f\u043e \u0434\u0435\u0440\u0435\u0432\u0443 \u0438 \u0435\u0441\u0442\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u043d\u0433\u0443\u043b\u044f\u0440. \u0423\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0432\u0441\u0435\u043c \u044d\u0442\u0438\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0442\u043e\u0436\u0435 \u043d\u0430\u0434\u043e \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"html\">&lt;div ng-controller=&quot;myController&quot;&gt; <\/code><\/pre>\n<p>  \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0435 \u0432\u0438\u0441\u044f\u0442 \u0432 \u0432\u043e\u0437\u0434\u0443\u0445\u0435, \u0430 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a \u043c\u043e\u0434\u0443\u043b\u044f\u043c. \u0421\u0430\u043c\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0436\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0443\u043b\u0435\u043c (\u0433\u043b\u0430\u0432\u043d\u044b\u043c, \u0442\u043e\u0447\u043a\u043e\u0439 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435), \u0438, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0434\u0430\u0442\u044c \u0433\u043b\u0430\u0432\u0435\u043d\u0441\u0442\u0432\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0435\u0433\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043d\u0430\u0434\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0435 ng-app:<\/p>\n<pre><code class=\"html\">&lt;html ng-app=&quot;App&quot;&gt; <\/code><\/pre>\n<p>  \u041c\u043e\u0434\u0443\u043b\u0438 \u0441\u043e\u0437\u0434\u0430\u044e\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u043c module \u043e\u0431\u044a\u0435\u043a\u0442\u0430 angular:<\/p>\n<pre><code class=\"javascript\">angular.module('\u0418\u043c\u044f \u043c\u043e\u0434\u0443\u043b\u044f', ['\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c_1']) <\/code><\/pre>\n<p>  \u041d\u043e \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043c\u043e\u0434\u0443\u043b\u044c \u043c\u0430\u043b\u043e \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0431\u0435\u0437 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432. \u0427\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u0433\u043b\u0430\u0432\u043d\u043e\u043c \u043c\u043e\u0434\u0443\u043b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043b\u0438 \u0442\u043e\u0447\u043a\u043e\u0439 \u0432\u0445\u043e\u0434\u0430 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440), \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u043c\u043e\u0434\u0443\u043b\u044f \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 controller:<\/p>\n<pre><code class=\"javascript\">myModule.controller('\u0418\u043c\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430', ['$scope',function($scope){  \t\t$scope.var = 'some'; \t\t$scope.foo = function(){};  \t}]); <\/code><\/pre>\n<p>  \u041e\u0431\u044a\u0435\u043a\u0442 $scope \u0437\u0430\u0434\u0430\u0435\u0442 \u0432\u0441\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u0442\u043e \u0435\u0441\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432 \u043d\u0430\u0448\u0438\u0445 html-\u0444\u0430\u0439\u043b\u0430\u0445 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 var \u0438 foo.<\/p>\n<p>  \u0412\u044b\u0432\u043e\u0434 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0434\u0432\u043e\u0439\u043d\u044b\u0445 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043e\u043a {{var}}, \u0442\u043e \u0435\u0441\u0442\u044c:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">html<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"html\">&lt;div&gt; {{var}} &lt;\/div&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u00absome\u00bb. <\/p>\n<h2>\u0411\u043b\u0438\u0436\u0435 \u043a \u0441\u0443\u0442\u0438<\/h2>\n<p>  \u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0441 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u044f\u043c\u0438 \u0431\u0443\u0434\u0435\u043c \u0441\u0440\u0430\u0437\u0443 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u0445, \u0442.\u043a. \u043f\u043e \u0430\u043d\u0433\u0443\u043b\u0430\u0440\u0443 \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438, \u0445\u043e\u0442\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043d\u0430 angular.ru \u043d\u0435 \u0432\u043f\u043e\u043b\u043d\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u0430\u044f (\u043c\u043d\u0435 \u043b\u0438\u0447\u043d\u043e).<\/p>\n<p>  \u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0439 \u043a\u0430\u043c\u0435\u043d\u044c \u043c\u044b \u0432\u0441\u0442\u0440\u0435\u0442\u0438\u043c, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u043c (\u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 requirejs). \u0415\u0441\u043b\u0438 \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432 html \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 ng-app, \u0430 \u043f\u043e\u0441\u043b\u0435 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0430\u043d\u0433\u0443\u043b\u044f\u0440 \u043c\u0435\u0442\u043e\u0434\u043e\u043c require, \u0442\u043e \u043c\u044b \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043c, \u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u0422\u0430\u043a \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e\u0442\u043e\u043c\u0443, \u0447\u0442\u043e DOM \u0434\u0435\u0440\u0435\u0432\u043e \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0443\u0436\u0435 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043e.<\/p>\n<p>  \u041d\u0430 \u0442\u0430\u043a\u043e\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 angular \u0435\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434 bootstrap:<\/p>\n<pre><code class=\"javascript\">    require(['domReady!'], function (document) {         ng.bootstrap(document, ['App']);     }); <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u043e\u0434\u0443\u043b\u044c App \u043a\u0430\u043a \u0442\u043e\u0447\u043a\u0443 \u0432\u0445\u043e\u0434\u0430 \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043a document.<\/p>\n<p>  \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0435\u043c \u0432 \u043d\u0430\u0448\u0435\u0439 \u0438\u0433\u0440\u0443\u0448\u043a\u0435 \u2013 \u044d\u0442\u043e \u043c\u0435\u043d\u044e, \u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435, \u0447\u0442\u043e \u0442\u0430\u043c \u0435\u0441\u0442\u044c \u2013 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0433\u0440\u043e\u043a\u043e\u0432.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u0434<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">define(['angularControllersModule', 'User', 'Directive'],function(controllers, User, Directive){  \t\/\/\/\/\/\/\/\/\/\/\/ \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 userList \tcontrollers.controller('userlistCtrl', ['$scope',function($scope){  \t\t$scope.userlist = []; \/\/ \u0421\u043f\u0438\u0441\u043e\u043a \u0438\u0433\u0440\u043e\u043a\u043e\u0432, \u043f\u043e\u043a\u0430 \u043f\u0443\u0441\u0442\u043e\u0439 \t\t$scope.isMe = function(name){ \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \t\t\tif (name == User.login) { \t\t\t\treturn 'me'; \t\t\t}; \t\t} \t\t$scope.letsFight = function(name){ \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \t\t\treturn Directive.run('figthRequest',name); \t\t}  \t}]);  \treturn controllers;  }) <\/code><\/pre>\n<\/div>\n<\/div>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043c\u0435\u0442\u043e\u0434 letsFight() (\u043f\u0440\u0438\u0433\u043b\u0430\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u0431\u043e\u0439) \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u043a\u043b\u0438\u043a\u0443 \u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u043e\u043a\u043e\u043b\u043e \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430. \u0412 \u0430\u043d\u0433\u0443\u043b\u0430\u0440\u0435 \u044d\u0442\u043e \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u043e\u0439 ng-click:<\/p>\n<pre><code class=\"html\">\t&lt;li class=&quot;{{isMe(user.name)}}&quot; ng-repeat=&quot;user in userlist&quot;&gt; \t\t&lt;span class=&quot;name&quot;&gt;{{user.name}}&lt;\/span&gt; \t\t&lt;span class=&quot;fightButton&quot; ng-click=&quot;letsFight(user.name)&quot;&gt;&lt;\/span&gt; \t&lt;\/li&gt; <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u0439: \u0441 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u043c\u0438 \u0441\u043a\u043e\u0431\u043a\u0430\u043c\u0438 \u0438 \u0431\u0435\u0437. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443, \u043d\u0435 \u0434\u043e\u0436\u0438\u0434\u0430\u044f\u0441\u044c \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u043e\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0444\u0438\u0433\u0443\u0440\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 \u043d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c, \u0442\u043a \u043d\u0430\u0434\u043e, \u0447\u0442\u043e\u0431\u044b \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u043b\u0430\u0441\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e \u043a\u043b\u0438\u043a\u0443.<\/p>\n<p>  \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 ng-repeat \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e foreach \u0432 php \u0438\u043b\u0438 for of \u0432 ES6 \u2013 \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0441\u043f\u0438\u0441\u043a\u0430. \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u0430 \u0432 \u0442\u0435\u0433\u0435 &lt;li&gt;, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0433\u043e \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437, \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443 \u043d\u0430\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435 userlist.<\/p>\n<p>  \u041d\u043e \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043d\u0430\u0448 \u0441\u043f\u0438\u0441\u043e\u043a \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u043f\u0443\u0441\u0442, \u0430 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u044b \u0435\u0433\u043e \u043f\u043e websockets \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0412 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u044f \u043f\u043e\u043f\u044b\u0442\u0430\u043b\u0441\u044f \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043c\u043e\u0434\u0443\u043b\u0438 \u0438 \u043d\u0435\u043a\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u044b\u0435 \u043d\u0430\u0431\u043e\u0440\u044b \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 (\u044f \u043d\u0430\u0437\u0432\u0430\u043b \u0438\u0445 Directives) \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0431\u0435\u0437\u0431\u043e\u043b\u0435\u0437\u043d\u0435\u043d\u043d\u043e \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0445 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c.<\/p>\n<p>  \u0411\u043e\u043b\u0435\u0435 \u0442\u043e\u0433\u043e, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u044d\u0442\u0438\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 (Directives.js), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043d\u0443\u0436\u043d\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u043f\u043e \u0438\u043c\u0435\u043d\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043e\u0442\u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u043f\u043e websockets \u0438\u043b\u0438 ajax. \u0412 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e apply(), \u043d\u043e \u044f \u0441\u043e\u0437\u0434\u0430\u043b \u0442\u0430\u0431\u043b\u0438\u0446\u0443 \u0432 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0432\u044b\u0437\u043e\u0432\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432. \u0427\u0442\u043e \u044f \u0438\u043c\u0435\u044e \u0432 \u0432\u0438\u0434\u0443: \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c myDir, \u0435\u0441\u043b\u0438 \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u0435\u0441\u0442\u044c \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0435, \u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0442\u0430\u043c \u0443\u043a\u0430\u0437\u0430\u043d\u0430, \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0441\u0441\u044b\u043b\u043a\u0430. \u041d\u043e \u0441\u043c\u044b\u0441\u043b \u044d\u0442\u043e \u0431\u0430\u0437\u044b \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0435\u0449\u0435 \u0438 \u0443\u0434\u043e\u0431\u043d\u043e \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c pre \u0438 post \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b. \u0422\u043e \u0435\u0441\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u0438 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/43a\/aa1\/527\/43aaa1527c38463685373bfb7b0290eb.png\" alt=\"image\"\/><\/p>\n<p>  \u0418 \u0445\u0440\u0430\u043d\u044f\u0442\u0441\u044f \u0432\u0441\u0435 \u044d\u0442\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u0430\u043f\u043a\u0435, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044f\u0441\u044c \u0442\u043e\u0433\u0434\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">modules\/directive.js<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">define(['DB','is'],function(DB){  \tvar path = 'Actions\/';   \tvar Directive = { \t\trun: function(directiveName, args){  \t\t\tvar args = args || ['']; \t\t\tif (!is.array(args)) { \t\t\t\targs = [args] \t\t\t}; \t\t\tDB.getDerictive(directiveName, exec);  \t\t\tfunction exec(directiveName){ \t\t\t\t\/\/ Directive.preAction ? \t\t\t\tif (typeof directiveName == undefined || typeof directiveName == 'string') { \t\t\t\t\taction = directiveName; \t\t\t\t}else{ \t\t\t\t\taction = directiveName.action; \t\t\t\t} \t\t\t\tDirective._apply(action,args); \t\t\t}  \t\t}, \t\t_apply: function(actionName,args){  \t\t\trequire([path + actionName],function(action){ \t\t\t\taction.run.apply(action,args); \t\t\t});\t \t\t\t \t\t} \t}  \treturn Directive; }) <\/code><\/pre>\n<\/div>\n<\/div>\n<p>  \u041f\u043e websockets \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043c\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u0435\u0451 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<pre><code class=\"javascript\">\tsocket.onmessage = function (e){ \t\tif (typeof e.data === &quot;string&quot;){ \t\t\tvar request = JSON.parse(e.data); \t\t\tDirective.run(request.function,request.args); \t\t}; \t} <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u0436\u0435 \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u043d\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u0432 \u043d\u0430\u0448 \u043f\u0443\u0441\u0442\u043e\u0439 \u0441\u043f\u0438\u0441\u043e\u043a.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u043e\u0434<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">define(['angular\u0421rutch'],function(angular\u0421rutch){  \tvar action = { \t\trun: function(list){  \t\t\tfor(key in list){ \t\t\t\tangular\u0421rutch.scopePush('userListTpl', 'userlist',{name: key}); \t\t\t}  \t\t} \t}  \treturn action; }) <\/code><\/pre>\n<\/div>\n<\/div>\n<p>  \u0423\u0432\u0435\u0440\u0435\u043d, \u0432\u044b \u0443\u0436\u0435 \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0441 \u0433\u043e\u0432\u043e\u0440\u044f\u0449\u0438\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c angular\u0421rutch. \u042d\u0442\u043e\u0442 \u043c\u043e\u0434\u0443\u043b\u044c \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u043c\u043e\u0434\u0443\u043b\u044f\u043c \u0430\u043d\u0433\u0443\u043b\u044f\u0440 \u0438\u0437\u0432\u043d\u0435. \u0414\u0435\u043b\u043e \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0430\u043d\u0433\u0443\u043b\u044f\u0440 \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e. \u041d\u0435\u043b\u044c\u0437\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043c\u0435\u0442\u043e\u0434 \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u0435 \u043c\u043e\u0434\u0443\u043b\u044c \u0430\u043d\u0433\u0443\u043b\u044f\u0440 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439, \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 $scope \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0434\u043b\u044f \u0432\u0430\u0441 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u043d\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0439 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e.<\/p>\n<p>  \u0414\u043b\u044f \u044d\u0442\u0438\u0445 \u0446\u0435\u043b\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439:<\/p>\n<pre><code class=\"javascript\">var el = document.querySelector( mySelector ); var scope = angular.element(el).scope(); scope.userlist.push(user); <\/code><\/pre>\n<p>  \u0412\u0441\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e, \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a $scope, \u043d\u043e \u0438 \u0437\u0434\u0435\u0441\u044c \u0432\u0441\u0435 \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e. \u0418\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 $scope \u043c\u043e\u0436\u043d\u043e \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0443\u0433\u043e\u0434\u043d\u043e, \u043d\u043e \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u0441\u044f. \u0410\u043d\u0433\u0443\u043b\u044f\u0440 \u043f\u043e\u043f\u0440\u043e\u0441\u0442\u0443 \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u043b, \u0447\u0442\u043e \u0432\u044b \u0447\u0442\u043e-\u0442\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0438, \u043e\u043d \u043d\u0435 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u043b\u044e\u0431\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 $scope, \u0430 \u0434\u0435\u043b\u0430\u0435\u0442 \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u0441\u0432\u043e\u0435\u043c \u0446\u0438\u043a\u043b\u0435 $digest(), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0427\u0442\u043e\u0431\u044b \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432\u0440\u0443\u0447\u043d\u0443\u044e, \u0432\u044b\u0437\u043e\u0432\u0435\u043c \u043c\u0435\u0442\u043e\u0434 $apply \u043d\u0430 \u043d\u0430\u0448\u0435\u043c scope:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u0434<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"javascript\">scope.$apply(function () {     scope.userlist.push(user); }); <\/code><\/pre>\n<\/div>\n<\/div>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0451 \u0432 \u043f\u043e\u0440\u044f\u0434\u043a\u0435, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0432\u043d\u0435\u0441\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0432\u0438\u0434\u043d\u044b.<\/p>\n<p>  \u041d\u0435 \u0431\u0443\u0434\u0443 \u043e\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\u0445 \u0441\u043f\u0438\u0441\u043a\u0430 \u043a\u0430\u0440\u0442 \u0432 \u0440\u0443\u043a\u0430\u0445 \u0438\u0433\u0440\u043e\u043a\u043e\u0432 \u0438 \u043d\u0430 \u0430\u0440\u0435\u043d\u0435, \u0442\u0443\u0442 \u0432\u0441\u0435 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u0430 \u043b\u0443\u0447\u0448\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439.<\/p>\n<h2>\u041e\u0447\u0435\u0440\u0435\u0434\u044c \u043d\u0430 DataBoom<\/h2>\n<p>  \u0412\u044b \u0432\u0441\u0435 (\u043c\u043d\u043e\u0433\u0438\u0435) \u0437\u043d\u0430\u0435\u0442\u0435, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u0434\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0434\u0430\u043d\u0438\u0439 \u043f\u043e\u0434\u0440\u044f\u0434 \u0438 \u0431\u044b\u0441\u0442\u0440\u043e (\u0430\u0442\u0430\u043a\u043e\u0432\u0430\u0442\u044c, \u043a\u043e\u043b\u0434\u043e\u0432\u0430\u0442\u044c, \u0437\u0430\u043a\u043e\u043d\u0447\u0438\u0442\u044c \u0445\u043e\u0434), \u0432\u0441\u0451 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c\u0441\u044f \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e, \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043c\u0435\u043b\u044c\u043a\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435.<\/p>\n<p>  \u0412 \u0431\u0430\u0437\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code>{&quot;for&quot;:&quot;user_1&quot;,&quot;motion&quot;:&quot;opGetCard&quot;,&quot;motionId&quot;:2}, {&quot;for&quot;:&quot;user_2&quot;,&quot;motion&quot;:&quot;opGetCard&quot;,&quot;motionId&quot;:1}, <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043a\u0430\u043a\u043e\u0433\u043e \u0438\u0433\u0440\u043e\u043a\u0430 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435, \u0438\u043c\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0438 id \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0434\u043b\u044f \u043e\u0447\u0435\u0440\u0451\u0434\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u0414\u043b\u044f \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0447\u0435\u0440\u0435\u0434\u0438 \u044f \u0441\u043e\u0437\u0434\u0430\u043b \u0434\u0432\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438: \u043c\u043e\u0434\u0443\u043b\u044c stack.js \u0441 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434\u043e\u043c push (\u0441\u0442\u0435\u043a \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043b\u043e\u0432\u043e \u043d\u0430\u0432\u0438\u0442\u0441\u044f) \u0438 \u043c\u0435\u0442\u043e\u0434 push \u043c\u043e\u0434\u0443\u043b\u044f DB, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0435\u0433\u043e \u0437\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0431\u0430\u0437\u043e\u0439 DataBoom:<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">stack.js<\/b><\/p>\n<div class=\"spoiler_text\">define([&#8216;DB&#8217;, &#8216;User&#8217;],function(DB, User){<\/p>\n<p>  var module = {<br \/>   push: function(forWho, motion, expandObj) {<\/p>\n<p>   var expandObj = expandObj || null;<br \/>   var motionObj = {<br \/>   &#8216;for&#8217;: forWho,<br \/>   &#8216;motion&#8217;: motion<br \/>   };<\/p>\n<p>  if (expandObj) {<br \/>   motionObj[expandObj.prop] = [{id:expandObj.id}];<br \/>   };<\/p>\n<p>  DB.push(&#8216;motionQueue&#8217;,motionObj);<\/p>\n<p>  }<br \/>   }<\/p>\n<p>  return module;<br \/>  })  <\/div>\n<\/div>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u043f\u0440\u043e\u0441\u0442\u043e:<\/p>\n<pre><code class=\"javascript\">stack.push(User.login,'myTimerStart'); <\/code><\/pre>\n<p>  \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e myTimerStart \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f User.login<\/p>\n<p>  \u0418\u0437\u0432\u043b\u0435\u043a\u0430\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 setInterval() \u043a\u0430\u0436\u0434\u044b\u0435 2 \u0441\u0435\u043a\u0443\u043d\u0434\u044b:<\/p>\n<pre><code class=\"javascript\">setInterval(function(){ \tDirective.run('getNextAction'); }, 2000); <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0441\u043e\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f \u043e\u0447\u0435\u0440\u0435\u0434\u043d\u043e\u0441\u0442\u0438 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f window.motionId, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0430\u044f \u0432 \u0441\u0435\u0431\u0435 \u043d\u043e\u043c\u0435\u0440 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u0436\u0435 \u043e\u0442\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u0430 (\u0442\u043e \u0435\u0441\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043e, \u0434\u0432\u0438\u0433\u0430\u0435\u043c\u0441\u044f \u0434\u0430\u043b\u044c\u0448\u0435). \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 getNextAction \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043c\u043e\u0434\u0443\u043b\u044f \u0431\u0430\u0437\u044b \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043b\u0431\u044d\u043a:<\/p>\n<pre><code class=\"javascript\">DB.getNextAction(User.login, this.actionStart); \/\/ \u0414\u043b\u044f \u043a\u043e\u0433\u043e \u0438\u0449\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0438 \u043a\u043e\u043b\u0431\u044d\u043a <\/code><\/pre>\n<p>  \u0418\u0441\u043a\u0430\u0442\u044c \u043d\u0443\u0436\u043d\u0443\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0432 \u0442\u0430\u0431\u043b\u0438\u0446\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 query \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0442\u043e \u0435\u0441\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u043c, \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u043e\u0439 \u0438 \u043b\u0438\u043c\u0438\u0442\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">var config = { \tbaseHost: 'https:\/\/t014.databoom.space', \tbaseName: 'b014' }  var db = databoom(config.baseHost, config.baseName); \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0431\u0430\u0437\u0443 \u0434\u0430\u043d\u043d\u044b\u0445  var filter = &quot;(motionId gt &quot; + window.motionId + &quot;) and (for eq '&quot; + forWho + &quot;')&quot;; \/\/ \u0423\u0441\u043b\u043e\u0432\u0438\u044f \u0432\u044b\u0431\u043e\u0440\u043a\u0438  \/* \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0443\u0441\u043b\u043e\u0432\u0438\u044f: eq - \u0440\u0430\u0432\u043d\u043e ne - \u043d\u0435 \u0440\u0430\u0432\u043d\u043e lt - \u043c\u0435\u043d\u044c\u0448\u0435 le - \u043c\u0435\u043d\u044c\u0448\u0435 \u0438\u043b\u0438 \u0440\u0430\u0432\u043d\u043e gt - \u0431\u043e\u043b\u044c\u0448\u0435 ge - \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u043b\u0438 \u0440\u0430\u0432\u043d\u043e *\/  db.load('motionQueue',{ \tfilter: filter, \torderby: &quot;motionId&quot;, \/\/ \u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \ttop: 1 \/\/ \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u043d\u0430 \u043a\u043e\u043b-\u0432\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u043c\u044b\u0445 \u0437\u0430\u043f\u0438\u0441\u0435\u0439 }) <\/code><\/pre>\n<p>  \u0418 \u0432\u0441\u0451 \u0431\u044b \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u043d\u0435 \u0438\u043c\u0435\u043b\u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u0442\u0438\u043f\u0430 \u00ab\u0438\u0433\u0440\u043e\u043a \u043f\u043e\u043b\u043e\u0436\u0438\u043b \u043a\u0430\u0440\u0442\u0443 \u0441 \u0442\u0430\u043a\u0438\u043c\u0438-\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u043d\u0430 \u0441\u0442\u043e\u043b\u00bb. \u0422\u0443\u0442 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0437\u043d\u0430\u0442\u044c, \u043a\u0430\u043a\u0430\u044f \u043a\u0430\u0440\u0442\u0430, \u043a\u0430\u043a\u0438\u0435 \u0443 \u043d\u0435\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b. \u0414\u0430, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0435\u0449\u0435 \u043e\u0434\u043d\u043e \u043f\u043e\u043b\u0435 \u0432 \u0431\u0430\u0437\u0435 \u00ab\u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u00bb \u0438\u043b\u0438 \u00ab\u043a\u0430\u0440\u0442\u0430\u00bb. \u0414\u0435\u043b\u0430\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u0438\u043d \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0431\u0430\u0437\u0435 \u0434\u043b\u044f \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043a\u0430\u0440\u0442\u0435?<\/p>\n<p>  \u0423 DataBoom, \u0441\u043b\u0430\u0432\u0430 \u0431\u043e\u0433\u0430\u043c, \u0435\u0441\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0430 \u044d\u0442\u043e\u0442 \u0441\u0447\u0435\u0442 \u2014 \u043e\u043f\u0446\u0438\u044f expand, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043d\u0430\u0434\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0438\u0437 \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b, \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441 \u043a\u0430\u0440\u0442\u0430\u043c\u0438.<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0422\u0430\u0431\u043b\u0438\u0446\u0430 \u043a\u0430\u0440\u0442<\/b><\/p>\n<div class=\"spoiler_text\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/43a\/aa1\/527\/43aaa1527c38463685373bfb7b0290eb.png\" alt=\"image\"\/>  <\/div>\n<\/div>\n<p>  \u0421\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0432 \u0431\u0430\u0437\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0442\u0430\u043a:<\/p>\n<pre><code>... ,&quot;card&quot;:[{ &quot;id&quot;: &quot;probe&quot;}], ... <\/code><\/pre>\n<p>  ID \u0437\u0430\u043f\u0438\u0441\u0438 \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u0435. \u041f\u0440\u0438\u0447\u0435\u043c \u0437\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438 \u044f\u0432\u043d\u043e \u043d\u0430\u043c\u0435\u043a\u0430\u044e\u0442 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432, \u0442\u043e \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439.<\/p>\n<p>  \u041f\u0440\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0438 \u043e\u0442\u0432\u0435\u0442\u0430 \u0431\u0430\u0437\u044b \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439 expand \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0442\u0443 \u0436\u0435 \u0441\u0430\u043c\u0443\u044e \u0437\u0430\u043f\u0438\u0441\u044c \u0438\u0437 \u0431\u0430\u0437\u044b, \u0433\u0434\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 { \u00abid\u00bb: \u00abprobe\u00bb} \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u043f\u043e id \u0438\u0437 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u0442\u0430\u0431\u043b\u0438\u0446\u044b:<\/p>\n<pre><code>{ \tid:&quot;...&quot;, \tcollections:[{ id: &quot;motionQueue&quot;}], \t&quot;for&quot;:&quot;user_1&quot;, \t&quot;motion&quot;:&quot;opPutCard&quot;, \t&quot;motionId&quot;:2 \tcard:[   \t\t{   \t\tid:&quot;probe&quot;,   \t\ttitle:&quot;probe&quot;,   \t\tmana:1,   \t\tattack:1,   \t\thealth:1 \t\t} \t], } <\/code><\/pre>\n<p>  <\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<ul>\n<li>\u0412\u0441\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043f\u0440\u0435\u043c\u0443\u0434\u0440\u043e\u0441\u0442\u0438 angular \u043d\u0430\u0445\u0440\u0430\u043f\u043e\u043c \u043f\u043e\u043d\u044f\u0442\u044c \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f, \u0438\u0437\u043b\u0438\u0448\u043d\u0435 \u0441\u043b\u043e\u0436\u0435\u043d. \u0421\u043b\u043e\u0436\u043d\u043e \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u0432\u043d\u0435, \u043d\u0435 \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u043e\u0441\u044c.<\/li>\n<li>DataBoom \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0441\u044f \u0432 \u0446\u0435\u043b\u043e\u043c, \u0445\u043e\u0442\u044f \u043c\u043d\u043e\u0433\u043e\u0435 \u043f\u043b\u043e\u0445\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e \u0438 \u043d\u0430 \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u043e\u043c (\u0445\u043e\u0442\u044f \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043c\u043d\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e, \u0440\u0443\u0441\u0441\u043a\u043e\u044f\u0437\u044b\u0447\u043d\u0430\u044f), \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0442\u044b\u043a\u0430 \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043c\u043e\u043c\u0435\u043d\u0442\u044b.<\/li>\n<\/ul>\n<p>  <\/p>\n<h3>\u0420\u0435\u0441\u0443\u0440\u0441\u044b<\/h3>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/seokirill\/PlayingCardsAngular\">Github<\/a><\/li>\n<li><a href=\"http:\/\/141.8.196.222\/\">\u0414\u0435\u043c\u043e<\/a><\/li>\n<\/ul>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/post\/266401\/\"> http:\/\/habrahabr.ru\/post\/266401\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>       \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0434\u043d\u044f, \u043d\u043e\u0432\u0438\u0447\u043a\u0438, \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u043c\u044b \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u043c\u0441\u044f \u043f\u0435\u0440\u0435\u0434\u0435\u043b\u0430\u0442\u044c <a href=\"http:\/\/habrahabr.ru\/post\/259907\/\">\u043d\u0430\u0448\u0443 \u0438\u0433\u0440\u0443\u0448\u043a\u0443<\/a>, \u0440\u0430\u0437\u0443\u0447\u0438\u0432\u0430\u044f \u043e\u0441\u043d\u043e\u0432\u044b \u043d\u043e\u0432\u044b\u0445 \u0434\u043b\u044f \u043d\u0430\u0441 \u00ab\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439\u00bb:<\/p>\n<ul>\n<li>AngularJS<\/li>\n<li>DataBoom<\/li>\n<\/ul>\n<p>  \u041d\u0430 \u0430\u043d\u0433\u0443\u043b\u0430\u0440\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u044d\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0438 \u0441 \u0447\u0435\u043c \u0435\u0433\u043e \u0435\u0434\u044f\u0442. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u044f \u043f\u043e\u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0430\u043c \u043a\u0443\u0440\u0441, \u0447\u0442\u043e\u0431\u044b \u0432\u044b \u043d\u0435 \u0440\u0430\u0437\u0431\u0438\u043b\u0438\u0441\u044c \u043e \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043d\u0435\u043c\u0430\u043b\u043e\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u0441\u044f \u043d\u0430 \u0432\u0430\u0448\u0435\u043c \u043f\u0443\u0442\u0438 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u0430 \u0441 angular.<\/p>\n<p>  \u041d\u0443 \u0430 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e DataBoom \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043a\u0430\u043a \u0432 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0439 \u0438\u0433\u0440\u0435 (\u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u043c \u043f\u043e \u043e\u0431\u0440\u0430\u0437\u0443 \u0438 \u043f\u043e\u0434\u043e\u0431\u0438\u044e HeartStone). \u0417\u0430\u0431\u0435\u0433\u0430\u044f \u0432\u043f\u0435\u0440\u0435\u0434 \u0441\u043a\u0430\u0436\u0443, \u0447\u0442\u043e \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0440\u0430\u0437 \u043c\u044b \u0432\u043e\u043e\u0431\u0449\u0435 \u0438\u0437\u0431\u0430\u0432\u0438\u043c\u0441\u044f \u043e\u0442 php \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0438 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043d\u0430 Databoom, \u043d\u043e \u044d\u0442\u043e \u0443\u0436\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u0434\u0440\u0443\u0433\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f\u2026<\/p>\n<p>  <a href=\"http:\/\/habrahabr.ru\/post\/266401\/\"><\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/ca4\/2ed\/147\/ca42ed1477d148139c1c28db90995e73.jpg\" alt=\"image\" \/><\/div>\n<p><\/a>  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-265208","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/265208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=265208"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/265208\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=265208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=265208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=265208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}