{"id":250149,"date":"2015-02-10T06:58:02","date_gmt":"2015-02-10T02:58:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=250149"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=250149","title":{"rendered":"<span class=\"post_title\">\u041f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0432 AngularJS<\/span>"},"content":{"rendered":"<div class=\"content html_format\">\n<h2>\u041a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440<\/h2>\n<p>  \u041e\u0434\u0438\u043d \u0438\u0437 \u043b\u0443\u0447\u0448\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0438\u0437\u0443\u0447\u0438\u0442\u044c, \u0447\u0442\u043e \u0442\u043e \u043d\u043e\u0432\u043e\u0435, \u044d\u0442\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u0432 \u043d\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u043d\u0430\u043c \u0432\u0435\u0449\u0438. \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435 \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u0430 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438\u043b\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u041e\u041e\u041f, \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432. \u0426\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u043e\u043f\u0438\u0441\u0430\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 AngularJS \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043d\u0435\u043c <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Single_Page_Application\">SPA<\/a>.<\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u0421\u0442\u0430\u0442\u044c\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043a\u0440\u0430\u0442\u043a\u043e\u0433\u043e \u043e\u0431\u0437\u043e\u0440\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 AngularJS. \u041e\u0431\u0437\u043e\u0440 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b AngularJS: directives, filters, controllers, services, scope. \u0412\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0428\u0430\u0431\u043b\u043e\u043d\u044b \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c AngularJS, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f. \u0415\u0441\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043e.<br \/>  \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 SPA \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 AngularJS.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u041a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 AngularJS<\/b><\/p>\n<div class=\"spoiler_text\">\n<h2>\u041a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440 AngularJS<\/h2>\n<p>  AngularJS \u044d\u0442\u043e JavaScript \u0432\u0435\u0431 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u044b\u0439 Google. \u041e\u043d \u043d\u0430\u043c\u0435\u0440\u0435\u043d \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u0447\u043d\u0443\u044e \u043e\u0441\u043d\u043e\u0432\u0443 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/CRUD\">CRUD<\/a> SPA. SPA \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437 \u0438 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u0435\u0440\u0435\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043d\u0438\u043c. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (data, templates, scripts, styles) \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u044b \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u043f\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044e. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e CRUD \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0438\u043c\u0435\u044e\u0442 \u043e\u0431\u0449\u0438\u0435 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438 \u0438 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f, AngularJS \u043d\u0430\u043c\u0435\u0440\u0435\u043d \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438. \u0412\u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0436\u043d\u044b\u0445 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0435\u0439 AngularJS:  <\/p>\n<ul>\n<li>two-way data binding (\u0414\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0435 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445)<\/li>\n<li><a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%92%D0%BD%D0%B5%D0%B4%D1%80%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B7%D0%B0%D0%B2%D0%B8%D1%81%D0%B8%D0%BC%D0%BE%D1%81%D1%82%D0%B8\">dependency injection, DI<\/a> (\u0412\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439)<\/li>\n<li>separation of concerns (\u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438)<\/li>\n<li>testability<\/li>\n<li>abstraction<\/li>\n<\/ul>\n<p>  \u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0435\u043c \u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e AngularJS \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a:  <\/p>\n<ul>\n<li>partials<\/li>\n<li>controllers<\/li>\n<li>directives<\/li>\n<li>services<\/li>\n<li>filters<\/li>\n<\/ul>\n<p>  \u042d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<h2>Partials<\/h2>\n<p>  Partials \u044d\u0442\u043e HTML \u0441\u0442\u0440\u043e\u043a\u0438. \u041e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c AngularJS \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043b\u0438 \u0438\u0445 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432 AngularJS \u043f\u0435\u0440\u0435\u0434 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438, \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u044b AngularJS \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d \u0432 HTML (\u043a\u0430\u043a \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 mustache.js)<\/p>\n<p>  \u0412\u043d\u0430\u0447\u0430\u043b\u0435 \u043a\u0430\u0436\u0434\u043e\u0435 SPA \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0444\u0430\u0439\u043b Index.html. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 AngularJS \u044d\u0442\u043e\u0442 \u0444\u0430\u0439\u043b \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043d\u0430\u0431\u043e\u0440 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 (\u0438 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c) HTML \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432, \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0435\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044e\u0442 \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u041a\u0430\u0436\u0434\u043e\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 partials (HTML \u0441\u0442\u0440\u043e\u043a \u0438\u043b\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441 \u043a\u0443\u0441\u043a\u0430\u043c\u0438 HTML) \u0438\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0447\u0435\u0440\u0435\u0437 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 (data binding) \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c.<br \/>  \u041f\u0440\u0438\u043c\u0435\u0440 partials:<\/p>\n<pre><code class=\"html\">&lt;html ng-app&gt;   &lt;!-- Body tag augmented with ngController directive  --&gt;   &lt;body ng-controller=&quot;MyController&quot;&gt;     &lt;input ng-model=&quot;foo&quot; value=&quot;bar&quot;&gt;     &lt;!-- Button tag with ng-click directive, and            string expression 'buttonText'            wrapped in &quot;{{ }}&quot; markup --&gt;     &lt;button ng-click=&quot;changeFoo()&quot;&gt;{{buttonText}}&lt;\/button&gt;     &lt;script src=&quot;angular.js&quot;&gt;&lt;\/script&gt;   &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  \u0412\u043c\u0435\u0441\u0442\u0435 \u0441 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 AngularJS, partials \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442, \u043a\u0430\u043a\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u044b \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c. \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 ng-click \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u0435\u0442\u043e\u0434 changeFoo() \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u0438\u0437 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e scope.<\/p>\n<h2>Controllers<\/h2>\n<p>  \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b \u0432 AngularJS \u2013 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u044b\u0448\u0438, \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u044b \u0438 \u0442\u0434.) \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0432 scope. \u0412\u0441\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u043e\u0432 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c\u0430 DI \u0432 AngularJS. \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b \u0442\u0430\u043a\u0436\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0441 partials \u043f\u0443\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 scope. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f (view model).<\/p>\n<pre><code class=\"javascript\">function MyController($scope) {   $scope.buttonText = 'Click me to change foo!';   $scope.foo = 42;      $scope.changeFoo = function () {     $scope.foo += 1;     alert('Foo changed');   }; } <\/code><\/pre>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0435\u043a\u0446\u0438\u044e, \u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438:  <\/p>\n<ol>\n<li>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u00abfoo\u00bb \u043f\u0443\u0442\u0435\u043c \u0432\u0432\u043e\u0434\u0430 \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043f\u043e\u043b\u0435 \u0432\u0432\u043e\u0434\u0430. \u042d\u0442\u043e \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u043e\u0442\u0440\u0430\u0437\u0438\u0442\u0441\u044f \u043d\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0438 \u00abfoo\u00bb \u0438\u0437-\u0437\u0430 \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445.<\/li>\n<li>\u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u00abfoo\u00bb \u043d\u0430\u0436\u0430\u0442\u0438\u0435\u043c \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u00abClick me to change foo!\u00bb<\/li>\n<\/ol>\n<p>  \u0412\u0441\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u0438\u043b\u0438 \u043a\u043b\u0430\u0441\u0441\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430\u043c\u0438 AngularJS (\u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b).<\/p>\n<h2>Scope<\/h2>\n<p>  \u0412 AngularJS scope \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f JavaScript \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0434\u043b\u044f partials. Scope \u043c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u2013 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u044b, \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0438\u043b\u0438 \u043c\u0435\u0442\u043e\u0434\u044b. \u0412\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u0432 scope, \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u0437\u0432\u0430\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 AngularJS \u0432\u043d\u0443\u0442\u0440\u0438 partials, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b \u0441 \u0434\u0430\u043d\u043d\u044b\u043c scope \u0438\u043b\u0438 \u043f\u0440\u044f\u043c\u044b\u043c \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u043c\u0435\u0442\u043e\u0434\u0430 \u043b\u044e\u0431\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 scope. \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432, \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 scope, \u0438 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0435 scope \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0430\u0436\u0435\u043d\u043e \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0438 \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043e \u0432 scope.<\/p>\n<p>  \u0415\u0449\u0435 \u043e\u0434\u043d\u043e\u0439 \u0432\u0430\u0436\u043d\u043e\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u043e\u0439 scope \u0432 \u043b\u044e\u0431\u043e\u043c AngularJS \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 (\u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 scope). \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043b\u044e\u0431\u043e\u0439 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 scope \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b \u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0435\u0433\u043e \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0438\u043b\u0438 \u043a\u043e\u0441\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430.<\/p>\n<p>  \u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 scope \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435:<\/p>\n<pre><code class=\"html\">&lt;div ng-controller=&quot;BaseCtrl&quot;&gt;   &lt;div id=&quot;child&quot; ng-controller=&quot;ChildCtrl&quot;&gt;     &lt;button id=&quot;parent-method&quot; ng-click=&quot;foo()&quot;&gt;Parent method&lt;\/button&gt;     &lt;button ng-click=&quot;bar()&quot;&gt;Child method&lt;\/button&gt;   &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">function BaseCtrl($scope) {   $scope.foo = function () {     alert('Base foo');   }; }    function ChildCtrl($scope) {   $scope.bar = function () {     alert('Child bar');   }; } <\/code><\/pre>\n<p>  \u0421 div#child \u0441\u0432\u044f\u0437\u0430\u043d scope ChildCtrl, \u043d\u043e \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 scope ChildCtrl \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u0432 BaseCtrl, \u0442\u043e \u0432\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0438\u0437 BaseCtrl \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 ChildCtrl, \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u0430 \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u0435\u0442\u043e\u0434 foo \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 button#parent-method.<\/p>\n<h2>Directives<\/h2>\n<p>  \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0432 AngularJS \u2013 \u044d\u0442\u043e \u043c\u0435\u0441\u0442\u043e \u0433\u0434\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c\u0441\u044f \u0432\u0441\u0435 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 DOM. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u044f\u0442 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 DOM, \u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 \u0438\u043b\u0438 \u043f\u0440\u043e\u0432\u0435\u0441\u0442\u0438 \u0440\u0435\u0444\u0430\u043a\u0442\u043e\u0440\u0438\u043d\u0433, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 DOM \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0435. \u0412 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u0435\u0441\u0442\u044c \u0438\u043c\u044f \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 postLink, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0443 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b. \u0412 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a:<\/p>\n<ul>\n<li>template<\/li>\n<li>compile function<\/li>\n<li>link function<\/li>\n<li>\u0438 \u0442. \u0434.<\/li>\n<\/ul>\n<p>  \u0414\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 partials, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">myModule.directive('alertButton', function () {   return {     template: '&lt;button ng-transclude&gt;&lt;\/button&gt;',     scope: {       content: '@'     },     replace: true,     restrict: 'E',     transclude: true,     link: function (scope, el) {       el.click(function () {         alert(scope.content);     });     }   }; }); <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;alert-button content=&quot;42&quot;&gt;Click me&lt;\/alert-button&gt; <\/code><\/pre>\n<p>  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0442\u0435\u0433 &lt;alert-button&gt;&lt;\/alert-button&gt; \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0435\u043d \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c button \u0438 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443, \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0435\u043d\u0438\u0435 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c 42.<\/p>\n<h2><b>Filters<\/b><\/h2>\n<p>  \u0424\u0438\u043b\u044c\u0442\u0440\u044b \u0432 AngularJS \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u044e \u043b\u043e\u0433\u0438\u043a\u0438, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u0431\u044b\u0447\u043d\u043e \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 partials, \u043d\u043e \u0442\u0430\u043a \u0436\u0435 \u0447\u0435\u0440\u0435\u0437 DI \u043e\u043d\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\u0445, \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430\u0445, \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u0445 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0445.<br \/>  \u0417\u0434\u0435\u0441\u044c \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u0438\u043b\u044c\u0442\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u0432\u0435\u0440\u0445\u043d\u0438\u0439 \u0440\u0435\u0433\u0438\u0441\u0442\u0440:<\/p>\n<pre><code class=\"javascript\">myModule.filter('uppercase', function () {   return function (str) {     return (str || '').toUpperCase();   }; }); <\/code><\/pre>\n<p>  \u0412\u043d\u0443\u0442\u0440\u0438 partials \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 Unix \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440\u043e\u0432 (Unix&#8217;s piping):<\/p>\n<pre><code class=\"html\">&lt;div&gt;{{ name | uppercase }}&lt;\/div&gt; <\/code><\/pre>\n<p>  \u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430 \u0444\u0438\u043b\u044c\u0442\u0440 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">function MyCtrl(uppercaseFilter) {   $scope.name = uppercaseFilter('foo'); \/\/FOO } <\/code><\/pre>\n<p>  <\/p>\n<h2>Services<\/h2>\n<p>  \u041b\u044e\u0431\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043d\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u043c \u0432\u044b\u0448\u0435, \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0430 \u0432 \u0441\u0435\u0440\u0432\u0438\u0441. \u041e\u0431\u044b\u0447\u043d\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u0438\u0440\u0443\u044e\u0442 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0438, \u043d\u0435\u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u0443\u044e \u043b\u043e\u0433\u0438\u043a\u0443, XHR, WebSockets \u0438 \u0442. \u0434. \u041a\u043e\u0433\u0434\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u00ab\u0442\u043e\u043b\u0441\u0442\u044b\u043c\u0438\u00bb, \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u044e\u0449\u0438\u0439\u0441\u044f \u043a\u043e\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0432\u044b\u043d\u0435\u0441\u0435\u043d \u0432 \u0441\u0435\u0440\u0432\u0438\u0441\u044b.<\/p>\n<pre><code class=\"javascript\">myModule.service('Developer', function () {   this.name = 'Foo';   this.motherLanguage = 'JavaScript';   this.live = function () {     while (true) {       this.code();     }   }; }); <\/code><\/pre>\n<p>  \u0421\u0435\u0440\u0432\u0438\u0441\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 DI (\u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b, \u0444\u0438\u043b\u044c\u0442\u0440\u044b, \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b, \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b):<\/p>\n<pre><code class=\"javascript\">function MyCtrl(developer) {   var developer = new Developer();   developer.live(); } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  <\/p>\n<h2>\u041f\u0430\u0442\u0442\u0435\u0440\u043d\u044b AngularJS<\/h2>\n<p>  \u0412 \u0434\u0432\u0443\u0445 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u0445, \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u043e\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445 AngularJS.<\/p>\n<p>  \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0439 \u0433\u043b\u0430\u0432\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 SPA (\u0438 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e) \u043d\u0430 AngularJS.<\/p>\n<h3>Services<\/h3>\n<p>  <\/p>\n<h4>Singleton<\/h4>\n<p>  Singleton (\u043e\u0434\u0438\u043d\u043e\u0447\u043a\u0430) \u2014 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u0430 \u043a\u043b\u0430\u0441\u0441\u0430 \u043e\u0434\u043d\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0432\u043e \u0432\u0441\u0435\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435. \u041a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044f \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0441\u0438\u0441\u0442\u0435\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442 \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043b\u0438 \u043a\u043e\u0433\u0434\u0430 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432.<\/p>\n<p>  UML \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0430 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0448\u0430\u0431\u043b\u043e\u043d singleton:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/06b14e8ff8fdd03d2610480e39a433ab65ca0ee5\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f73696e676c65746f6e2e737667\" alt=\"image\"\/><\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 \u043a\u0430\u043a\u043e\u043c\u0443 \u043b\u044e\u0431\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c, AngularJS \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442 \u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c:  <\/p>\n<ul>\n<li>\u0411\u0435\u0440\u0435\u0442 \u0438\u043c\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u043f\u043e\u0438\u0441\u043a \u0432 \u0445\u0435\u0448-\u043a\u0430\u0440\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0441\u044f \u0432 \u043b\u0435\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u0438. (\u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d\u0430 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438)<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043d\u0430\u0439\u0434\u0435\u043d\u0430 AngularJS \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0435\u0435 \u043a\u0430\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043d\u0435 \u043d\u0430\u0439\u0434\u0435\u043d\u0430:<br \/> \n<ul>\n<li>AngularJS \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u0435\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0438\u043b\u0438 \u0435\u0433\u043e \u043f\u0440\u043e\u0432\u0430\u0439\u0434\u0435\u0440\u0430 (\u0442. \u0435. $get). \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u0432\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u043f\u043e \u0442\u043e\u043c\u0443 \u0436\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0443 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439 \u0434\u0430\u043d\u043d\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438. \u042d\u0442\u043e\u0442 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0446\u0438\u043a\u043b\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438.<\/li>\n<li>AngularJS \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442 \u0435\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0445\u0435\u0448-\u043a\u0430\u0440\u0442\u044b \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u043e\u0439 \u0432\u044b\u0448\u0435.<\/li>\n<li>AngularJS \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442 \u0435\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043e\u043d\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u0430.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>  \u041b\u0443\u0447\u0448\u0435 \u0432\u0437\u0433\u043b\u044f\u043d\u0438\u0442\u0435 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 AngularJS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 getService:<\/p>\n<pre><code class=\"javascript\">function getService(serviceName) {   if (cache.hasOwnProperty(serviceName)) {     if (cache[serviceName] === INSTANTIATING) {       throw $injectorMinErr('cdep', 'Circular dependency found: {0}', path.join(' &lt;- '));     }     return cache[serviceName];   } else {     try {       path.unshift(serviceName);       cache[serviceName] = INSTANTIATING;       return cache[serviceName] = factory(serviceName);     } catch (err) {       if (cache[serviceName] === INSTANTIATING) {         delete cache[serviceName];       }       throw err;     } finally {       path.shift();     }   } } <\/code><\/pre>\n<p>  \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 service \u044d\u0442\u043e singleton, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e service \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0440\u0430\u0437. \u041a\u044d\u0448 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 singleton. \u0422\u0430\u043a \u0436\u0435 \u044d\u0442\u0430 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0442\u043e\u0439, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u0432 UML \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 singleton \u0432\u043d\u0443\u0442\u0440\u0438 \u0435\u0433\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440\u0430, \u043c\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u0432\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u0430 singleton.<\/p>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, service \u044d\u0442\u043e \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 singleton, \u043d\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u043d\u0435 \u0447\u0435\u0440\u0435\u0437 \u0448\u0430\u0431\u043b\u043e\u043d singleton, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0435\u0439:<\/p>\n<ul>\n<li>\u0443\u043b\u0443\u0447\u0448\u0430\u0435\u0442 \u0442\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c \u043a\u043e\u0434\u0430<\/li>\n<li>\u043c\u043e\u0436\u043d\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 singleton (\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/%D0%98%D0%BD%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D1%8F_%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F\">IoC<\/a> \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043b\u0435\u043d\u0438\u0432\u044b\u0435 \u0432\u044b\u0437\u043e\u0432\u044b.)<\/li>\n<\/ul>\n<p>  \u0414\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u043e\u0439 \u0442\u0435\u043c\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441\u043e <a href=\"http:\/\/googletesting.blogspot.ru\/2008\/05\/tott-using-dependancy-injection-to.html\">\u0441\u0442\u0430\u0442\u044c\u0435\u0439<\/a> Misko Hevery&#8217;s \u0432 \u0431\u043b\u043e\u0433\u0435 Google Testing.<\/p>\n<h4>Factory Method<\/h4>\n<p>  Factory Method (\u0424\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0442\u0430\u043a \u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u043a\u0430\u043a \u0412\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 (\u0430\u043d\u0433\u043b. Virtual Constructor)) \u2014 \u043f\u043e\u0440\u043e\u0436\u0434\u0430\u044e\u0449\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0439 \u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u0430\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430. \u0412 \u043c\u043e\u043c\u0435\u043d\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u043a\u043b\u0430\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c. \u0418\u043d\u044b\u043c\u0438 \u0441\u043b\u043e\u0432\u0430\u043c\u0438, \u0424\u0430\u0431\u0440\u0438\u043a\u0430 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u0430\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u0434\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u043d\u0435 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u044b, \u0430 \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u043c\u0438 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/2a6dbeb07113cc74e88320ece7f0abadcbeecef6\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f666163746f72792d6d6574686f642e737667\" alt=\"image\"\/><\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442:<\/p>\n<pre><code class=\"javascript\">myModule.config(function ($provide) {   $provide.provider('foo', function () {     var baz = 42;     return {       \/\/Factory method       $get: function (bar) {         var baz = bar.baz();         return {           baz: baz         };       }     };   }); }); <\/code><\/pre>\n<p>  \u0417\u0434\u0435\u0441\u044c \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u00abprovider\u00bb \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 config. \u00abProvider\u00bb \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043c\u0435\u0442\u043e\u0434\u043e\u043c $get. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 JavaScript \u043d\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432 \u0438 \u044f\u0437\u044b\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u00ab\u0443\u0442\u0438\u043d\u0443\u044e\u00bb \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e, \u0442\u043e \u0434\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043b\u0438\u0441\u044c \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432 \u00abprovider\u00bb \u043d\u0430\u0437\u044b\u0432\u0430\u0442\u044c $get.<\/p>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 service, filter, directive \u0438 controller \u0438\u043c\u0435\u044e\u0442 provider (\u0442. \u0435 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043c\u0435\u0435\u0442 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 $get), \u043e\u043d \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n<p>  \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043a\u043e\u043f\u043d\u0443\u0442\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0433\u043b\u0443\u0431\u0436\u0435 \u0432 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e AngularJS:<\/p>\n<pre><code class=\"javascript\">\/\/...  createInternalInjector(instanceCache, function(servicename) {   var provider = providerInjector.get(servicename + providerSuffix);   return instanceInjector.invoke(provider.$get, provider, undefined, servicename); }, strictDi));  \/\/...  function invoke(fn, self, locals, serviceName){   if (typeof locals === 'string') {     serviceName = locals;     locals = null;   }    var args = [],   $inject = annotate(fn, strictDi, serviceName),   length, i,   key;      for(i = 0, length = $inject.length; i &lt; length; i++) {     key = $inject[i];     if (typeof key !== 'string') {       throw $injectorMinErr('itkn',       'Incorrect injection token! Expected service name as string, got {0}', key);     }     args.push(locals && locals.hasOwnProperty(key) ? locals[key] : getService(key));   }   if (!fn.$inject) {     \/\/ this means that we must be an array.     fn = fn[length];   }   return fn.apply(self, args); } <\/code><\/pre>\n<p>  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c \u043a\u0430\u043a \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 $get:<\/p>\n<pre><code class=\"javascript\">instanceInjector.invoke(provider.$get, provider, undefined, servicename) <\/code><\/pre>\n<p>  \u0412 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435 \u0432\u044b\u0448\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 invoke \u0438 \u0435\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u043c \u043c\u0435\u0442\u043e\u0434 ($get) \u0441\u0435\u0440\u0432\u0438\u0441\u0430. \u0412\u043d\u0443\u0442\u0440\u0438 \u043c\u0435\u0442\u043e\u0434\u0430 invoke \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f annotate, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u0442\u0430\u043a \u0436\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434. \u0424\u0443\u043d\u043a\u0446\u0438\u044f annotate \u0440\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u0442 \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438, \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c DI AngularJS (\u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0441\u044f \u0432\u044b\u0448\u0435). \u041f\u043e\u0441\u043b\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434: <\/p>\n<pre><code class=\"javascript\">fn.apply(self, args). <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0440\u0430\u0441\u0441\u0443\u0436\u0434\u0430\u0442\u044c \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u0445 \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u0432\u044b\u0448\u0435 UML \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u044b, \u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0437\u0432\u0430\u0442\u044c Creator, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0447\u0435\u0440\u0435\u0437 \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u00abConcreteCreator\u00bb \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u00abProduct\u00bb.<\/p>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0448\u0430\u0431\u043b\u043e\u043d \u0444\u0430\u0431\u0440\u0438\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043a\u043e\u0441\u0432\u0435\u043d\u043d\u043e\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043c\u0430\u043a\u0435\u0442\u044b\/\u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e:  <\/p>\n<ul>\n<li>\u044d\u0442\u043e \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/li>\n<li>\u0440\u0430\u0437\u0440\u0435\u0448\u0438\u0442\u044c \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/li>\n<li>\u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u043d\u044b\u0445 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 (\u0434\u043b\u044f service \u0438 filter \u043e\u0434\u0438\u043d, \u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0434\u043b\u044f controller)<\/li>\n<\/ul>\n<h4>Decorator<\/h4>\n<p>  Decorator (\u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440) \u2014 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0439 \u0434\u043b\u044f \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0443. \u0428\u0430\u0431\u043b\u043e\u043d \u0414\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0433\u0438\u0431\u043a\u0443\u044e \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0441 \u0446\u0435\u043b\u044c\u044e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/f4fb6e60d06463dfd0817ea1b9e3e2976694828f\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f6465636f7261746f722e737667\" alt=\"image\"\/><\/p>\n<p>  AngularJS \u0438\u0437 \u043a\u043e\u0440\u043e\u0431\u043a\u0438 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0438\/\u0438\u043b\u0438 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 service&#8217; \u043e\u0432. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043c\u0435\u0442\u043e\u0434 decorator \u0438\u043b\u0438 $provide \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u0435\u0440\u0442\u043a\u0443 \u0434\u043b\u044f \u043b\u044e\u0431\u043e\u0433\u043e service, \u0443\u0436\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0432\u0430\u043c\u0438 \u0438\u043b\u0438 \u0438\u0437 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/p>\n<pre><code class=\"javascript\">myModule.controller('MainCtrl', function (foo) {   foo.bar(); });  myModule.factory('foo', function () {   return {     bar: function () {       console.log('I\\'m bar');     },     baz: function () {       console.log('I\\'m baz');     }   }; });  myModule.config(function ($provide) {   $provide.decorator('foo', function ($delegate) {     var barBackup = $delegate.bar;     $delegate.bar = function () {       console.log('Decorated');       barBackup.apply($delegate, arguments);     };     return $delegate;   }); }); <\/code><\/pre>\n<p>  \u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043d\u043e\u0432\u044b\u0439 service \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u00abfoo\u00bb. \u0412 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u00abconfig\u00bb \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 $provide.decorator \u0438 \u0435\u043c\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0438\u043c\u044f service, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u0435\u043a\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c, \u0432\u0442\u043e\u0440\u044b\u043c \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f, \u043e\u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440. $delegate \u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 service foo. \u041c\u044b \u0434\u0435\u043a\u043e\u0440\u0438\u0440\u0443\u0435\u043c service \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044f \u0435\u0433\u043e \u043c\u0435\u0442\u043e\u0434 bar. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u0435\u043a\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 bar, \u043f\u0443\u0442\u0435\u043c \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u0435\u0449\u0435 \u043e\u0434\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f console.log \u2014 console.log(&#8216;Decorated&#8217;) \u0438 \u043f\u043e\u0441\u043b\u0435 \u0447\u0435\u0433\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 bar \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435.<\/p>\n<p>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e, \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c service \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0445 \u0442\u0440\u0435\u0442\u044c\u0438\u043c\u0438 \u043b\u0438\u0446\u0430\u043c\u0438. \u0412 \u0442\u0435\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u043c\u043d\u043e\u0433\u043e\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u0438 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438, \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438 \u0442.\u0434.) \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f \u043c\u043d\u043e\u0433\u043e \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u0438 \u043d\u0430\u0440\u0443\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430 <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Don%E2%80%99t_repeat_yourself\">DRY<\/a>. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0446\u0435\u043b\u0435\u0441\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"http:\/\/en.wikipedia.org\/wiki\/Aspect-oriented_programming\">\u0430\u0441\u043f\u0435\u043a\u0442\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043e\u0435<\/a> \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0410\u041e\u041f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f AngularJS \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u043d\u0430 <a href=\"https:\/\/github.com\/mgechev\/angular-aop\">github.com\/mgechev\/angular-aop.<\/a><\/p>\n<h4>Facade<\/h4>\n<p>  \u0428\u0430\u0431\u043b\u043e\u043d Facade (\u0444\u0430\u0441\u0430\u0434) \u2014 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0438\u0439 \u0441\u043a\u0440\u044b\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043f\u0443\u0442\u0435\u043c \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0443, \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u0443\u044e\u0449\u0435\u043c\u0443 \u0438\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u044b.<br \/>  Facade \u043c\u043e\u0436\u0435\u0442:  <\/p>\n<ol>\n<li> \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u043b\u0435\u0433\u043a\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a, \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0438 \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0442\u0430\u043a \u043a\u0430\u043a facade \u0438\u043c\u0435\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043e\u0431\u0449\u0438\u0445 \u0437\u0430\u0434\u0430\u0447<\/li>\n<li> \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0431\u043e\u043b\u0435\u0435 \u0447\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0439, \u043f\u043e \u0442\u043e\u0439 \u0436\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u0435<\/li>\n<li>\u0423\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u043e\u0442 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u043a\u043e\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 facade, \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043a\u043e<\/li>\n<li> \u041e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043f\u043b\u043e\u0445\u043e \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e API-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u043e\u0432, \u043e\u0434\u043d\u043e\u0439 \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0439 (\u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u043f\u043e\u0442\u0440\u0435\u0431\u043d\u043e\u0441\u0442\u044f\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0438)<\/li>\n<\/ol>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/97668c776b2552cb08fe9ad587230091f1b52717\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f6661636164652e737667\" alt=\"image\"\/><\/p>\n<p>  \u0412 AngularJS \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e facade&#8217; \u043e\u0432. \u041a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 API \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0432\u044b \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0435 \u0444\u0430\u0441\u0430\u0434.<\/p>\n<p>  \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u0430\u043a \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c XMLHttpRequest POST \u0437\u0430\u043f\u0440\u043e\u0441:<\/p>\n<pre><code class=\"javascript\">var http = new XMLHttpRequest(), url = '\/example\/new', params = encodeURIComponent(data); http.open(&quot;POST&quot;, url, true);  http.setRequestHeader(&quot;Content-type&quot;, &quot;application\/x-www-form-urlencoded&quot;); http.setRequestHeader(&quot;Content-length&quot;, params.length); http.setRequestHeader(&quot;Connection&quot;, &quot;close&quot;);  http.onreadystatechange = function () {   if(http.readyState == 4 && http.status == 200) {     alert(http.responseText);   } } http.send(params); <\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f AngularJS $http \u0441\u0435\u0440\u0432\u0438\u0441, \u043c\u044b \u043c\u043e\u0436\u0435\u043c:  <\/p>\n<pre><code class=\"javascript\">$http({   method: 'POST',   url: '\/example\/new',   data: data }) .then(function (response) {   alert(response); }); <\/code><\/pre>\n<p>  \u0438\u043b\u0438 \u0434\u0430\u0436\u0435:  <\/p>\n<pre><code class=\"javascript\">$http.post('\/someUrl', data).then(function (response) {   alert(response); }); <\/code><\/pre>\n<p>  \u0412\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0435\u0442 HTTP POST \u0437\u0430\u043f\u0440\u043e\u0441.<br \/>  \u0422\u0440\u0435\u0442\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u044d\u0442\u043e \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u0430\u044f \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u0430\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e $resource service \u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0430 \u043f\u043e\u0432\u0435\u0440\u0445 $http service. \u041c\u044b \u0435\u0449\u0435 \u0440\u0430\u0437 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u044d\u0442\u043e\u0442 service \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0430\u0445 Active Record \u0438 Proxy.<\/p>\n<h4>Proxy<\/h4>\n<p>  Proxy (\u0417\u0430\u043c\u0435\u0441\u0442\u0438\u0442\u0435\u043b\u044c) \u2014 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u0443\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0443, \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u044f \u0432\u0441\u0435 \u0432\u044b\u0437\u043e\u0432\u044b (\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430). Proxy \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0447\u0435\u043c \u0443\u0433\u043e\u0434\u043d\u043e: \u0441\u0435\u0442\u0435\u0432\u044b\u043c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435\u043c, \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c \u0432 \u043f\u0430\u043c\u044f\u0442\u0438, \u0444\u0430\u0439\u043b\u043e\u043c \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043e\u0440\u043e\u0433\u043e \u0438\u043b\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/4e6890d6c354b36cb9f94b5dca08eb54be60802e\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f70726f78792e737667\" alt=\"image\"\/><\/p>\n<p>  \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u0430\u0442\u044c \u0442\u0440\u0438 \u0442\u0438\u043f\u0430 \u043f\u0440\u043e\u043a\u0441\u0438:  <\/p>\n<ul>\n<li>Virtual Proxy<\/li>\n<li>Remote Proxy<\/li>\n<li>Protection Proxy<\/li>\n<\/ul>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043f\u043e\u0434\u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432 AngularJS Virtual Proxy.<br \/>  \u0412 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435 \u043d\u0438\u0436\u0435, \u043c\u044b \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 get \u043e\u0431\u044a\u0435\u043a\u0442\u0430 $resource \u0441 \u0438\u043c\u0435\u043d\u0435\u043c User:<\/p>\n<pre><code class=\"javascript\">var User = $resource('\/users\/:id'), user = User.get({ id: 42 }); console.log(user); \/\/{} <\/code><\/pre>\n<p>  console.log \u0432\u044b\u0432\u0435\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442. \u0422\u0430\u043a \u043a\u0430\u043a AJAX \u0437\u0430\u043f\u0440\u043e\u0441 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 User.get, \u0438 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0432\u044b\u0437\u043e\u0432\u0430 console.log \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0421\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 User.get, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f GET \u0437\u0430\u043f\u0440\u043e\u0441, \u043e\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043d\u0435\u0433\u043e. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0441\u0435\u0431\u0435 \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u0430\u043a virtual proxy, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u043e\u043b\u043d\u0435\u043d \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u043e\u0442\u0432\u0435\u0442 \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430.<\/p>\n<p>  \u041a\u0430\u043a \u044d\u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 AngularJS? \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442:<\/p>\n<pre><code class=\"javascript\">function MainCtrl($scope, $resource) {   var User = $resource('\/users\/:id'),    $scope.user = User.get({ id: 42 }); } <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;span ng-bind=&quot;user.name&quot;&gt;&lt;\/span&gt; <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0430 \u043a\u043e\u0434\u0430, \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0432\u044b\u0448\u0435, \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e user \u043e\u0431\u044a\u0435\u043a\u0442\u0430 $scope \u0431\u0443\u0434\u0435\u0442 \u043f\u0443\u0441\u0442\u044b\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u043c ({}), \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e user.name \u0431\u0443\u0434\u0435\u0442 undefined \u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043e. \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u0435\u0440\u043d\u0435\u0442 \u043e\u0442\u0432\u0435\u0442 \u0434\u043b\u044f GET \u0437\u0430\u043f\u0440\u043e\u0441\u0430, AngularJS \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442 \u044d\u0442\u043e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0412 \u0442\u0435\u0447\u0435\u043d\u0438\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e $digest \u0446\u0438\u043a\u043b\u0430, AngularJS \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 $scope.user \u0438 \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<h4>Active Record<\/h4>\n<p>  Active Record \u2013 \u044d\u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0445\u0440\u0430\u043d\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435. \u041e\u0431\u044b\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u044d\u0442\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b, \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Active Record \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e \u0441\u0432\u044f\u0437\u0438 \u0441 \u0431\u0430\u0437\u043e\u0439 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f, \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f, \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445. \u041e\u043d \u043c\u043e\u0436\u0435\u0442 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0431\u043e\u043b\u0435\u0435 \u043d\u0438\u0437\u043a\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f, \u043d\u043e \u0432\u044b\u0437\u043e\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Active Record \u0438\u043b\u0438 \u0435\u0433\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u0442 \u043a \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044e \u0441 \u0411\u0414.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/24c0015d2ae09b5e0ca7d065ebb6a738744e0951\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f6163746976652d7265636f72642e737667\" alt=\"image\"\/><\/p>\n<p>  \u0412 AngularJS \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d service $resource. \u0412 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0432\u0435\u0440\u0441\u0438\u0438 AngularJS (1,2+) \u043e\u043d \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u043c \u043c\u043e\u0434\u0443\u043b\u0435\u043c \u0438 \u043d\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d \u0432 \u044f\u0434\u0440\u043e.<br \/>  \u0412 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 $resource:<br \/>  $resource \u2014 \u044d\u0442\u043e \u0444\u0430\u0431\u0440\u0438\u043a\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 $resource, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 RESTful \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u041e\u0431\u044a\u0435\u043a\u0442 $resource \u0438\u043c\u0435\u0435\u0442 \u043c\u0435\u0442\u043e\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0432\u044b\u0441\u043e\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435, \u0431\u0435\u0437 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u043c service&#8217; \u043e\u043c $http.<\/p>\n<p>  \u0417\u0434\u0435\u0441\u044c \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c $resource:<\/p>\n<pre><code class=\"javascript\">var User = $resource('\/users\/:id'), user = new User({   name: 'foo',   age : 42 });  user.$save(); <\/code><\/pre>\n<p>  \u0412\u044b\u0437\u043e\u0432 $resource \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0434\u043b\u044f \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043d\u0430\u0448\u0435\u0439 \u043c\u043e\u0434\u0435\u043b\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u044d\u043a\u0437\u0435\u043c\u043f\u043b\u044f\u0440\u043e\u0432 \u043c\u043e\u0434\u0435\u043b\u0438 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b \u0434\u043b\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 CRUD.<\/p>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0438 \u0435\u0433\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b:<\/p>\n<pre><code class=\"javascript\">User.get({ userid: userid }); <\/code><\/pre>\n<p>  \u041a\u043e\u0434 \u0432\u044b\u0448\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u0440\u0430\u0437\u0443 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043f\u0443\u0441\u0442\u043e\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u043d\u0435\u0433\u043e. \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d \u0438 \u043f\u0440\u043e\u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d \u043e\u0442\u0432\u0435\u0442, AngularJS \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 (\u0441\u043c. proxy).<br \/>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0431\u043e\u043b\u0435\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043f\u043e \u00ab\u043c\u0430\u0433\u0438\u0438\u00bb \u043e\u0431\u044a\u0435\u043a\u0442\u0430 $resource \u0438 AngularJS.<br \/>  \u0422\u0430\u043a \u041c\u0430\u0440\u0442\u0438\u043d \u0424\u0430\u0443\u043b\u0435\u0440 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u0435\u0442 \u0447\u0442\u043e:<br \/>  \u041e\u0431\u044a\u0435\u043a\u0442 Active Record \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u044c\u0441\u044f \u043e \u0441\u0432\u044f\u0437\u0438 \u0441 \u0411\u0414, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e \u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u2026<br \/>  $resource \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 Active Record, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441 RESTful \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u0411\u0414. \u0412\u043e \u0432\u0441\u044f\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043a\u0430\u043a \u00abActive Record \u0434\u043b\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 RESTful\u00bb.<\/p>\n<h4>Intercepting Filters<\/h4>\n<p>  \u0421\u043e\u0437\u0434\u0430\u0435\u0442 \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432 \u0434\u043b\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0437\u0430\u0434\u0430\u0447 \u043f\u0440\u0435\u0434\/\u043f\u043e\u0441\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/e231d42515eb7513596745d3dd5a20ced7154fa1\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f696e74657263657074696e672d66696c746572732e737667\" alt=\"image\"\/><\/p>\n<p>  \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043a\u0430\u043a\u0443\u044e \u043b\u0438\u0431\u043e \u043f\u0440\u0435\u0434\/\u043f\u043e\u0441\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 Intercepting Filters \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u043f\u0440\u0435\u0434\/\u043f\u043e\u0441\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432\/\u043e\u0442\u0432\u0435\u0442\u043e\u0432, \u0434\u043b\u044f \u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0436\u0443\u0440\u043d\u0430\u043b\u0430, \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0442\u0435\u043b\u043e \u0438\u043b\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0437\u0430\u043f\u0440\u043e\u0441\u0430. \u041e\u0431\u044b\u0447\u043d\u043e \u0448\u0430\u0431\u043b\u043e\u043d Intercepting Filters \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432, \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435. \u0412\u044b\u0445\u043e\u0434 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0438\u043b\u044c\u0442\u0440\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0432\u0445\u043e\u0434\u043e\u043c \u0434\u043b\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e.<\/p>\n<p>  \u0412 AngularJS \u043c\u044b \u0438\u043c\u0435\u0435\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e Intercepting Filters \u0432 $httpProvider. $httpProvider \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e interceptors (\u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0438), \u043e\u043d\u043e \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432. \u0423 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430: request, response, requestError, responseError.<\/p>\n<p>  requestError \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0435\u0441\u043b\u0438 \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0435 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u0430 \u043e\u0448\u0438\u0431\u043a\u0430 \u0438\u043b\u0438 \u043e\u043d \u0431\u044b\u043b \u043e\u0442\u043a\u043b\u043e\u043d\u0435\u043d, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e responseError \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0439 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a \u043e\u0442\u0432\u0435\u0442\u0430 \u0432\u043e\u0437\u0431\u0443\u0434\u0438\u043b \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435.<\/p>\n<p>  \u041d\u0438\u0436\u0435 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u043a \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043b\u0438\u0442\u0435\u0440\u0430\u043b \u043e\u0431\u044a\u0435\u043a\u0442\u0430:<\/p>\n<pre><code class=\"javascript\">$httpProvider.interceptors.push(function($q, dependency1, dependency2) {   return {     'request': function(config) {       \/\/ same as above     },     'response': function(response) {       \/\/ same as above     }   }; }); <\/code><\/pre>\n<h3>Directives<\/h3>\n<p>  <\/p>\n<h4>Composite<\/h4>\n<p>  \u0428\u0430\u0431\u043b\u043e\u043d composite (\u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u0449\u0438\u043a) \u2013 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0428\u0430\u0431\u043b\u043e\u043d composite \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0447\u0442\u043e \u0431\u044b \u043a \u043d\u0438\u043c \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f, \u0442\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u043a \u043e\u0434\u043d\u043e\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442\u0443. \u0426\u0435\u043b\u044c composite \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u0432 \u0434\u0440\u0435\u0432\u043e\u0432\u0438\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443, \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043e\u0442 \u0447\u0430\u0441\u0442\u043d\u043e\u0433\u043e \u043a \u0446\u0435\u043b\u043e\u043c\u0443.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/2a139189766d4182e35babc96578007b834b84cc\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f636f6d706f736974652e737667\" alt=\"image\"\/><\/p>\n<p>  \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u00ab\u0411\u0430\u043d\u0434\u0435 \u0447\u0435\u0442\u044b\u0440\u0435\u0445\u00bb, MVC \u043d\u0438 \u0447\u0442\u043e \u0438\u043d\u043e\u0435 \u043a\u0430\u043a \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435:  <\/p>\n<ul>\n<li>Strategy<\/li>\n<li>Composite<\/li>\n<li>Observer<\/li>\n<\/ul>\n<p>  \u041e\u043d\u0438 \u0443\u0442\u0432\u0435\u0440\u0436\u0434\u0430\u044e\u0442 \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0435\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0412 AngularJS \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u0430\u044f \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0444\u043e\u0440\u043c\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0435\u0439 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 DOM, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044d\u0442\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u044b.<\/p>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"html\">&lt;!doctype html&gt; &lt;html&gt;   &lt;head&gt;   &lt;\/head&gt;   &lt;body&gt;     &lt;zippy title=&quot;Zippy&quot;&gt;       Zippy!     &lt;\/zippy&gt;   &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">myModule.directive('zippy', function () {   return {     restrict: 'E',     template: '&lt;div&gt;&lt;div class=&quot;header&quot;&gt;&lt;\/div&gt;&lt;div class=&quot;content&quot; ng-transclude&gt;&lt;\/div&gt;&lt;\/div&gt;',     link: function (scope, el) {       el.find('.header').click(function () {         el.find('.content').toggle();       });     }   } }); <\/code><\/pre>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430. \u0421\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 (\u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u201czippy\u201d) \u0438\u043c\u0435\u0435\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435. \u041f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043d\u0430 \u0435\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e.<\/p>\n<p>  \u0418\u0437 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0434\u0435\u0440\u0435\u0432\u043e DOM \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432. \u041a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044d\u0442\u043e html, \u0441\u0440\u0430\u0437\u0443 \u0436\u0435 \u0437\u0430 \u043d\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b head, body \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435\u2026<\/p>\n<p>  \u0412\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u043c\u044b \u0432\u0438\u0434\u0438\u043c, \u0447\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b template \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0441 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u043e\u0439 ng-transclude. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u201czippy\u201d \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 ng-transclude \u0442. \u0435. \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432. \u0422\u0435\u043e\u0440\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u0435\u043b\u0430\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u0443\u044e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0434\u043e\u0441\u0442\u0438\u0433\u043d\u0435\u043c \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0443\u0437\u043b\u0430.<\/p>\n<h4>Interpreter<\/h4>\n<p>  Interpreter (\u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0430\u0442\u043e\u0440) \u2013 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0447\u0435\u0441\u043a\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u043a\u0430\u043a \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u044f\u0437\u044b\u043a\u0435. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0438\u0434\u0435\u044f, \u043a\u043b\u0430\u0441\u0441\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u0438\u043c\u0432\u043e\u043b (\u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043b\u0438 \u043d\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439) \u0432 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0434\u0435\u0440\u0435\u0432\u043e (\u043f\u0440\u0438\u043c\u0435\u0440 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044f) \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0430 (\u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f) \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/f79fac725536ec9f4b77da701415386d9a94d56d\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f696e7465727072657465722e737667\" alt=\"image\"\/><\/p>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e $parse, AngularJS \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u044e \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0430\u0442\u043e\u0440\u0430 DSL (Domain Specific Language). \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 DSL \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 JavaScript. \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 AngularJS \u0438 JavaScript \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 \u0432 \u0442\u043e\u043c \u0447\u0442\u043e AngularJS \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f:  <\/p>\n<ul>\n<li>\u043c\u043e\u0433\u0443\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u044b \u0441 UNIX \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u043e\u043c<\/li>\n<li>\u043d\u0435 \u0432\u043e\u0437\u0431\u0443\u0436\u0434\u0430\u044e\u0442 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0439<\/li>\n<li>\u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u043e\u0442\u043e\u043a\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f (\u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f, \u0446\u0438\u043a\u043b\u044b, \u0443\u0441\u043b\u043e\u0432\u0438\u044f \u0442\u0430\u043a \u0436\u0435 \u043c\u043e\u0433\u0443\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0435\u0440\u043d\u0430\u0440\u043d\u044b\u0439 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440)<\/li>\n<li>\u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 (\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e $scope)<\/li>\n<\/ul>\n<p>  \u0412\u043d\u0443\u0442\u0440\u0438 $parse \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0434\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430:  <\/p>\n<pre><code class=\"javascript\">\/\/\u041e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0432 \u043b\u0435\u043a\u0441\u0435\u043c\u044b var Lexer; \/\/\u041e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0440\u0430\u0437\u0431\u043e\u0440 \u043b\u0435\u043a\u0441\u0435\u043c \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 var Parser; <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043e\u043d\u043e \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043b\u0435\u043a\u0441\u0435\u043c\u044b \u0438 \u043a\u044d\u0448\u0438\u0440\u0443\u0435\u0442\u0441\u044f (\u0438\u0437-\u0437\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e).<br \/>  \u0422\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 AngularJS DSL \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">var OPERATORS = { \/* jshint bitwise : false *\/ 'null':function(){return null;}, 'true':function(){return true;}, 'false':function(){return false;}, undefined:noop, '+':function(self, locals, a,b){ \/\/... }, '*':function(self, locals, a,b){return a(self, locals)*b(self, locals);}, '\/':function(self, locals, a,b){return a(self, locals)\/b(self, locals);}, '%':function(self, locals, a,b){return a(self, locals)%b(self, locals);}, '^':function(self, locals, a,b){return a(self, locals)^b(self, locals);}, '=':noop, '===':function(self, locals, a, b){return a(self, locals)===b(self, locals);}, '!==':function(self, locals, a, b){return a(self, locals)!==b(self, locals);}, '==':function(self, locals, a,b){return a(self, locals)==b(self, locals);}, '!=':function(self, locals, a,b){return a(self, locals)!=b(self, locals);}, '&lt;':function(self, locals, a,b){return a(self, locals)&lt;b(self, locals);}, '&gt;':function(self, locals, a,b){return a(self, locals)&gt;b(self, locals);}, '&lt;=':function(self, locals, a,b){return a(self, locals)&lt;=b(self, locals);}, '&gt;=':function(self, locals, a,b){return a(self, locals)&gt;=b(self, locals);}, '&&':function(self, locals, a,b){return a(self, locals)&&b(self, locals);}, '||':function(self, locals, a,b){return a(self, locals)||b(self, locals);}, '&':function(self, locals, a,b){return a(self, locals)&b(self, locals);}, '|':function(self, locals, a,b){return b(self, locals)(self, locals, a(self, locals));}, '!':function(self, locals, a){return !a(self, locals);} }; <\/code><\/pre>\n<p>  \u041a\u0430\u0436\u0434\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u043a\u0430\u0436\u0434\u044b\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u043c, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 AbstractExpression (\u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0442\u043d\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439).<br \/>  \u041a\u043b\u0438\u0435\u043d\u0442 \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u0443\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u2013 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0433\u043e $scope.<br \/>  \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 AngularJS:  <\/p>\n<pre><code class=\"javascript\">\/\/ toUpperCase filter is applied to the result of the expression \/\/ (foo) ? bar : baz (foo) ? bar : baz | toUpperCase <\/code><\/pre>\n<h4>Template View<\/h4>\n<p>  \u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 HTML \u043f\u0443\u0442\u0435\u043c \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u043d\u0438\u044f \u043c\u0430\u0440\u043a\u0435\u0440\u043e\u0432 \u0432 HTML \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/3eae6b8521b589af56aa52646235af86c01656e5\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f74656d706c6174652d766965772e737667\" alt=\"image\"\/><\/p>\n<p>  \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0435 \u0442\u0430\u043a\u0430\u044f \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0437\u0430\u0434\u0430\u0447\u0430. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043a\u043e\u043d\u043a\u0430\u0442\u0435\u043d\u0430\u0446\u0438\u0438 \u0441\u0442\u0440\u043e\u043a, \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0439 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. \u041d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u2014 \u044d\u0442\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0432 \u043d\u0435\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u044b \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435, \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u0432\u0435\u0441\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u0438\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u043c \u0431\u0443\u0434\u0435\u0442 HTML (\u0438\u043b\u0438 \u0434\u0430\u0436\u0435 DOM). \u042d\u0442\u043e \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u044b \u2013 \u043e\u043d\u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u044e\u0442 DSL, \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442 \u0435\u0433\u043e \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0438 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0442 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442.<\/p>\n<p>  \u0428\u0430\u0431\u043b\u043e\u043d\u044b \u043e\u0447\u0435\u043d\u044c \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 back-end. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c PHP \u043a\u043e\u0434 \u0432\u043d\u0443\u0442\u0440\u0438 HTML \u0438 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0442\u0430\u043a \u0436\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Smarty \u0438\u043b\u0438 eRuby \u0432 Ruby, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c Ruby \u043a\u043e\u0434 \u0432 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  \u0412 JavaScript \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u0432, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a mustache.js, handlebars \u0438 \u0442.\u0434. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0438\u0437 \u043d\u0438\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c \u043a\u0430\u043a \u0441\u043e \u0441\u0442\u0440\u043e\u043a\u043e\u0439. \u0428\u0430\u0431\u043b\u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0445\u0440\u0430\u043d\u0438\u0442\u044c\u0441\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438:  <\/p>\n<ul>\n<li>\u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0444\u0430\u0439\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d AJAX\u2019\u043e\u043c <\/li>\n<li>\u0441\u043a\u0440\u0438\u043f\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f <\/li>\n<li>\u0441\u0442\u0440\u043e\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u0430\u0448\u0435\u0433\u043e JavaScript \u043a\u043e\u0434\u0430<\/li>\n<\/ul>\n<p>  \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443:<\/p>\n<pre><code class=\"html\">&lt;script type=&quot;template\/mustache&quot;&gt;   &lt;h2&gt;Names&lt;\/h2&gt;   {{#names}}   &lt;strong&gt;{{name}}&lt;\/strong&gt;   {{\/names}} &lt;\/script&gt; <\/code><\/pre>\n<p>  \u0428\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM, \u043f\u0443\u0442\u0435\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0435\u0435 \u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u043e\u043c. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0432\u0441\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0438\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f\u043c\u0438.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043c\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0448\u0435 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u0430: { names: [&#8216;foo&#8217;, &#8216;bar&#8217;, &#8216;baz&#8217;] } \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c:<\/p>\n<pre><code class=\"html\">&lt;h2&gt;Names&lt;\/h2&gt; &lt;strong&gt;foo&lt;\/strong&gt; &lt;strong&gt;bar&lt;\/strong&gt; &lt;strong&gt;baz&lt;\/strong&gt; <\/code><\/pre>\n<p>  \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0432 AngularJS \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 HTML. \u041e\u043d\u0438 \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u043e\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u043a\u0430\u043a \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432. \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 AngularJS \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440, \u0447\u0442\u043e \u0431\u044b \u043e\u0431\u043e\u0439\u0442\u0438 \u0434\u0435\u0440\u0435\u0432\u043e DOM \u0438 \u043d\u0430\u0439\u0442\u0438 \u0443\u0436\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b (\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b, \u043a\u043b\u0430\u0441\u0441\u044b \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438)? \u041a\u043e\u0433\u0434\u0430 AngularJS \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u043b\u044e\u0431\u0443\u044e \u0438\u0437 \u044d\u0442\u0438\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u043e\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043b\u043e\u0433\u0438\u043a\u0443 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u0443\u044e \u0441 \u043d\u0435\u0439, \u043e\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u0432\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e $scope.<\/p>\n<p>  \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443:<\/p>\n<pre><code class=\"html\">&lt;ul ng-repeat=&quot;name in names&quot;&gt;   &lt;li&gt;{{name}}&lt;\/li&gt; &lt;\/ul&gt; <\/code><\/pre>\n<p>  \u0412 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 scope:<\/p>\n<pre><code class=\"javascript\">$scope.names = ['foo', 'bar', 'baz']; <\/code><\/pre>\n<p>  \u0411\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d \u0442\u043e\u0442 \u0436\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0447\u0442\u043e \u0438 \u0432\u044b\u0448\u0435. \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0448\u0430\u0431\u043b\u043e\u043d \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d \u043d\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 script, \u0437\u0434\u0435\u0441\u044c \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e HTML.<\/p>\n<h3>Scope<\/h3>\n<p>  <\/p>\n<h4>Observer<\/h4>\n<p>  \u0428\u0430\u0431\u043b\u043e\u043d observer (\u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c) \u2013 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0447\u0435\u0441\u043a\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0439 \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u043e\u043c, \u0445\u0440\u0430\u043d\u0438\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0432\u043e\u0438\u0445 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f\u043c\u0438 \u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u044f\u0435\u0442 \u0438\u0445 \u043f\u0440\u0438 \u043a\u0430\u043a\u0438\u0445 \u043b\u0438\u0431\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f, \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u044b\u0437\u043e\u0432\u043e\u043c \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437 \u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432. \u0412 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/d5aa2458b9f7112b6549f6edc898292f91e25523\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f6f627365727665722e737667\" alt=\"image\"\/><\/p>\n<p>  \u0412 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 AngularJS \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043c\u0435\u0436\u0434\u0443 scope. <\/p>\n<p>  \u041f\u0435\u0440\u0432\u044b\u0439, \u0432\u044b\u0437\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e scope \u0438\u0437 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e scope. \u042d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 scope \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f, \u043a\u0430\u043a \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u043e\u0441\u044c \u0432\u044b\u0448\u0435 (\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c Scope). \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0442\u044c \u043e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043e\u0442 \u0440\u0435\u0431\u0435\u043d\u043a\u0430 \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044e. \u0418\u043d\u043e\u0433\u0434\u0430 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e scope \u0438\u043b\u0438 \u0443\u0432\u0435\u0434\u043e\u043c\u0438\u0442\u044c \u0435\u0433\u043e \u043e \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c scope. AngularJS \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e. <\/p>\n<p>  \u0412\u0442\u043e\u0440\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u0430 observer, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e scope \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f, \u043d\u043e scope \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u043d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0438\u0447\u0435\u0433\u043e \u043e \u043d\u0435\u043c \u043d\u0435 \u0437\u043d\u0430\u0435\u0442. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u044c scope&#8217; \u043e\u0432, \u043e\u043d\u0438 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u0437\u043d\u0430\u0442\u044c \u043e \u0434\u0440\u0443\u0433\u0438\u0445 scope.<\/p>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 scope \u0432 AngularJS \u0438\u043c\u0435\u0435\u0442 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b $on, $emit \u0438 $broadcast. \u041c\u0435\u0442\u043e\u0434 $on \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0438\u043c\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430. \u042d\u0442\u0443 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f \u2013 \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 observer (\u0412 JavaScript \u0432\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043c\u0435\u0442\u043e\u0434\u0430 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d\u0438\u044f).<\/p>\n<pre><code class=\"javascript\">function ExampleCtrl($scope) {   $scope.$on('event-name', function handler() {     \/\/body   }); } <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 scope \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u00abevent-name\u00bb. \u041a\u043e\u0433\u0434\u0430 \u043e\u043d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0435\u0442 \u0432 \u043b\u044e\u0431\u043e\u043c \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0438\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 scope, \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a.<\/p>\n<p>  \u041c\u0435\u0442\u043e\u0434\u044b $emit \u0438 $broadcast \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0432\u0432\u0435\u0440\u0445 \u0438 \u0432\u043d\u0438\u0437 \u043f\u043e \u0446\u0435\u043f\u043e\u0447\u043a\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443:<\/p>\n<pre><code class=\"javascript\">function ExampleCtrl($scope) {   $scope.$emit('event-name', { foo: 'bar' }); } <\/code><\/pre>\n<p>  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 scope \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u00abevent-name\u00bb \u0432\u0432\u0435\u0440\u0445 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 scope. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u0447\u0442\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 scope, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u043d \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u00abevent-name\u00bb, \u0431\u0443\u0434\u0435\u0442 \u0443\u0432\u0435\u0434\u043e\u043c\u043b\u0435\u043d \u0438 \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d.<\/p>\n<p>  \u0422\u043e\u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043a\u043e\u0433\u0434\u0430 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043c\u0435\u0442\u043e\u0434 $broadcast. \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043b\u0438\u0448\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0438\u0437 \u2013 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 scope. \u041a\u0430\u0436\u0434\u044b\u0439 scope \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043b\u044e\u0431\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 (\u0442. \u0435. \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c \u0441\u043e\u0431\u044b\u0442\u0438\u0435\u043c).<\/p>\n<p>  \u0412 JavaScript \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435 \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u0431\u043e\u043b\u0435\u0435 \u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u043a\u0430\u043a \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u044f\/\u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0430.<\/p>\n<h4>Chain of Responsibilities<\/h4>\n<p>  Chain of Responsibilities (\u0446\u0435\u043f\u043e\u0447\u043a\u0430 \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u0435\u0439) \u2013 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0447\u0435\u0441\u043a\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0449\u0438\u0445 \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 (\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432). \u041a\u0430\u0436\u0434\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043b\u043e\u0433\u0438\u043a\u0443, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0449\u0443\u044e \u0442\u0438\u043f \u043a\u043e\u043c\u0430\u043d\u0434\u044b, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. \u0417\u0430\u0442\u0435\u043c \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0435. \u0428\u0430\u0431\u043b\u043e\u043d \u0442\u0430\u043a \u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c \u0434\u043b\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u043e\u0432\u044b\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432 \u043a\u043e\u043d\u0435\u0446 \u044d\u0442\u043e\u0439 \u0446\u0435\u043f\u043e\u0447\u043a\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/1b4fba5e4c03afb785f2454ec3c6cd2929b65f7e\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f636861696e2d6f662d726573706f6e736962696c69746965732e737667\" alt=\"image\"\/><\/p>\n<p>  \u041a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u0432\u044b\u0448\u0435, scope \u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e, \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u0443\u044e \u043a\u0430\u043a \u0446\u0435\u043f\u043e\u0447\u043a\u0430 scope. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u044d\u0442\u0438\u0445 scope \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u044b, \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u044e\u0442 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u044b \u0441\u0432\u043e\u0438\u0445 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 scope, \u043d\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u044b \u0441 \u043d\u0438\u043c \u0447\u0435\u0440\u0435\u0437 \u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e $parent.<\/p>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 $emit \u0438\u043b\u0438 $broadcast \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u0435 (\u0432\u043d\u0438\u0437 \u0438\u043b\u0438 \u0432\u0432\u0435\u0440\u0445 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430) \u043f\u043e \u0446\u0435\u043f\u043e\u0447\u043a\u0435 scope, \u0435\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u043a \u0448\u0438\u043d\u0443 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0438\u043b\u0438 \u0442\u043e\u0447\u043d\u0435\u0435 \u043a\u0430\u043a \u0446\u0435\u043f\u043e\u0447\u043a\u0443 \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u0435\u0439. \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 scope \u043c\u043e\u0436\u0435\u0442:  <\/p>\n<ul>\n<li>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 scope \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0435<\/li>\n<li>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0438 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435<\/li>\n<li>\u041f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043a \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 scope \u0432 \u0446\u0435\u043f\u043e\u0447\u043a\u0435, \u0431\u0435\u0437 \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/li>\n<li>\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0431\u0435\u0437 \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/li>\n<\/ul>\n<p>  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043d\u0438\u0436\u0435, ChildCtrl \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432\u0432\u0435\u0440\u0445 \u043f\u043e \u0446\u0435\u043f\u043e\u0447\u043a\u0435 scope. \u0417\u0434\u0435\u0441\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 scope (ParentCtrl \u0438 MainCtrl) \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u0437\u0430\u043f\u0438\u0441\u0430\u0432 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u044c: \u00abfoo received\u00bb. \u0415\u0441\u043b\u0438 \u043a\u0430\u043a\u043e\u0439 \u043d\u0438\u0431\u0443\u0434\u044c \u0438\u0437 scope \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u0435\u043b\u0435\u043c, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 stopPropagation \u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">myModule.controller('MainCtrl', function ($scope) {   $scope.$on('foo', function () {     console.log('foo received');   }); });  myModule.controller('ParentCtrl', function ($scope) {   $scope.$on('foo', function (e) {     console.log('foo received');   }); });  myModule.controller('ChildCtrl', function ($scope) {   $scope.$emit('foo'); }); <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0432 \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0439 \u0432\u044b\u0448\u0435 UML \u0434\u0438\u0430\u0433\u0440\u0430\u043c\u043c\u0435, \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 scope, \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440.<\/p>\n<h4>Command<\/h4>\n<p>  Command \u2014 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0447\u0435\u0441\u043a\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438 \u0432\u0441\u0435\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438 \u0432\u044b\u0437\u043e\u0432\u0430 \u043c\u0435\u0442\u043e\u0434\u0430 \u0447\u0435\u0440\u0435\u0437 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0432\u0440\u0435\u043c\u044f. \u042d\u0442\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0438\u043c\u044f \u043c\u0435\u0442\u043e\u0434\u0430, \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0440\u0438\u043d\u0430\u0434\u043b\u0435\u0436\u0438\u0442 \u043c\u0435\u0442\u043e\u0434 \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043c\u0435\u0442\u043e\u0434\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/59589669fe58f551ab8d912ea0391641daba667b\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f636f6d6d616e642e737667\" alt=\"image\"\/><\/p>\n<p>  \u0412 AngularJS \u0448\u0430\u0431\u043b\u043e\u043d Command \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 (data binding).<br \/>  \u041a\u043e\u0433\u0434\u0430 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u043c\u043e\u0434\u0435\u043b\u044c \u0441 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 ng-bind (\u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445) \u0438 ng-model (\u0434\u043b\u044f \u0434\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445). \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0435\u0441\u043b\u0438 \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e \u0431\u044b \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u043e\u0441\u044c \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438:<\/p>\n<pre><code class=\"html\">&lt;span ng-bind=&quot;foo&quot;&gt;&lt;\/span&gt; <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 foo, \u0442\u0435\u043a\u0441\u0442 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0435\u0433\u0430 span \u0442\u043e\u0436\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"html\">&lt;span ng-bind=&quot;foo + ' ' + bar | uppercase&quot;&gt;&lt;\/span&gt; <\/code><\/pre>\n<p>  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u0435\u0433\u0430 span \u0431\u0443\u0434\u0435\u0442 \u0441\u0443\u043c\u043c\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 foo \u0438 bar \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u043c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0435. \u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432\u043d\u0443\u0442\u0440\u0438?<br \/>  \u0412 \u043a\u0430\u0436\u0434\u043e\u043c scope \u0435\u0441\u0442\u044c \u043c\u0435\u0442\u043e\u0434 $watch. \u041a\u043e\u0433\u0434\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 AngularJS \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 ng-bind, \u043e\u043d \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043d\u043e\u0432\u043e\u0433\u043e \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u0435\u043b\u044f \u0434\u043b\u044f \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f foo + &#8216; &#8216; + bar | uppercase, ($scope.$watch(\u00abfoo + &#8216; &#8216; + bar | uppercase\u00bb, function () { \/* body *\/ });). \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u043d\u0430 \u043a\u0430\u0436\u0434\u044b\u0439 \u0440\u0430\u0437 \u043a\u043e\u0433\u0434\u0430 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0442\u043d\u043e\u0433\u043e \u0432\u044b\u0437\u043e\u0432\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0442\u0435\u0433\u0430 span.<\/p>\n<p>  \u0412\u043e\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0435\u0440\u0432\u044b\u0445 \u0441\u0442\u0440\u043e\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 $watch:<\/p>\n<pre><code class=\"javascript\">$watch: function(watchExp, listener, objectEquality) {   var scope = this,   get = compileToFn(watchExp, 'watch'),   array = scope.$$watchers,   watcher = {     fn: listener,     last: initWatchVal,     get: get,     exp: watchExp,     eq: !!objectEquality   }; \/\/... <\/code><\/pre>\n<p>  \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c watcher \u043a\u0430\u043a Command. \u0412\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 Command \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c\u0441\u044f \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0446\u0438\u043a\u043b\u0435 &quot;$digest&quot;. \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e AngularJS \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043e\u043d \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044f. Watcher \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u0441\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u043d\u0430\u0431\u043b\u044e\u0434\u0435\u043d\u0438\u044f \u0438 \u0434\u0435\u043b\u0435\u0433\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044e (\u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u0435\u043b\u044e). \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c $scope \u043a\u0430\u043a Client \u0438 \u0446\u0438\u043a\u043b $digest \u043a\u0430\u043a Invoker \u043a\u043e\u043c\u0430\u043d\u0434.<\/p>\n<h3>Controllers<\/h3>\n<p>  <\/p>\n<h4>Page Controller<\/h4>\n<p>  \u041e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438\u043b\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0435. \u041c\u0430\u0440\u0442\u0438\u043d \u0424\u0430\u0443\u043b\u0435\u0440.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/a459a7055792ffbba88f8be4467825fd406550f8\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f706167652d636f6e74726f6c6c65722e737667\" alt=\"image\"\/><\/p>\n<p>  \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e 4 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\u043c\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443:<br \/>  \u0428\u0430\u0431\u043b\u043e\u043d \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0432\u0432\u043e\u0434 \u0434\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0434\u043b\u044f \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0438\u0440\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0420\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0434\u0438\u0441\u043f\u0435\u0442\u0447\u0435\u0440\u0441\u043a\u043e\u0439 \u043b\u043e\u0433\u0438\u043a\u0438 \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0418\u0437-\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u043c\u043e\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 (\u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443 \u0444\u0443\u0442\u0435\u0440\u044b, \u0445\u0435\u0434\u0435\u0440\u044b, \u043a\u043e\u0434 \u0437\u0430\u0431\u043e\u0442\u044f\u0449\u0438\u0439\u0441\u044f \u043e \u0441\u0435\u0441\u0441\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f) \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u043e\u0431\u0440\u0430\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044e. \u0412 AngularJS \u0435\u0441\u0442\u044c \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b scope. \u041e\u043d\u0438 \u043d\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0442\u0430\u043a \u043a\u0430\u043a \u044d\u0442\u043e \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c $route \u0438\u043b\u0438 $state, \u0430 \u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b ng-view\/ui-view.<\/p>\n<p>  \u0422\u0430\u043a \u0436\u0435 \u043a\u0430\u043a \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b AngularJS \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0442 \u0437\u0430 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0435\u0439. \u042d\u0442\u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u043f\u043e\u0441\u043b\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0432 scope \u043d\u0435 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u044b \u043e\u0442 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430, \u0432\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0435 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432 \u0438\u0442\u043e\u0433\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f (\u043c\u0435\u0442\u043e\u0434\u044b scope). \u0414\u0440\u0443\u0433\u043e\u0435 \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u043e \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u0438 AngularJS \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\u043c\u0438 \u2013 \u044d\u0442\u043e \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043e\u043d\u0438 \u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0442. \u042d\u0442\u043e\u043c\u0443 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u044f scope \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f\u043c\u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b.<\/p>\n<p>  \u041a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b AngularJS \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 ASP.NET WebForms, \u0442\u0430\u043a \u043a\u0430\u043a \u0438\u0445 \u043e\u0431\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c\u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430\u043c\u0438:<\/p>\n<pre><code class=\"html\">&lt;!doctype html&gt; &lt;html&gt;   &lt;head&gt;   &lt;\/head&gt;   &lt;body ng-controller=&quot;MainCtrl&quot;&gt;    &lt;div ng-controller=&quot;ChildCtrl&quot;&gt;       &lt;span&gt;{{user.name}}&lt;\/span&gt;       &lt;button ng-click=&quot;click()&quot;&gt;Click&lt;\/button&gt;     &lt;\/div&gt;   &lt;\/body&gt; &lt;\/html&gt; <\/code><\/pre>\n<p>  <\/p>\n<pre><code class=\"javascript\">function MainCtrl($scope, $location, User) {   if (!User.isAuthenticated()) {     $location.path('\/unauthenticated');   } }  function ChildCtrl($scope, User) {   $scope.click = function () {     alert('You clicked me!');   };   $scope.user = User.get(0); } <\/code><\/pre>\n<p>  \u042d\u0442\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043b\u043e\u0433\u0438\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u0430, \u043d\u043e \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432 \u00abproduction\u00bb \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u043b\u043e\u0433\u0438\u043a\u0443 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043b\u0435\u0440\u044b. \u0414\u043e\u0441\u0442\u0443\u043f \u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430\u043c \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u043d\u0430 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u0430\u0431\u0441\u0442\u0440\u0430\u043a\u0446\u0438\u0438.<br \/>  ChildCtr \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0432 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u043d\u0430\u0436\u0430\u0442\u0438\u0435 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u0441 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c \u00abClick\u00bb.<\/p>\n<h3>Others<\/h3>\n<p>  <\/p>\n<h4>Module Pattern<\/h4>\n<p>  \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044d\u0442\u043e \u043d\u0435 \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043e\u0442 \u00ab\u0431\u0430\u043d\u0434\u044b \u0447\u0435\u0442\u044b\u0440\u0435\u0445\u00bb \u0438 \u0434\u0430\u0436\u0435 \u043d\u0438 \u043e\u0434\u0438\u043d \u0438\u0437 \u00abPatterns of Enterprise Application Architecture\u00bb. \u042d\u0442\u043e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0439 JavaScript \u0448\u0430\u0431\u043b\u043e\u043d \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0446\u0435\u043b\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435 \u0438\u043d\u043a\u0430\u043f\u0441\u0443\u043b\u044f\u0446\u0438\u0438.<br \/>  \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0448\u0430\u0431\u043b\u043e\u043d \u043c\u043e\u0434\u0443\u043b\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0441\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e-\u043b\u0435\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. \u041a\u0430\u0436\u0434\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u043e\u043b\u044c \u0438 \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043a\u0440\u044b\u0442\u044b \u0432 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438. <\/p>\n<p>  \u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0439 API \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f:<\/p>\n<pre><code class=\"javascript\">var Page = (function () {      var title;      function setTitle(t) {     document.title = t;     title = t;   }      function getTitle() {     return title;   }      return {     setTitle: setTitle,     getTitle: getTitle   }; }()); <\/code><\/pre>\n<p>  \u0412 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0432\u044b\u0448\u0435 IIFE (Immediately-Invoked Function Expression \u2014 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u043d\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438), \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e\u0441\u043b\u0435 \u0432\u044b\u0437\u043e\u0432\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u0441 \u0434\u0432\u0443\u043c\u044f \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 (setTitle \u0438 getTitle). \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 Page. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0431\u044a\u0435\u043a\u0442\u0430 Page \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u0440\u044f\u043c\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 title, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 IIFE.<\/p>\n<p>  \u0428\u0430\u0431\u043b\u043e\u043d \u043c\u043e\u0434\u0443\u043b\u044c \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u043f\u0440\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 service \u0432 AngularJS. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u044d\u0442\u043e\u0442 \u0448\u0430\u0431\u043b\u043e\u043d \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0441\u0442\u0438\u0447\u044c (\u0438 \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u043c) \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0441\u0442\u0438:<\/p>\n<pre><code class=\"javascript\">app.factory('foo', function () {    function privateMember() {     \/\/body...   }      function publicMember() {     \/\/body...     privateMember();     \/\/body   }      return {     publicMember: publicMember   }; }); <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e \u043a\u0430\u043a \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u0438\u043c foo \u0432 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0443 \u043d\u0430\u0441 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b, \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u0435. \u042d\u0442\u043e \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043e\u0449\u043d\u044b\u043c, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<h4>Data Mapper<\/h4>\n<p>  \u0428\u0430\u0431\u043b\u043e\u043d Data Mapper \u2013 \u044d\u0442\u043e \u0441\u043b\u043e\u0439 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0434\u0430\u043d\u043d\u044b\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 (\u0447\u0430\u0441\u0442\u043e \u044d\u0442\u043e \u0440\u0435\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u0411\u0414) \u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438. \u0426\u0435\u043b\u044c \u044d\u0442\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u2013 \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432 \u043f\u0430\u043c\u044f\u0442\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u0434\u0440\u0443\u0433 \u043e\u0442 \u0434\u0440\u0443\u0433\u0430 \u0438 \u043e\u0442 \u0441\u0435\u0431\u044f \u0441\u0430\u043c\u043e\u0433\u043e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/camo.githubusercontent.com\/7cc6cef0e7bc01da6d24a48fab0427ca0a357934\/68747470733a2f2f7261776769742e636f6d2f6d6765636865762f616e67756c61726a732d696e2d7061747465726e732f6d61737465722f696d616765732f646174612d6d61707065722e737667\" alt=\"image\"\/><\/p>\n<p>  \u041a\u0430\u043a \u0443\u0436\u0435 \u0433\u043e\u0432\u043e\u0440\u0438\u043b\u043e\u0441\u044c Data Mapper \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u043e\u0439 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u044b\u043c \u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435\u043c \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438. \u041e\u0431\u044b\u0447\u043d\u043e AngularJS \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441 API \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u043d\u0430 \u043b\u044e\u0431\u043e\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435 (Ruby, PHP, Java, JavaScript \u0438 \u0442.\u0434.).<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c RESTful API, service $resource \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0432 Active Record \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435. \u0425\u043e\u0442\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u043d\u0435 \u0432 \u0441\u0430\u043c\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0435\u043c \u0444\u043e\u0440\u043c\u0430\u0442\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 front-end.<\/p>\n<p>  \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f:  <\/p>\n<ul>\n<li>name<\/li>\n<li>address<\/li>\n<li>list of friends<\/li>\n<\/ul>\n<p>  \u0418 \u043d\u0430\u0448\u0435 API \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b:  <\/p>\n<ul>\n<li>GET \/user\/:id \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0438\u043c\u044f \u0438 \u0430\u0434\u0440\u0435\u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/li>\n<li>GET \/friends\/:id \u2013 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u043f\u0438\u0441\u043e\u043a \u0434\u0440\u0443\u0437\u0435\u0439 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/li>\n<\/ul>\n<p>  \u041e\u0434\u043d\u043e \u0438\u0437 \u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0432\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 service, \u043e\u0434\u0438\u043d \u0434\u043b\u044f \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434\u0430 \u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0434\u043b\u044f \u0432\u0442\u043e\u0440\u043e\u0433\u043e. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0431\u0443\u0434\u0435\u0442, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0434\u043d\u043e\u0433\u043e service, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f User, \u043e\u043d \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0434\u0440\u0443\u0437\u0435\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c User:<\/p>\n<pre><code class=\"javascript\">app.factory('User', function ($q) {      function User(name, address, friends) {     this.name = name;     this.address = address;     this.friends = friends;   }      User.get = function (params) {     var user = $http.get('\/user\/' + params.id),     friends = $http.get('\/friends\/' + params.id);     $q.all([user, friends]).then(function (user, friends) {       return new User(user.name, user.address, friends);     });   };   return User; }); <\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043f\u0441\u0435\u0432\u0434\u043e Data Mapper, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043a \u043d\u0430\u0448\u0435\u043c\u0443 API \u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0438\u0438 \u0441 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c\u0438 SPA.<br \/>  \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c User \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"javascript\">function MainCtrl($scope, User) {   User.get({ id: 1 }).then(function (data) {     $scope.user = data;   }); } <\/code><\/pre>\n<p>  \u0418 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0448\u0430\u0431\u043b\u043e\u043d:<\/p>\n<pre><code class=\"html\">&lt;div&gt;   &lt;div&gt;     Name: {{user.name}}   &lt;\/div&gt;   &lt;div&gt;     Address: {{user.address}}   &lt;\/div&gt;   &lt;div&gt;     Friends with ids:     &lt;ul&gt;       &lt;li ng-repeat=&quot;friend in user.friends&quot;&gt;{{friend}}&lt;\/li&gt;     &lt;\/ul&gt;   &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<h3>\u0421\u0441\u044b\u043b\u043a\u0438<\/h3>\n<p>  <\/p>\n<ol>\n<li><a href=\"https:\/\/en.wikipedia.org\/wiki\">Wikipedia<\/a>. The source of all brief descriptions of the design patterns is wikipedia.<\/li>\n<li><a href=\"https:\/\/docs.angularjs.org\">AngularJS&#8217; documentation<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/angular\/angular.js\">AngularJS&#8217; git repository<\/a><\/li>\n<li><a href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/ff649595.aspx\">Page Controller<\/a><\/li>\n<li><a href=\"http:\/\/martinfowler.com\/books\/eaa.html\">Patterns of Enterprise Application Architecture (P of EAA)<\/a><\/li>\n<li><a href=\"http:\/\/googletesting.blogspot.com\/2008\/05\/tott-using-dependancy-injection-to.html\">Using Dependancy Injection to Avoid Singletons<\/a><\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/13512949\/why-would-one-use-the-publish-subscribe-pattern-in-js-jquery\">Why would one use the Publish\/Subscribe pattern (in JS\/jQuery)?<\/a><\/li>\n<\/ol>\n<div class=\"clear\"><\/div>\n<\/p><\/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\/250149\/\"> http:\/\/habrahabr.ru\/post\/250149\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">\n<h2>\u041a\u0440\u0430\u0442\u043a\u0438\u0439 \u043e\u0431\u0437\u043e\u0440<\/h2>\n<p>  \u041e\u0434\u0438\u043d \u0438\u0437 \u043b\u0443\u0447\u0448\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0438\u0437\u0443\u0447\u0438\u0442\u044c, \u0447\u0442\u043e \u0442\u043e \u043d\u043e\u0432\u043e\u0435, \u044d\u0442\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c, \u043a\u0430\u043a \u0432 \u043d\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0443\u0436\u0435 \u0437\u043d\u0430\u043a\u043e\u043c\u044b\u0435 \u043d\u0430\u043c \u0432\u0435\u0449\u0438. \u042d\u0442\u0430 \u0441\u0442\u0430\u0442\u044c\u044f \u043d\u0435 \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u0430 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0438\u043b\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u0430\u0437\u043e\u0432\u043e\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0439 \u041e\u041e\u041f, \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432. \u0426\u0435\u043b\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u043e\u043f\u0438\u0441\u0430\u0442\u044c, \u043a\u0430\u043a \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e\u0433\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u044f \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 AngularJS \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u043d\u0430 \u043d\u0435\u043c <a href=\"https:\/\/ru.wikipedia.org\/wiki\/Single_Page_Application\">SPA<\/a>.<\/p>\n<h2>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u0421\u0442\u0430\u0442\u044c\u044f \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0441 \u043a\u0440\u0430\u0442\u043a\u043e\u0433\u043e \u043e\u0431\u0437\u043e\u0440\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 AngularJS. \u041e\u0431\u0437\u043e\u0440 \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b AngularJS: directives, filters, controllers, services, scope. \u0412\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0438 \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0428\u0430\u0431\u043b\u043e\u043d\u044b \u0441\u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u043f\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c AngularJS, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f. \u0415\u0441\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445, \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u0430\u043d\u043e.<br \/>  \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437\u0434\u0435\u043b \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0432 SPA \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 AngularJS.  <\/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-250149","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/250149","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=250149"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/250149\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=250149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=250149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=250149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}