{"id":273653,"date":"2016-02-05T13:34:03","date_gmt":"2016-02-05T10:34:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=273653"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=273653","title":{"rendered":"\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 Angular 2 \u0438 Aurelia side by side"},"content":{"rendered":"<p>       <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/f0a\/f30\/342\/f0af3034266844bd88f43b125db328b2.jpg\" alt=\"image\"\/><\/p>\n<p>  \u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u0432 \u043c\u0438\u0440\u0435 web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u2014 \u0432\u044b\u0448\u043b\u0430 \u0431\u0435\u0442\u0430 <a href=\"http:\/\/angularjs.blogspot.ru\/2015\/12\/angular-2-beta.html\">Angular 2<\/a>. \u0418 \u0443\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u043b\u0438\u0437\u0430.<\/p>\n<p>  \u041d\u043e \u043e\u0446\u0435\u043d\u043a\u0430 \u0441\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435, \u0432 \u0432\u0430\u043a\u0443\u0443\u043c\u0435, \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0432\u044b\u0431\u043e\u0440 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u0438\u043a\u0438 \u043f\u043e \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u043c \u0431\u0443\u043a\u043b\u0435\u0442\u0430\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u0412\u0441\u0435 \u0444\u0438\u0448\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0432 \u0433\u0430\u0434\u0436\u0435\u0442\u0435, \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b. \u0410 \u0432\u0441\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442 \u2014 \u043d\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e \u0438\u0445 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u0436\u0435 \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435 \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044f \u0441 \u0447\u0435\u043c-\u0442\u043e \u0435\u0449\u0435.<\/p>\n<p>  \u0422\u0430\u043a \u0438 \u0440\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u043c\u044b\u0441\u043b\u044c \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c Angular 2 \u0441 \u043d\u043e\u0432\u044b\u043c, \u043d\u043e \u0432\u0435\u0441\u044c\u043c\u0430 \u0430\u043c\u0431\u0438\u0446\u0438\u043e\u0437\u043d\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c <a href=\"http:\/\/blog.durandal.io\/2015\/11\/16\/aurelia-beta-week-day-1-the-beta-is-here\/\">Aurelia<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a \u0436\u0435 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0432\u044b\u0448\u0435\u043b \u0432 \u0431\u0435\u0442\u0443. \u0410 \u0437\u0430\u043e\u0434\u043d\u043e \u043f\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043f\u0438\u043b\u043a\u0443 \u0425\u0430\u0431\u0440\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e\u0431 \u044d\u0442\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u043a\u0430 \u0435\u0435 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 Angular 2.<br \/>  <a name=\"habracut\"><\/a><br \/>  \u041a\u043e\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432 \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432 \u0432\u0438\u0434\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0445 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u0432 \u0432\u044b\u043b\u043e\u0436\u0435\u043d \u043d\u0430 <a href=\"https:\/\/github.com\/fshchudlo\/angular-aurelia\">github<\/a>. \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0430 TypeScript \u0438 \u043e\u0431\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 <a href=\"https:\/\/github.com\/systemjs\/systemjs\">systemjs<\/a>. \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 systemjs \u0431\u044b\u043b\u0438 \u0432\u0437\u044f\u0442\u044b \u0438\u0437 quick start guide \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f. \u041c\u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u0437\u0443\u043c\u043d\u044b\u043c \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u0432 \u0442\u043e\u043c \u0432\u0438\u0434\u0435, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0438\u0445 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u0430\u0432\u0442\u043e\u0440\u044b \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432, \u0438 \u043d\u0435 \u043f\u044b\u0442\u0430\u0442\u044c\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u0445\u043e\u0436\u0438\u043c\u0438. \u0422\u0430\u043a\u0436\u0435 \u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0439 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 <a href=\"https:\/\/github.com\/indexzero\/http-server\">http-server<\/a> \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 pushState (\u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0441\u043a\u043e\u0440\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c, \u0438\u0431\u043e \u043e\u0434\u043e\u0431\u0440\u0435\u043d\u043d\u044b\u0439 pull request <a href=\"https:\/\/github.com\/indexzero\/http-server\/pull\/194\">\u0435\u0441\u0442\u044c<\/a>), \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 Angular \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u044c hash based routing.<\/p>\n<p>  \u041c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u043a\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043a\u0430\u0436\u0434\u0443\u044e \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u043d\u0443\u044e \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c, \u0430 \u0441\u043a\u043e\u0440\u0435\u0435 \u043e\u0446\u0435\u043d\u0438\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0438 \u0441 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u0445\u043e\u0447\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u043f\u043b\u044e\u0448\u043a\u0438 \u043e\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442. \u0421\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u0432\u0441\u0435 \u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0437\u043d\u0430\u043a\u043e\u043c\u0441\u0442\u0432\u043e\u043c \u0441 \u043e\u0431\u0449\u0435\u0439 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043e\u0439. \u0410 \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b \u043e\u0441\u0442\u0430\u043d\u0443\u0442\u0441\u044f \u043d\u0430 \u0432\u0442\u043e\u0440\u0443\u044e \u0447\u0430\u0441\u0442\u044c.<\/p>\n<p>  \u041c\u044b \u043f\u043e\u0439\u0434\u0435\u043c \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u044e:  <\/p>\n<ul>\n<li>\u0423\u0437\u043d\u0430\u0435\u043c, \u0447\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Aurelia \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0435\u0435 \u043f\u0440\u0430\u0432\u043e\u043c\u0435\u0440\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0441 Angular<\/li>\n<li>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441 \u0432\u044b\u0441\u043e\u0442\u044b \u043f\u0442\u0438\u0447\u044c\u0435\u0433\u043e \u043f\u043e\u043b\u0435\u0442\u0430<\/li>\n<li>\u041e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u043c \u0444\u0438\u0447\u0438, \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0438 \u0447\u0442\u043e \u0441 \u0447\u0435\u043c \u0441\u0440\u0430\u043d\u0438\u0432\u0430\u0442\u044c<\/li>\n<li>\u0421\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435 \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/li>\n<li>\u041d\u0430\u0441\u0442\u0440\u043e\u0438\u043c routing<\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u0438\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/li>\n<li>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b data binding<\/li>\n<li>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0432 data binding<\/li>\n<\/ul>\n<h4>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Aurelia \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 \u0435\u0435 \u043f\u0440\u0430\u0432\u043e\u043c\u0435\u0440\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0441 Angular<\/h4>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 \u0425\u0430\u0431\u0440\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u043e Aurelia <a href=\"http:\/\/habrahabr.ru\/search\/?q=aurelia\">\u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435\u043c\u043d\u043e\u0433\u043e<\/a>, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c, \u0447\u0442\u043e \u043d\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0441\u043b\u044b\u0448\u0430\u043b \u043e \u043d\u0435\u0439. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043f\u0440\u0435\u0434\u044b\u0441\u0442\u043e\u0440\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f Aurelia. \u0422\u0435\u043c \u0431\u043e\u043b\u0435\u0435, \u0447\u0442\u043e \u043e\u043d\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430 \u0438 \u0434\u0430\u0436\u0435 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0430\u043c\u0430\u0442\u0438\u0447\u043d\u0430.<\/p>\n<p>  Aurelia \u044d\u0442\u043e \u043f\u0440\u043e\u0435\u043a\u0442 <a href=\"https:\/\/twitter.com\/EisenbergEffect\">\u0420\u043e\u0431\u0430 \u042d\u0439\u0437\u0435\u043d\u0431\u0435\u0440\u0433\u0430<\/a>, \u0430\u0432\u0442\u043e\u0440\u0430 \u0432\u0435\u0441\u044c\u043c\u0430 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0433\u043e MV*-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0434\u043b\u044f XAML-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c <a href=\"http:\/\/caliburnmicro.com\/\">Caliburn.Micro<\/a>. \u041f\u043e\u0437\u0436\u0435 \u043e\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b MV*-\u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u043b\u044f web, \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0438\u0439 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 <a href=\"http:\/\/durandaljs.com\/\">Durandal<\/a>. Durandal \u043d\u0435 \u0441\u0442\u0430\u043b \u0441\u0443\u043f\u0435\u0440 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c, \u043d\u043e, \u0442\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0432 \u043d\u0435\u043c \u0431\u044b\u043b\u0438 \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0438 \u044d\u043b\u0435\u0433\u0430\u043d\u0442\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0441\u043e\u0431\u0440\u0430\u043b \u0441\u0432\u043e\u044e \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u044e \u043f\u0440\u0438\u0432\u0435\u0440\u0436\u0435\u043d\u0446\u0435\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0433\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u044e\u0431\u0438\u043b\u0438.<\/p>\n<p>  \u041d\u043e \u0420\u043e\u0431 \u042d\u0439\u0437\u0435\u043d\u0431\u0435\u0440\u0433 \u043f\u043e\u043d\u0438\u043c\u0430\u043b \u0432\u0441\u0435 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 Durandal, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441 \u0435\u0433\u043e \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435\u043c \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 <a href=\"http:\/\/eisenbergeffect.bluespire.com\/preparing-for-durandal-nextgen\/\">\u0442\u0430\u043a \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e NextGen \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430<\/a>.<\/p>\n<p>  \u0412 \u044f\u043d\u0432\u0430\u0440\u0435 2014 \u0433\u043e\u0434\u0430, \u043d\u0430 \u043a\u043e\u043d\u0444\u0435\u0440\u0435\u043d\u0446\u0438\u0438 ngConf \u043d\u0435\u0431\u0435\u0437\u044b\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0439 \u0432 \u043c\u0438\u0440\u0435 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 <a href=\"http:\/\/johnpapa.net\/\">John Papa<\/a> \u043f\u043e\u0434\u0435\u043b\u0438\u043b\u0441\u044f \u0441 \u043c\u0435\u043d\u0435\u0434\u0436\u0435\u0440\u043e\u043c Angular team <a href=\"https:\/\/github.com\/bradlygreen\">\u0411\u0440\u044d\u0434\u043e\u043c \u0413\u0440\u0438\u043d\u043e\u043c<\/a> \u0438\u0434\u0435\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u044b \u0420\u043e\u0431\u043e\u043c \u042d\u0439\u0437\u0435\u043d\u0431\u0435\u0440\u0433\u043e\u043c \u0432 Durandal \u0438 \u0432 NextGen framework. \u042d\u0442\u0438 \u0438\u0434\u0435\u0438 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u043b\u0438 \u0413\u0440\u0438\u043d\u0430 \u0438 \u043e\u043d \u0440\u0435\u0448\u0438\u043b \u043f\u043e\u043e\u0431\u0449\u0430\u0442\u044c\u0441\u044f \u0441 \u042d\u0439\u0437\u0435\u043d\u0431\u0435\u0440\u0433\u043e\u043c.<\/p>\n<p>  \u0412\u0441\u0442\u0440\u0435\u0442\u0438\u0432\u0448\u0438\u0441\u044c, \u0411\u0440\u044d\u0434 \u0413\u0440\u0438\u043d \u0438 \u0420\u043e\u0431 \u042d\u0439\u0437\u0435\u043d\u0431\u0435\u0440\u0433 \u043f\u043e\u043d\u044f\u043b\u0438, \u0447\u0442\u043e \u0438\u0445 \u0432\u0437\u0433\u043b\u044f\u0434\u044b \u043d\u0430 \u0431\u0443\u0434\u0443\u0449\u0435\u0435 \u0432\u0435\u0431\u0430 \u0438 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0442, \u0438 \u043e\u043d\u0438 \u043f\u0440\u0438\u043d\u044f\u043b\u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0443\u0441\u0438\u043b\u0438\u044f \u0438 \u042d\u0439\u0437\u0435\u043d\u0431\u0435\u0440\u0433 <a href=\"http:\/\/eisenbergeffect.bluespire.com\/angular-and-durandal-converge\/\">\u043d\u0430\u0447\u0430\u043b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u0430\u043d\u0434\u0435 Angular<\/a> \u043d\u0430\u0434 \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0435\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. <\/p>\n<p>  \u041e\u0434\u043d\u0430\u043a\u043e, \u0441\u043f\u0443\u0441\u0442\u044f \u0434\u0435\u0441\u044f\u0442\u044c \u043c\u0435\u0441\u044f\u0446\u0435\u0432, \u043e\u043d <a href=\"http:\/\/eisenbergeffect.bluespire.com\/leaving-angular\/\">\u043f\u0440\u0438\u043d\u044f\u043b \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u043e\u043a\u0438\u043d\u0443\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 Angular<\/a>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f Angular 2, \u043f\u043e \u0435\u0433\u043e \u043c\u043d\u0435\u043d\u0438\u044e, \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0441\u0438\u043b\u044c\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c \u0438 \u043e\u0442\u043b\u0438\u0447\u0430\u043b\u043e\u0441\u044c \u043e\u0442 \u0442\u043e\u0433\u043e Angular 2, \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043e\u043d \u0441\u043e\u0433\u043b\u0430\u0448\u0430\u043b\u0441\u044f. <\/p>\n<p>  \u042d\u0439\u0437\u0435\u043d\u0431\u0435\u0440\u0433 \u0437\u0430 \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0439 \u0441\u0440\u043e\u043a \u0441\u043e\u0431\u0440\u0430\u043b \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0443, \u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0435\u0441\u0442\u044c \u0442\u0430\u043a\u0438\u0435 \u0437\u0432\u0435\u0437\u0434\u044b \u043a\u0430\u043a, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/twitter.com\/OdeToCode\">Scott Allen<\/a>, \u0438 \u0432\u0435\u0440\u043d\u0443\u043b\u0441\u044f \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u043d\u0430\u0434 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u043c \u0441\u0432\u043e\u0435\u0439 \u043c\u0435\u0447\u0442\u044b. \u0418\u0442\u043e\u0433\u043e\u043c \u044d\u0442\u043e\u0439 \u0440\u0430\u0431\u043e\u0442\u044b \u0438 <a href=\"http:\/\/eisenbergeffect.bluespire.com\/introducing-aurelia\/\">\u0441\u0442\u0430\u043b Aurelia<\/a>.<\/p>\n<p>  \u041e\u0431\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u043d\u044f\u043b\u0430 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u043c (\u043a\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0446\u0435\u043d\u043a\u0438, \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438 Aurelia \u0441\u043e\u0431\u0440\u0430\u043b\u0430 \u043d\u0430 github <a href=\"https:\/\/github.com\/aurelia\/framework\">5000 \u0437\u0432\u0435\u0437\u0434<\/a> \u043f\u0440\u043e\u0442\u0438\u0432 <a href=\"https:\/\/github.com\/angular\/angular\">8000 \u0443 Angular 2<\/a>).<\/p>\n<p>  \u041e\u0431\u0449\u0438\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b, \u0437\u0430\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u0432 Angular 2 \u0438 Aurelia, \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438 \u2014 \u044d\u0442\u043e \u0438\u0433\u0440\u043e\u043a\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430. \u041d\u043e \u0432\u0438\u0434\u0435\u043d\u0438\u0435 \u0432 \u0434\u0435\u0442\u0430\u043b\u044f\u0445 \u0438 \u043d\u0430\u0431\u043e\u0440 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0443 \u043d\u0438\u0445 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f, \u0447\u0442\u043e \u0438 \u0434\u0435\u043b\u0430\u0435\u0442 \u0438\u0445 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u043c.<\/p>\n<h4>\u041f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b Angular 2 \u0438 Aurelia \u0441 \u0432\u044b\u0441\u043e\u0442\u044b \u043f\u0442\u0438\u0447\u044c\u0435\u0433\u043e \u043f\u043e\u043b\u0435\u0442\u0430<\/h4>\n<p>  \u0418\u0437 \u043e\u0441\u044f\u0437\u0430\u0435\u043c\u044b\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 perfomance. <a href=\"http:\/\/jdanyow.github.io\/aurelia-dbmonster\/\">Aurelia<\/a> \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0432 \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0435 dbmonster, \u0432\u044b\u0431\u0438\u0432\u0430\u044f \u0447\u0443\u0442\u044c \u043b\u0443\u0447\u0448\u0438\u0435 \u0431\u0430\u043b\u043b\u044b, \u0447\u0435\u043c <a href=\"http:\/\/mathieuancelin.github.io\/js-repaint-perfs\/angular2\/opt.html\">Angular 2<\/a>, \u0438 \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043b\u0443\u0447\u0448\u0438\u0435, \u0447\u0435\u043c <a href=\"http:\/\/mathieuancelin.github.io\/js-repaint-perfs\/react\/opt.html\">React<\/a> \u0438 <a href=\"http:\/\/mathieuancelin.github.io\/js-repaint-perfs\/angular\/opt.html\">Angular1<\/a>.  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 dbmonster<\/b><\/p>\n<div class=\"spoiler_text\">Dbmonster \u044d\u0442\u043e rendering benchmark, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b <a href=\"https:\/\/twitter.com\/ryanflorence\">Ryan Florence<\/a>. \u0414\u043b\u044f \u043e\u0446\u0435\u043d\u043a\u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0438 \u044d\u0442\u043e \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u044b \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430. \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0442\u0435\u0441\u0442 \u0431\u044b\u043b \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u0434\u043b\u044f Angular 1, Angular 2 \u0438 React. \u041f\u043e\u0437\u0436\u0435 \u043e\u0434\u0438\u043d \u0438\u0437 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Aurelia, Jeremy Danyow, <a href=\"http:\/\/www.danyow.net\/aurelia-dbmonster\/\">\u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0434\u043b\u044f Aurelia<\/a>.<br \/>  \u041f\u0440\u0438 \u043e\u0446\u0435\u043d\u043a\u0435 \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043c\u043e\u043c\u0435\u043d\u0442\u044b:  <\/p>\n<ul>\n<li>\u041f\u043b\u0430\u0432\u043d\u044b\u0439 \u0441\u043a\u0440\u043e\u043b\u043b \u2014 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u00ab\u043f\u0440\u044b\u0436\u043a\u043e\u0432\u00bb<\/li>\n<li>\u0412\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0438 \u2014 \u0435\u0441\u043b\u0438 \u0432\u0435\u0441\u0442\u0438 \u043a\u0443\u0440\u0441\u043e\u0440 \u043c\u044b\u0448\u0438 \u043f\u043e \u0441\u043f\u0438\u0441\u043a\u0443, \u0442\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u0441\u043f\u043b\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430. \u041e\u043d\u0430 \u0434\u043e\u043b\u0436\u043d\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043b\u0430\u0432\u043d\u043e \u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0431\u0435\u0437 \u0437\u0430\u0434\u0435\u0440\u0436\u0435\u043a<\/li>\n<li>Repaint rate \u0438 memory rate \u2014 \u0432 \u043f\u0440\u0430\u0432\u043e\u043c \u043d\u0438\u0436\u043d\u0435\u043c \u0443\u0433\u043b\u0443 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u0430. \u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043e\u043a \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443, \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0440\u0430\u0441\u0445\u043e\u0434 \u043f\u0430\u043c\u044f\u0442\u0438<\/li>\n<li>\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u2014 \u0432 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0435\u0441\u0442\u044c \u0441\u043b\u0430\u0439\u0434\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0430\u0441\u0442\u043e\u0442\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445. \u0415\u0441\u043b\u0438 \u043f\u0440\u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 repaint rate \u043d\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u044c\u0448\u0435, \u0442\u043e \u044d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u043d\u0435\u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e\u0431 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 DOM<\/li>\n<\/ul>\n<p>   \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0438\u043d\u0434\u0438\u043a\u0430\u0442\u043e\u0440\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e \u0438 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u00ab\u0447\u0438\u0441\u0442\u043e\u0433\u043e\u00bb \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440 chrome \u0438 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u043e\u0439:  <\/p>\n<pre><code class=\"dos\">&quot;C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe&quot; --user-data-dir=&quot;C:\\chrome\\dev-sessions\\perf&quot; --enable-precise-memory-info --enable-benchmarking --js-flags=&quot;--expose-gc&quot; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u0418\u0437 \u043d\u0435\u043e\u0441\u044f\u0437\u0430\u0435\u043c\u044b\u0445 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u044e \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0441\u0430\u043c\u044b\u0435 \u0441\u0438\u043b\u044c\u043d\u044b\u0435 \u0438 \u0441\u043b\u0430\u0431\u044b\u0435 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043e\u0431\u043e\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 (\u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e, \u0418\u041c\u0425\u041e \u0430\u0432\u0442\u043e\u0440\u0430).  <\/p>\n<h6>\u0413\u043b\u0430\u0432\u043d\u044b\u0435 \u043f\u043b\u044e\u0441\u044b Angular<\/h6>\n<p>  <\/p>\n<ul>\n<li>\u0423 Angular \u0437\u0430\u0432\u0435\u0434\u043e\u043c\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u043e, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0431\u0443\u0434\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438\u0434\u0435\u0439, \u0431\u043e\u043b\u044c\u0448\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439, \u043f\u0440\u043e\u0449\u0435 \u043d\u0430\u0439\u0442\u0438 \u043e\u0442\u0432\u0435\u0442 \u043d\u0430 \u0438\u043c\u0435\u044e\u0449\u0438\u0439\u0441\u044f \u0432\u043e\u043f\u0440\u043e\u0441.  <\/li>\n<li>\u0423 Angular \u0432 \u0442\u0440\u0438 \u0440\u0430\u0437\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u0438 \u043e\u043d\u0438 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u044e\u0442 \u0441\u0432\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442. \u0422\u0430\u043a\u0436\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u0430 Angular \u0443\u0436\u0435 \u0437\u0430\u0440\u0443\u0447\u0438\u043b\u0430\u0441\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0430\u0432\u0442\u043e\u0440\u043e\u0432 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0434\u043b\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 Angular \u0431\u0443\u0434\u0435\u0442 \u0432 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u0438\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 (\u0430 \u0435\u0449\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0449\u0438\u0439 \u0438 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0443\u0442\u043e\u0439 <a href=\"http:\/\/go.rangle.io\/batarangle\">Batarangle<\/a>, \u043f\u0443\u0441\u0442\u044c \u043e\u043d \u0435\u0449\u0435 \u0438 \u0432 developer preview).    <\/li>\n<\/ul>\n<p>  <\/p>\n<h6>\u0413\u043b\u0430\u0432\u043d\u044b\u0435 \u043f\u043b\u044e\u0441\u044b Aurelia<\/h6>\n<p>  <\/p>\n<ul>\n<li>Aurelia \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c Angular-\u0443 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0445 \u0444\u0438\u0448\u0435\u043a. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0439 \u043c\u0435\u0445\u0430\u043d\u0438\u0437\u043c <a href=\"https:\/\/github.com\/aurelia\/documentation\/blob\/master\/English\/docs.md#compose\">composition<\/a>, \u0438 <a href=\"https:\/\/github.com\/aurelia\/documentation\/blob\/master\/English\/docs.md#template-parts\">template parts<\/a>. Aurelia \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u0430 \u0441 \u0430\u043a\u0446\u0435\u043d\u0442\u043e\u043c \u043d\u0430 unobtrusive, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e. Aurelia \u0431\u043e\u043b\u0435\u0435 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u0435\u043d \u0438 \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0430\u0435\u043c, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a Angular \u043f\u043e\u0440\u043e\u0439 \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u043d\u0443\u0436\u0434\u0430\u0435\u0442 \u043f\u043b\u043e\u0434\u0438\u0442\u044c \u043a\u043e\u043f\u0438\u043f\u0430\u0441\u0442.  <\/li>\n<li>\u041a\u043e\u043c\u0430\u043d\u0434\u0430 Aurelia \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432, \u0438 \u0435\u0441\u0442\u044c \u0440\u0435\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u0410 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0441 Angular 2 \u043c\u044b \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0435\u0441\u0442\u044c.<\/li>\n<\/ul>\n<p>  <\/p>\n<h6>\u0413\u043b\u0430\u0432\u043d\u044b\u0435 \u043c\u0438\u043d\u0443\u0441\u044b Angular<\/h6>\n<p>  <\/p>\n<ul>\n<li>\u0415\u0441\u043b\u0438 \u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u0438\u0441\u0442\u043e\u0440\u0438\u044e \u0440\u0430\u0437\u0432\u0438\u0442\u0438\u044f Angular, \u0442\u043e \u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043f\u0435\u0447\u0430\u0442\u043b\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0430 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0447\u0435\u0442\u043a\u043e \u0432\u0438\u0434\u0438\u0442, \u043a\u0430\u043a\u0438\u043c \u0434\u043e\u043b\u0436\u0435\u043d \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c\u0441\u044f Angular 2 \u0432 \u0438\u0442\u043e\u0433\u0435. \u042f \u0441\u043b\u0435\u0434\u0438\u043b \u0437\u0430 Angular 2 \u0441 \u043c\u043e\u043c\u0435\u043d\u0442\u0430 \u0430\u043d\u043e\u043d\u0441\u0430 \u0440\u0430\u0431\u043e\u0442 \u043d\u0430\u0434 \u043d\u0438\u043c \u0438 \u0432\u0438\u0436\u0443, \u0447\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u0441\u0438\u043b\u044c\u043d\u043e \u0438 \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f. \u041f\u043e \u044d\u0442\u043e\u0439 \u0436\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u042d\u0439\u0437\u0435\u043d\u0431\u0435\u0440\u0433 \u043f\u043e\u043a\u0438\u043d\u0443\u043b \u043a\u043e\u043c\u0430\u043d\u0434\u0443 Angular 2 \u0438\u0437-\u0437\u0430 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u0430\u0441\u044c \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0439. \u0418 \u043f\u043e \u044d\u0442\u043e\u0439 \u0436\u0435 \u043f\u0440\u0438\u0447\u0438\u043d\u0435 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f <a href=\"http:\/\/www.towfeek.se\/2015\/07\/angularjs-2-vs-aurelia\/\">\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043f\u043e\u0441\u0442\u044b<\/a>.  <\/li>\n<\/ul>\n<p>  <\/p>\n<h6>\u0413\u043b\u0430\u0432\u043d\u044b\u0435 \u043c\u0438\u043d\u0443\u0441\u044b Aurelia<\/h6>\n<p>  <\/p>\n<ul>\n<li>\u0413\u043b\u0430\u0432\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441 \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 Aurelia \u2014 \u0441\u0434\u044e\u0436\u0438\u0442 \u043b\u0438 \u043e\u043d\u0430 \u043f\u0440\u043e\u0442\u0438\u0432 Angular 2. \u042d\u0442\u043e \u043d\u0435 \u043f\u0440\u0430\u0437\u0434\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u042d\u0439\u0437\u0435\u043d\u0431\u0435\u0440\u0433 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 Aurelia \u0438 Angular 2. \u041e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0430\u043d\u0433\u0430\u0436\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0441\u0442\u0438 \u0433\u043e\u0432\u043e\u0440\u044f\u0442 \u0435\u0433\u043e \u0437\u0430\u043f\u0438\u0441\u0438 \u0441 \u0431\u043b\u043e\u0433\u0430\u0445 (<a href=\"http:\/\/blog.durandal.io\/2015\/03\/16\/aurelia-and-angular-2-code-side-by-side\/\">\u0440\u0430\u0437<\/a>, <a href=\"http:\/\/blog.durandal.io\/2015\/03\/17\/aurelia-angular-2-0-code-side-by-side-part-2\/\">\u0434\u0432\u0430<\/a>, <a href=\"http:\/\/blog.durandal.io\/2015\/05\/20\/porting-an-angular-2-0-app-to-aurelia\/\">\u0442\u0440\u0438<\/a>) \u0435\u0433\u043e \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u044f (<a href=\"https:\/\/vimeo.com\/153090562?utm_content=buffer79560&amp;utm_medium=social&amp;utm_source=twitter.com&amp;utm_campaign=buffer\">NDC London<\/a> \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u043c\u0438\u043d\u0443\u0442\u044b \u0432\u0438\u0434\u0435\u043e) \u0438 \u0434\u0430\u0436\u0435 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438 \u043a \u0441\u0442\u0430\u0442\u044c\u044f\u043c \u043f\u0440\u043e <a href=\"http:\/\/developer.telerik.com\/featured\/will-angular-2-be-a-success-you-bet\/#comment-2346150095\">Angular 2<\/a>. \u041c\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f aurelia, \u043d\u043e \u0443 \u043c\u0435\u043d\u044f \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u043f\u0430\u0441\u0435\u043d\u0438\u044f \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0432 \u043e\u0434\u0438\u043d \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0434\u0435\u043d\u044c \u043f\u0435\u0440\u0435\u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438\u0431\u043e \u0430\u0432\u0442\u043e\u0440\u0443 \u043d\u0430\u0434\u043e\u0435\u043b\u043e. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043d\u0435 \u043f\u0440\u043e\u0448\u043b\u043e \u0438 \u043d\u0435\u0434\u0435\u043b\u0438, \u043a\u0430\u043a \u0431\u043e\u043b\u044c\u0448\u043e\u0439 facebook \u043e\u0431\u044a\u044f\u0432\u0438\u043b \u043e <a href=\"https:\/\/habrahabr.ru\/post\/276135\/\">\u0437\u0430\u043a\u0440\u044b\u0442\u0438\u0438 parse.com<\/a>, \u0442\u0430\u043a \u0447\u0442\u043e \u043d\u0435 \u0437\u0430\u0441\u0442\u0440\u0430\u0445\u043e\u0432\u0430\u043d \u043d\u0438\u043a\u0442\u043e \u0438 \u043d\u0438 \u043e\u0442 \u0447\u0435\u0433\u043e.  <\/li>\n<\/ul>\n<h4>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Angular 2 \u0438 Aurelia, \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0438 \u0447\u0442\u043e \u0441 \u0447\u0435\u043c \u0441\u0440\u0430\u043d\u0438\u0432\u0430\u0442\u044c<\/h4>\n<p>  \u0410\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u044b Angular 2 \u0438 Aurelia \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0438. \u041d\u0438\u0436\u0435 \u043f\u043e\u043f\u044b\u0442\u0430\u044e\u0441\u044c \u0432 \u043f\u0430\u0440\u0443 \u0430\u0431\u0437\u0430\u0446\u0435\u0432 \u0441\u0444\u043e\u0440\u043c\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u044b \u0440\u0430\u0431\u043e\u0442\u044b \u043e\u0431\u043e\u0438\u0445, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0430\u044f \u043a\u0443\u0440\u0441\u0438\u0432\u043e\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0442\u0435\u0440\u043c\u0438\u043d\u044b \u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0438 \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c. \u041d\u0430\u0434\u0435\u044e\u0441\u044c, \u044d\u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u0447\u0438\u0442\u0430\u0435\u043c\u044b\u043c \u0442\u0435\u043a\u0441\u0442\u043e\u043c, \u0430 \u043d\u0435 \u043c\u0435\u0441\u0438\u0432\u043e\u043c \u0438\u0437 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u0432.<\/p>\n<p>  \u041e\u0441\u043d\u043e\u0432\u0443 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u043d\u0430 Angular 2, \u0442\u0430\u043a \u0438 \u043d\u0430 Aurelia \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 <i>\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/i>, \u0430\u0441\u0441\u043e\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0441 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c <i>\u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c<\/i>.<br \/>  \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435 root-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043b\u0438\u0446\u0435\u0442\u0432\u043e\u0440\u044f\u0435\u0442 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 (<i>app<\/i>). \u041a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c \u043c\u043e\u0433\u0443\u0442\/\u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <i>\u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u0432<\/i>.<\/p>\n<p>  \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <i>dependency injection<\/i>. \u0422\u0430\u043a\u0436\u0435, \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u043c\u0435\u0435\u0442 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 <i>\u0436\u0438\u0437\u043d\u0435\u043d\u043d\u044b\u0439 \u0446\u0438\u043a\u043b<\/i>, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <i>lifecycle hooks<\/i>. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u044b \u0432 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443.<\/p>\n<p>  \u0421\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0438 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <i>data binding<\/i>. \u0412 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 HTML \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u0442\u0440\u043e\u0438\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 <i>pipes<\/i> (Angular) \u0438\u043b\u0438 <i>value converters+binding behaviours<\/i> (Aurelia). <\/p>\n<p>  \u0414\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043c\u0435\u0436\u0434\u0443 \u0438\u0437\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u043e\u0431\u043b\u0430\u0441\u0442\u044f\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <i>routing<\/i>. \u0414\u043b\u044f \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u0438 \u043c\u0435\u0436\u0434\u0443 \u043c\u043e\u0434\u0443\u043b\u044f\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u044b <i>\u0441\u043e\u0431\u044b\u0442\u0438\u044f<\/i>.<\/p>\n<p>  \u0418, \u043d\u0430\u043a\u043e\u043d\u0435\u0446, \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c.<\/p>\n<h4>\u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043f\u0435\u0440\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/h4>\n<p>  <\/p>\n<h5>Angular 2<\/h5>\n<p>  \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u043e\u0431\u043e\u0439 root component.  <\/p>\n<pre><code class=\"javascript\">import {Component} from 'angular2\/core';  @Component({selector: 'angular-app', templateUrl: 'app\/app.html'} }) export class App {     message: string = 'Welcome to Angular 2!'; } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b Angular \u043f\u043e\u043d\u044f\u043b \u0447\u0442\u043e \u043d\u0430\u0448 \u043c\u043e\u0434\u0443\u043b\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0438\u0437 \u0441\u0435\u0431\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u0435\u0433\u043e \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u043c  @Component. <\/p>\n<p>  <i>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u2014 \u0441\u0442\u0440\u043e\u0433\u043e \u0433\u043e\u0432\u043e\u0440\u044f,  @Component \u044d\u0442\u043e \u043d\u0435 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 (decorator), \u0430 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u044f (annotation). \u041f\u0440\u043e \u0440\u0430\u0437\u043d\u0438\u0446\u0443 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"http:\/\/blog.thoughtram.io\/angular\/2015\/05\/03\/the-difference-between-annotations-and-decorators.html\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u043c \u0442\u0435\u0440\u043c\u0438\u043d \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043a Angular 2 \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0438 \u043b\u0435\u0436\u0430\u0442 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 Decorators.<\/i><\/p>\n<p>  \u041a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440, \u043a\u0443\u0434\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d. \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442 &lt;angular-app&gt;.<\/p>\n<p>  \u0414\u043b\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430:   <\/p>\n<ol>\n<li>\u0423\u043a\u0430\u0437\u0430\u0442\u044c html-\u0441\u0442\u0440\u043e\u043a\u0443 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 template \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430  @Component. \u0422\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u043d\u0430 \u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u0448\u0430\u0431\u043b\u043e\u043d \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0439 \u0438 \u043d\u0435 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0440\u0430\u0434\u0438 \u043d\u0435\u0433\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e html-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443<\/li>\n<li>\u0423\u043a\u0430\u0437\u0430\u0442\u044c url \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 templateUrl. \u0423 \u043d\u0430\u0441 \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442<\/li>\n<\/ol>\n<p>  \u0428\u0430\u0431\u043b\u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n<pre><code class=\"html\">    &lt;div class=&quot;container&quot;&gt;         &lt;div class=&quot;navbar-header&quot;&gt;             &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;{{message}}&lt;\/a&gt;         &lt;\/div&gt;     &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0412\u043e\u0442, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0438 \u0432\u0435\u0441\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e.<br \/>  <i>\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e<\/i> \u2014 \u043a\u043e\u0434 \u0447\u0438\u0449\u0435 \u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u0435\u0435 \u043e\u0442 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u0441\u0430\u043c\u043e\u0433\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430, \u043d\u0435\u0436\u0435\u043b\u0438 \u044d\u0442\u043e \u0431\u044b\u043b\u043e \u0432 Angular 1. \u042d\u0442\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0440\u0430\u0434\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>  <i>\u0427\u0442\u043e \u0441\u043c\u0443\u0449\u0430\u0435\u0442<\/i> \u2014 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u0432 \u0434\u0430\u0436\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0426\u0438\u0442\u0430\u0442\u0430 \u0438\u0437 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438:  <\/p>\n<blockquote><p>Each Angular component requires a single  @Component and at least one  <a href=\"https:\/\/habrahabr.ru\/users\/view\/\" class=\"user_link\">View<\/a> annotation. The  @Component annotation specifies when a component is instantiated, and which properties and hostListeners it binds to.  <\/p><\/blockquote>\n<p>  \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043a\u043e\u043d\u0438\u0444\u0433\u0443\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435, \u0443 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043f\u043e\u0434\u0447\u0438\u043d\u044f\u044e\u0442\u0441\u044f \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u043b\u043e\u0433\u0438\u043a\u0435, \u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u044f\u0432\u043d\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u043d\u0446\u0438\u0438, \u0430 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432.<\/p>\n<h5>Aurelia<\/h5>\n<p>  \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Aurelia \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u044f\u0441\u044c \u043d\u0430 \u043a\u043e\u043d\u0432\u0435\u043d\u0446\u0438\u044f\u0445, \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0431\u0435\u0437 \u043a\u0430\u043a\u0438\u0445-\u043b\u0438\u0431\u043e \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445:  <\/p>\n<pre><code class=\"javascript\">export class App {     message: string = &quot;Welcome to Aurelia!&quot;; } <\/code><\/pre>\n<p>  \u041f\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u043a\u043e\u043d\u0432\u0435\u043d\u0446\u0438\u0438, \u0434\u043b\u044f \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0446\u0438\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c html-\u0444\u0430\u0439\u043b \u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0438\u043c\u0435\u043d\u0435\u043c, \u0442\u043e \u0435\u0441\u0442\u044c \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0444\u0430\u0439\u043b app.html:  <\/p>\n<pre><code class=\"html\">&lt;template&gt;     &lt;div class=&quot;container&quot;&gt;         &lt;div class=&quot;navbar-header&quot;&gt;             &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;${message}&lt;\/a&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/template&gt; <\/code><\/pre>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d \u0432 Aurelia \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u043e\u0431\u0435\u0440\u043d\u0443\u0442 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 <a href=\"https:\/\/developer.mozilla.org\/ru\/docs\/Web\/HTML\/Element\/template\">template<\/a>. \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f inline \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 Angular 2 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 <a href=\"http:\/\/aurelia.io\/docs.html#\/aurelia\/templating\/latest\/doc\/api\/overview\">inlineView<\/a>. \u0422\u0430\u043a\u0436\u0435 \u0432 Aurelia \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u043d\u0432\u0435\u043d\u0446\u0438\u0438 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443. \u0414\u0435\u0442\u0430\u043b\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"http:\/\/aurelia.io\/docs.html#\/aurelia\/framework\/1.0.0-beta.1.0.8\/doc\/article\/app-configuration-and-startup\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <i>\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e<\/i> \u2014 \u043a\u043e\u0434 \u043f\u0440\u0435\u0434\u0435\u043b\u044c\u043d\u043e \u0447\u0438\u0441\u0442\u044b\u0439 \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0439. \u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430.<\/p>\n<p>  <i>\u0427\u0442\u043e \u0441\u043c\u0443\u0449\u0430\u0435\u0442<\/i> \u2014 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0430\u043d\u043d\u043e\u0442\u0430\u0446\u0438\u0439, \u0440\u0435\u0448\u0430\u044e\u0449\u0438\u0445 \u0441\u0445\u043e\u0436\u0438\u0435 \u0432\u043e\u043f\u0440\u043e\u0441\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u044d\u0442\u043e inlineView, noView, useView \u0438 useViewStrategy. \u0414\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044e \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u043d\u0435 \u043d\u0430\u0437\u043e\u0432\u0435\u0448\u044c, \u0438 \u0432 \u043d\u0435\u0439 \u0434\u0430\u0436\u0435 \u043d\u0435\u0442 \u043f\u043e\u0438\u0441\u043a\u0430, \u0442\u0430\u043a \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0440\u0438\u0441\u043a \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043f\u0443\u0442\u0430\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0438 \u0433\u0434\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<h4>\u041d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c routing<\/h4>\n<p>  \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043a\u0430\u0436\u0434\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0447\u0435\u043a, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0431\u0443\u0434\u0443\u0442 \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u0441\u043f\u0435\u043a\u0442\u044b, \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0432 \u0441\u0442\u0430\u0442\u044c\u0435. \u0412\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 routing \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043a\u0430\u043a \u0432 Angular, \u0442\u0430\u043a \u0438 \u0432 Aurelia, \u043e\u043d \u043f\u043e \u0441\u0443\u0442\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d routing-\u0443 \u043a\u0430\u043a \u0442\u0430\u043a\u043e\u0432\u043e\u043c\u0443.   <\/p>\n<h5>Angular 2<\/h5>\n<p>  \u0414\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c routing \u0432 Angular 2 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440  @RouteConfig, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u0434\u0443\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u044b \u043a \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430\u043c \u0438 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u043a\u0430\u0440\u0442\u0443 \u0440\u043e\u0443\u0442\u0438\u043d\u0433\u0430. \u0421\u0434\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 app:  <\/p>\n<pre><code class=\"javascript\">... import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2\/router'; import {BindingSample} from '.\/binding-sample\/binding-sample'; import {ComponentSample} from '.\/component-sample\/component-sample'; ... @RouteConfig([     { path: '\/component-sample', name: 'ComponentSample', component: ComponentSample, useAsDefault: true },     { path: '\/binding-sample', name: 'BindingSample', component: BindingSample } ]) export class App {    ... } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c:  <\/p>\n<ol>\n<li>\u043f\u0430\u0442\u0442\u0435\u0440\u043d \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430<\/li>\n<li>\u0438\u043c\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 (\u043e\u043d\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435) <\/li>\n<li>\u043c\u043e\u0434\u0443\u043b\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 Angular \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 <\/li>\n<li>\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 useAsDefault, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0447\u0442\u043e \u044d\u0442\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e<\/li>\n<\/ol>\n<p>  \u0415\u0441\u043b\u0438 \u0441\u043c\u0443\u0449\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0443\u0436\u0435 \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u043c\u0435\u044e\u0442 \u043c\u0430\u0440\u0448\u0440\u0443\u0442, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 component \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 loader, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u0435\u0440\u043d\u0435\u0442 promise, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u044e\u0449\u0438\u0439 \u043d\u0443\u0436\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c. \u041c\u044b \u0442\u0430\u043a \u0438 \u0441\u0434\u0435\u043b\u0430\u0435\u043c, \u043d\u043e \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430 \u0447\u0443\u0442\u044c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c routing \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445 \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u0441\u0435\u043a\u0446\u0438\u0438, \u043a\u0443\u0434\u0430 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 ROUTER_DIRECTIVES \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 directives \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430  @Component. \u0418\u0442\u043e\u0433\u043e, \u043c\u043e\u0434\u0443\u043b\u044c app.ts \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439:<\/p>\n<pre><code class=\"javascript\">import {Component} from 'angular2\/core'; import {View} from 'angular2\/core'; import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2\/router';  @Component({     selector: 'angular-app', templateUrl: 'app\/app.html', directives: [ROUTER_DIRECTIVES] }) @RouteConfig([     { path: '\/component-sample', name: 'ComponentSample',              loader : () =&gt; System.import('app\/component-sample\/component-sample').then(m =&gt; m.ComponentSample), useAsDefault: true },     { path: '\/binding-sample', name: 'BindingSample',              loader : () =&gt; System.import('app\/binding-sample\/binding-sample').then(m =&gt; m.BindingSample) } ]) export class App {     message: string = &quot;Welcome to Angular 2!&quot;; } <\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e \u0432 app.html. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 <a href=\"https:\/\/angular.io\/docs\/ts\/latest\/api\/router\/RouterLink-directive.html\">routerLink<\/a>, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u043c\u0430\u0441\u0441\u0438\u0432, \u043f\u0435\u0440\u0432\u044b\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u043f\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435  @RouteConfig.   <\/p>\n<pre><code class=\"html\">\u2026         &lt;div id=&quot;navbar&quot; class=&quot;collapse navbar-collapse&quot;&gt;             &lt;ul class=&quot;nav navbar-nav&quot;&gt;                 &lt;li class=&quot;active&quot;&gt;                     &lt;a [routerLink]=&quot;['ComponentSample']&quot;&gt;Component sample&lt;\/a&gt;                 &lt;\/li&gt;                 &lt;li&gt;                     &lt;a [routerLink]=&quot;['BindingSample']&quot;&gt;Binding sample&lt;\/a&gt;                 &lt;\/li&gt;             &lt;\/ul&gt;         &lt;\/div&gt; ... <\/code><\/pre>\n<p>  \u041f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u043c \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e routing, \u0442\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0442\u0440\u043e\u043a \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0438\u0437\u043e\u0432\u0430\u0442\u044c, \u0442\u043e \u043e\u0431\u044a\u0435\u043a\u0442 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u043c \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435:  <\/p>\n<pre><code class=\"html\">...     &lt;a [routerLink]=&quot;['BindingSample', {someParameter: \u2018someString\u2019}]&quot;&gt;Binding sample&lt;\/a&gt; ... <\/code><\/pre>\n<p>  \u0418 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u043c\u043e\u043c\u0435\u043d\u0442. \u041d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430. \u0414\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b router-outlet \u0432 \u0442\u043e\u043c \u0436\u0435 app.html:  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;container&quot;&gt;     &lt;router-outlet&gt;&lt;\/router-outlet&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <i>\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e<\/i> \u2014 \u043d\u043e\u0432\u044b\u0439 routing \u043f\u0440\u0438\u044f\u0442\u043d\u0435\u0435, \u0447\u0435\u043c routeProvider, \u0436\u0438\u0432\u0448\u0438\u0439 \u0432 Angular 1.x, \u043d\u043e \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0446\u0435\u043b\u044b\u0439 \u0440\u044f\u0434 \u0432\u043e\u043f\u0440\u043e\u0441\u043e\u0432. \u0410\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0442\u0438\u043f\u043e\u0432, \u043a\u0430\u0441\u0430\u044e\u0449\u0438\u0445\u0441\u044f routing \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0435\u0449\u0435 \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043f\u043e\u043a\u0430 \u0442\u0440\u0443\u0434\u043d\u043e \u0447\u0442\u043e-\u0442\u043e \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e\u043a\u043e\u043d\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e.<\/p>\n<p>  <i>\u0427\u0442\u043e \u0441\u043c\u0443\u0449\u0430\u0435\u0442<\/i> \u2014 \u0441\u043c\u0443\u0449\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0449\u0435\u0439. \u041f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e, \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440 \u2014 \u0435\u0441\u043b\u0438 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, 50 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432, \u0442\u043e \u043a\u043e\u0434 \u043d\u0430\u0448\u0435\u0433\u043e \u043c\u043e\u0434\u0443\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0442\u0435\u0440\u044f\u0435\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445. \u0418 \u0435\u0441\u043b\u0438 \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u0438 \u0441\u0445\u0435\u043c\u044b \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043a\u0430\u043a\u0430\u044f-\u043b\u0438\u0431\u043e if-\u043b\u043e\u0433\u0438\u043a\u0430, \u0442\u043e \u043d\u0430\u0448 \u043a\u043e\u0434 \u0440\u0438\u0441\u043a\u0443\u0435\u0442 \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u0442\u044c\u0441\u044f \u0432 \u043a\u043e\u0448\u043c\u0430\u0440.<br \/>  \u0412\u0442\u043e\u0440\u043e\u0435, \u044d\u0442\u043e \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u044f\u0432\u043d\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a\u043e \u0432\u0441\u0435\u0439 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 route-\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u0442\u044c \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0434\u043b\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0432\u0441\u0435\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u0430 \u043d\u0435 \u0440\u0443\u0447\u043d\u0430\u044f \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0441\u044b\u043b\u043a\u0438 (\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c \u0434\u0435\u043b\u0430\u0442\u044c). \u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 if-\u043b\u043e\u0433\u0438\u043a\u0438 \u0434\u043b\u044f \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d\u0438\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432, \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0434\u0443\u0431\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u043b\u043e\u0433\u0438\u043a\u0443 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043d\u0430\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043b\u0438\u0448\u043d\u0435\u0433\u043e.<\/p>\n<h5>Aurelia<\/h5>\n<p>  \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u043a\u043e\u043d\u0432\u0435\u043d\u0446\u0438\u0438 \u0432 Aurelia, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c routing \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 configureRouter, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 Aurelia \u0432\u044b\u0437\u043e\u0432\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438. \u0422\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0432\u0435\u0440\u043d\u043e \u0438 \u0434\u043b\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e routing-\u0430 \u2014 \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0438\u043c\u0435\u044e\u0449\u0438\u0439 \u043c\u0435\u0442\u043e\u0434 configureRouter, \u0431\u0443\u0434\u0435\u0442 \u0444\u043e\u0440\u043c\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0445\u0435\u043c\u0443 routing-\u0430.  <\/p>\n<pre><code class=\"javascript\">export class App {     message: string = &quot;Welcome to Aurelia!&quot;;     router: any;     configureRouter(config, router) {         config.title = 'Welcome to Aurelia!';         config.map([             {                route: ['', 'component-sample'], moduleId: 'app\/component-sample\/component-sample', nav: true, title: 'Component sample'              },             {                route: 'component-sample', moduleId: 'app\/binding-sample\/binding-sample', nav: true, title: 'Binding sample'              }         ]);         this.router = router;     } } <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u043c\u044b \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c:  <\/p>\n<ol>\n<li>\u043f\u0430\u0442\u0442\u0435\u0440\u043d \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 (\u0438\u043b\u0438 \u043d\u0430\u0431\u043e\u0440 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u043e\u0432, \u043f\u0430\u0442\u0442\u0435\u0440\u043d \u0432 \u0432\u0438\u0434\u0435 \u043f\u0443\u0441\u0442\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e).<\/li>\n<li>\u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043c\u043e\u0434\u0443\u043b\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430.<\/li>\n<li>\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e title \u2014 \u043f\u0440\u0438 \u0430\u043a\u0442\u0438\u0432\u0430\u0446\u0438\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430 \u0435\u0433\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432 title \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/li>\n<li>\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e nav \u2014 \u043e\u043d\u043e \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u043b\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u043f\u043e\u043f\u0430\u0441\u0442\u044c \u0432 navigation model. \u0415\u0441\u043b\u0438 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0438\u0441\u043b\u043e, \u0442\u043e \u043e\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0437\u043d\u0430\u0447\u0430\u0442\u044c \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 navigation model.<\/li>\n<\/ol>\n<p>  \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 Aurelia \u0441\u043e\u0441\u0442\u0430\u0432\u0438\u0442 navigation model, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u0431\u0440\u0430\u0442\u044c \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044e:<\/p>\n<pre><code class=\"html\">    &lt;div id=&quot;navbar&quot; class=&quot;collapse navbar-collapse&quot;&gt;             &lt;ul class=&quot;nav navbar-nav&quot;&gt;                 &lt;li repeat.for=&quot;row of router.navigation&quot; class=&quot;${row.isActive ? 'active' : ''}&quot;&gt;                     &lt;a href.bind=&quot;row.href&quot;&gt;${row.title}&lt;\/a&gt;                 &lt;\/li&gt;             &lt;\/ul&gt;     &lt;\/div&gt; <\/code><\/pre>\n<p>  \u041f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u043c \u0448\u0430\u0433\u043e\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u044c, \u043a\u0443\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0434\u043b\u044f \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430. \u0414\u0435\u043b\u0430\u0435\u043c \u044d\u0442\u043e \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b router-view \u0432 \u0442\u043e\u043c \u0436\u0435 app.html<\/p>\n<pre><code class=\"html\">    &lt;div class=&quot;container&quot;&gt;         &lt;router-view&gt;&lt;\/router-view&gt;     &lt;\/div&gt; <\/code><\/pre>\n<p>  <i>\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e<\/i> \u2014 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438 \u0432\u043f\u043e\u043b\u043d\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u0430\u044f. \u041f\u0440\u0438\u044f\u0442\u043d\u043e, \u0447\u0442\u043e Aurelia \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u043c \u043f\u043e\u043c\u043e\u0447\u044c \u0438 \u0441\u0442\u0440\u043e\u0438\u0442 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438.<\/p>\n<p>  <i>\u0427\u0442\u043e \u0441\u043c\u0443\u0449\u0430\u0435\u0442<\/i> \u2014 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0435\u0439 \u0432 Durandal \u0443\u0431\u0440\u0430\u043b\u0438 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430. \u0421 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u044d\u0442\u043e, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e, \u0438\u0431\u043e \u043d\u0435\u0444\u0438\u0433. \u0421 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u044d\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f navigation model \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0440\u0443\u0447\u043d\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438. Navigation model \u0431\u0443\u0434\u0435\u0442 \u0431\u0435\u0441\u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0435\u0441\u043b\u0438 \u0437\u0430\u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a \u043f\u0443\u043d\u043a\u0442\u0430\u043c \u043c\u0435\u043d\u044e \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e title, \u043d\u043e \u0438, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, tooltip-\u044b.<\/p>\n<h4>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b<\/h4>\n<p>  <\/p>\n<h5>Angular 2<\/h5>\n<p>  \u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u0432 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0435\u0441\u0442\u044c \u043f\u0430\u043f\u043a\u0430 component-sample, \u0432 \u043d\u0435\u0439 \u043b\u0435\u0436\u0438\u0442 \u0432\u0441\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e. <br \/>  \u0418\u0442\u0430\u043a, \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 Angular 2 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e:<\/p>\n<ol>\n<li>\u041e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u0442\u044c \u043a \u043d\u0435\u043c\u0443 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435. \u0414\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 inputs \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0435  @Component, \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0435\u043c\u0443 \u0438\u043c\u0435\u043d\u0430 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432:<br \/> \n<pre><code class=\"javascript\">import {Component} from 'angular2\/core';  @Component({     selector: 'test-child-component',     inputs: ['inputMessage'],     template: `&lt;div class=&quot;panel panel-default&quot;&gt;                 &lt;div class=&quot;panel-heading&quot;&gt;Child component title&lt;\/div&gt;                 &lt;div class=&quot;panel-body&quot;&gt;                     Message from parent component is: {{inputMessage}}                 &lt;\/div&gt;                &lt;\/div&gt;` }) export class TestChildComponent {     inputMessage: string } <\/code><\/pre>\n<p>  <\/li>\n<li>\u0418\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 (component-sample.ts) \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0435\u0433\u043e \u0432 \u043c\u0430\u0441\u0441\u0438\u0432 directives \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u0430  @Component<\/li>\n<li>\u0412 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u043c\u0443 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0443 \u0438\u0437 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0449\u0438\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b<\/li>\n<\/ol>\n<p>  \u0412 \u0438\u0442\u043e\u0433\u0435, \u043d\u0430\u0448 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:  <\/p>\n<pre><code class=\"javascript\">import {Component} from 'angular2\/core'; import {TestChildComponent} from '.\/test-\u0441hild-\u0441omponent'; @Component({     template: `     &lt;div class=&quot;sample-header&quot;&gt;         &lt;h1&gt;{{message}}&lt;\/h1&gt;     &lt;\/div&gt;     &lt;test-child-component [inputMessage]=&quot;messageForChild&quot;&gt;&lt;\/test-child-component&gt;`,     directives: [TestChildComponent] }) export class ComponentSample  {     message: string = 'This is a component with child component sample';     messageForChild: string = 'Hello to child component!'; } <\/code><\/pre>\n<p>  <i>\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e<\/i> \u2014 \u0432 \u0446\u0435\u043b\u043e\u043c, \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u043f\u043e\u043d\u044f\u0442\u043d\u043e.<\/p>\n<p>  <i>\u0427\u0442\u043e \u0441\u043c\u0443\u0449\u0430\u0435\u0442<\/i> \u2014 \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043f\u0440\u0438\u044f\u0442\u043d\u044b\u0445 \u043f\u043b\u044e\u0448\u0435\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0432 Aurelia. \u041e\u043d\u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0438\u0436\u0435.<\/p>\n<h5>Aurelia<\/h5>\n<p>  \u0412 Aurelia \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u0434\u0432\u0443\u043c\u044f \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438: custom element \u0438 composition. <\/p>\n<p>  \u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431, \u0432 \u0446\u0435\u043b\u043e\u043c, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d Angular 2 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432 \u0438 \u0442.\u0434. \u0412 \u043a\u043e\u0434\u0435 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 \u044d\u0442\u043e\u0442 \u043f\u043e\u0434\u0445\u043e\u0434 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 test-custom-element.html.<\/p>\n<p>  \u0412\u0442\u043e\u0440\u043e\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0435\u0432 master-detail \u0438 \u0431\u043e\u043b\u0435\u0435 \u0433\u0438\u0431\u043e\u043a, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043a\u0430\u043a\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u0430\u043a\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u043a\u0430\u043a\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c. \u0414\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442 \u0432 \u0444\u0430\u0439\u043b\u0435 test-\u0441hild-\u0441omponent.ts. <\/p>\n<p>  \u0420\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u043e\u0431\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438.<\/p>\n<h6>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 1 \u2014 custom element:<\/h6>\n<p>  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 custom element \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e:  <\/p>\n<ol>\n<li>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u043e\u0440\u043e\u043c  @bindable \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0448\u0430\u0431\u043b\u043e\u043d \u043a\u0430\u043a \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b (\u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c inputs \u0432 Angular 2). \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0435\u0441\u043b\u0438 \u043d\u0430\u0448 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u0438 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d \u0438 \u0432 \u043d\u0435\u043c \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c bindable-\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043e\u0434\u043d\u043e\u0438\u043c\u0435\u043d\u043d\u043e\u0433\u043e \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Aurelia \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u00ab\u043d\u0430 \u043b\u0435\u0442\u0443\u00bb:<br \/> \n<pre><code class=\"html\">&lt;template bindable=&quot;message&quot;&gt;     &lt;div class=&quot;panel panel-default&quot;&gt;         &lt;div class=&quot;panel-heading&quot;&gt;Custom element title&lt;\/div&gt;         &lt;div class=&quot;panel-body&quot;&gt;             Message from parent component is: ${message}         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/template&gt; <\/code><\/pre>\n<p>   <\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 require, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043d\u0430 \u043d\u0443\u0436\u043d\u044b\u0439 \u043d\u0430\u043c \u043c\u043e\u0434\u0443\u043b\u044c (\u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0443 directives \u0432 Angular 2, \u043d\u043e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435) \u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043e\u043d \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f. \u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430 &lt;\u0438\u043c\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430&gt;.bind. \u0412 \u0438\u0442\u043e\u0433\u0435, \u0448\u0430\u0431\u043b\u043e\u043d \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<br \/> \n<pre><code class=\"html\">&lt;template&gt;     ...     &lt;require from=&quot;app\/component-sample\/test-custom-element.html&quot;&gt;&lt;\/require&gt;     &lt;test-custom-element message.bind=&quot;messageForCustomElement&quot;&gt;&lt;\/test-custom-element&gt; &lt;\/template&gt; <\/code><\/pre>\n<p>  <\/li>\n<\/ol>\n<p>  \u0415\u0441\u043b\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0441\u0435\u043c\u0435\u0441\u0442\u043d\u043e, \u0442\u043e \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a global resource. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0435 \u043f\u0438\u0441\u0430\u0442\u044c \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0435 &lt;require\u2026&gt;. \u041a\u0430\u043a \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e <a href=\"http:\/\/aurelia.io\/docs.html#\/aurelia\/framework\/1.0.0-beta.1.0.8\/doc\/article\/app-configuration-and-startup\">\u0437\u0434\u0435\u0441\u044c <\/a>\u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u201cMaking Resources Global\u201d<\/p>\n<p>  \u0415\u0449\u0435 \u043e\u0434\u043d\u0430 \u043f\u0440\u0438\u044f\u0442\u043d\u0430\u044f \u043e\u043f\u0446\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0435\u0441\u0442\u044c \u0432 Aurelia \u0438 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043d\u0435 \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c \u043d\u0430\u0439\u0442\u0438 \u0432 Angular \u2014 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u0415\u0441\u043b\u0438 \u0432 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 test-custom-element \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443, \u0430 \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u044d\u043b\u0435\u043c\u0435\u043d\u0442   <\/p>\n<pre><code class=\"html\">&lt;content&gt;&lt;\/content&gt; <\/code><\/pre>\n<p>  \u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u0438\u0437 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d\u0430 \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c. \u0422\u0430\u043a\u0436\u0435 \u043f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 custom elements \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443\u0436\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 <a href=\"https:\/\/github.com\/aurelia\/documentation\/blob\/master\/English\/docs.md#template-parts\">template parts<\/a> \u0438 \u043e\u0431\u044a\u044f\u0432\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439.<\/p>\n<p>  <i>\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e<\/i> \u2014 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u043b\u043e\u0433\u0438\u0447\u043d\u043e.<br \/>  <i>\u0427\u0442\u043e \u0441\u043c\u0443\u0449\u0430\u0435\u0442<\/i> \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043d\u0435 \u0432\u0441\u0435\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435.<\/p>\n<h6>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 2 \u2014 \u0421ompose:<\/h6>\n<p>  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 composition \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e:  <\/p>\n<ol>\n<li>\u0421\u043e\u0437\u0434\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 compose \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u043b\u0430\u0431\u0443\u044e \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/github.com\/aurelia\/documentation\/blob\/master\/English\/docs.md#the-screen-activation-lifecycle\">lifecycle hooks<\/a> (\u043e\u043d\u0438 \u0442\u0430\u043a\u0436\u0435 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u0438 \u0443 Angular 2, \u043d\u043e \u043f\u0440\u043e \u043d\u0438\u0445 \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0435). \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u0435\u0442\u043e\u0434 activate. \u0428\u0430\u0431\u043b\u043e\u043d \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c inline, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439:<br \/> \n<pre><code class=\"javascript\">import {inlineView} from 'aurelia-templating';  @inlineView('&lt;template&gt;&lt;h3&gt;${inputMessage}&lt;\/h3&gt;&lt;template&gt;') export class TestChildComponent {     inputMessage: string;     activate(inputMessage: string)     {         this.inputMessage = inputMessage;     } } <\/code><\/pre>\n<p>  <\/li>\n<li>\u0412 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442 compose, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440 \u043c\u043e\u0434\u0443\u043b\u044f \u0441 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c. \u0414\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u043c\u0443 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 model.bind:<br \/> \n<pre><code class=\"html\">&lt;compose model.bind=&quot;messageForChild&quot; view-model=&quot;app\/testChildComponent&quot;&gt;&lt;\/compose&gt; <\/code><\/pre>\n<p>  <\/li>\n<\/ol>\n<p>  <i>\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e<\/i> \u2014 \u043d\u0430 \u043c\u043e\u0439 \u0432\u0437\u0433\u043b\u044f\u0434 compose \u044d\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0443\u0442\u043e\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0431\u043e\u0440\u044c\u0431\u044b \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041e\u043d \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u044e \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c\u0438 \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u0430\u0432\u0430\u044f \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c.<\/p>\n<p>  <i>\u0427\u0442\u043e \u0441\u043c\u0443\u0449\u0430\u0435\u0442<\/i> \u2014 \u044f \u0434\u043e\u043b\u0433\u043e \u0440\u0430\u0437\u043c\u044b\u0448\u043b\u044f\u043b \u043d\u0430\u0434 \u044d\u0442\u0438\u043c \u043f\u0443\u043d\u043a\u0442\u043e\u043c, \u043d\u043e \u0442\u0430\u043a \u0438 \u043d\u0435 \u0441\u043c\u043e\u0433 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c. \u041c\u043d\u0435 \u043d\u0435 \u043a \u0447\u0435\u043c\u0443 \u043f\u0440\u0438\u0434\u0440\u0430\u0442\u044c\u0441\u044f.<\/p>\n<h4>Data binding<\/h4>\n<p>  <\/p>\n<h5>Angular 2<\/h5>\n<p>  \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0440\u0430\u0431\u043e\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043a\u043e\u043c\u0430\u043d\u0434\u0430 Angular \u043f\u0440\u043e\u0432\u0435\u043b\u0430 \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u043e\u0432\u043e\u0433\u043e data binding, \u044d\u0442\u043e \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u0438 \u0447\u0435\u0442\u043a\u043e\u0435 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445: to the DOM, from the DOM, both directions. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0432\u0441\u0435 \u043f\u043e \u043e\u0447\u0435\u0440\u0435\u0434\u0438.<\/p>\n<h6>To the DOM<\/h6>\n<p>  \u041e\u0434\u043d\u043e\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 binding to the DOM \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u0434\u0432\u0443\u0445 \u0444\u043e\u0440\u043c:<br \/>  string interpolation:  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;panel-body&quot;&gt;     This string is builted with {{interpolationString}} syntax &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0438 property binding:  <\/p>\n<pre><code class=\"html\">&lt;img [src]=&quot;iconUrl&quot; \/&gt; <\/code><\/pre>\n<p>  \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 string interpolation \u0442\u0435\u043a\u0441\u0442, \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0439 \u0432 \u0434\u0432\u043e\u0439\u043d\u044b\u0435 \u0443\u0433\u043b\u043e\u0432\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438, \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a expression, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d \u0438 \u0435\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043c\u0435\u0449\u0435\u043d \u0432 \u0448\u0430\u0431\u043b\u043e\u043d. \u0422\u043e \u0435\u0441\u0442\u044c \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u043d\u043e \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0430:  <\/p>\n<pre><code class=\"html\">&lt;h1&gt;2 = {{1+1}}&lt;\/h1&gt; <\/code><\/pre>\n<p>  \u041e\u0434\u043d\u0430\u043a\u043e, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u043d\u0435 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u043e\u0439 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e \u0438 \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043c\u0435\u0449\u0430\u0442\u044c \u0432 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442.<\/p>\n<p>  \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 property binding \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u043c\u0438 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0438\u0433\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u044e\u0442 template engine, \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043f\u0440\u0438\u0441\u0432\u043e\u0438\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043f\u0440\u0430\u0432\u0430. \u0412 \u0434\u0430\u043d\u043d\u043e\u0439 \u0444\u043e\u0440\u043c\u0435 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0442\u044c \u0438\u043c\u0438 \u043d\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f. \u041f\u043e\u043c\u0438\u043c\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u0435\u0441\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043d\u0430\u0431\u043e\u0440 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u2014 routerLink, textContent \u0438 \u0442.\u0434.<\/p>\n<p>  <i>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435 \u2014 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u044b \u0432 Angular 2, \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435, \u043f\u043e \u0441\u0443\u0442\u0438, \u043d\u0435 \u043d\u0430 HTML, \u0430 \u043d\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0435 Angular 2. \u0414\u043b\u044f \u0440\u0430\u0437\u0431\u043e\u0440\u0430 \u0448\u0430\u0431\u043b\u043e\u043d\u0430 \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u0440\u0441\u0435\u0440. \u0418, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u043f\u0438\u0448\u0435\u0442\u0435, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443:  <\/p>\n<pre><code class=\"html\">&lt;input value=&quot;some text&quot; \/&gt; <\/code><\/pre>\n<p>  \u0442\u043e \u044d\u0442\u043e \u043d\u0435 \u00ab\u0447\u0438\u0441\u0442\u044b\u0439\u00bb HTML, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0443 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0445\u0430\u0440, \u0440\u0430\u0441\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0449\u0438\u0439\u0441\u044f \u0432 \u043f\u0440\u0438\u0441\u0432\u043e\u0435\u043d\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b:  <\/p>\n<pre><code class=\"html\">&lt;input [value]=&quot;'some text'&quot; \/&gt; <\/code><\/pre>\n<p>  <\/i><\/p>\n<p>  \u0412\u0430\u0436\u043d\u044b\u043c \u043c\u043e\u043c\u0435\u043d\u0442\u043e\u043c \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0442\u043e, \u0447\u0442\u043e \u0434\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c, \u0438\u043c\u0435\u043d\u0430\u043c \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438 \u0441\u0442\u0438\u043b\u044f\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u0432 class, style, \u0438 attr. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u0442\u0430\u043a:  <\/p>\n<pre><code class=\"html\">&lt;img [style.width]=&quot;iconWidth&quot; [style.height]=&quot;iconHeight&quot; [src]=&quot;iconUrl&quot; \/&gt; <\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0441\u0442\u0438\u043b\u0435\u0439 \u0438\u043b\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u043e\u0432 \u0438\u043c\u0435\u044e\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b ngClass \u0438 ngStyle. \u041a\u0430\u043a \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u043d\u0438 \u043e\u0436\u0438\u0434\u0430\u044e\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u043a\u0430\u0436\u0434\u043e\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0431\u0443\u0434\u0435\u0442 \u043e\u0446\u0435\u043d\u0435\u043d\u043e \u043a\u0430\u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e \u0441\u0442\u0438\u043b\u044f \u0438\u043b\u0438 \u0438\u043c\u044f \u043a\u043b\u0430\u0441\u0441\u0430.<\/p>\n<p>  \u0421\u043c\u044b\u0441\u043b \u043e\u0442\u0434\u0435\u043b\u0435\u043d\u0438\u044f property binding \u043e\u0442 attribute binding \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e html \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 DOM-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438\u043c\u0435\u044e\u0442 \u0447\u0435\u0442\u043a\u043e\u0435 \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0435. \u0410\u0442\u0440\u0438\u0431\u0443\u0442\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0432 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u044b \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Angular 2. Attribute binding \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u043d\u0430 \u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 html \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u043d\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0433\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 DOM-element.<\/p>\n<h6>From the DOM<\/h6>\n<p>  \u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u043e, \u044d\u0442\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439:  <\/p>\n<pre><code class=\"html\">&lt;input type=&quot;button&quot; (click)=&quot;onClicked()&quot; value=&quot;Click me!&quot; \/&gt; <\/code><\/pre>\n<p>  \u041a\u043b\u044e\u0447\u0435\u0432\u044b\u043c\u0438 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043a\u0440\u0443\u0433\u043b\u044b\u0435 \u0441\u043a\u043e\u0431\u043a\u0438, \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f (\u0431\u0435\u0437 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u0430 \u201con\u201d). \u0412\u043d\u0443\u0442\u0440\u0438 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 binding-\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f $event, \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0449\u0430\u044f \u0441\u043e\u0431\u043e\u0439, \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e, DOM event. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043d\u0435 \u0434\u0435\u043a\u043b\u0430\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0445 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u043f\u0438\u0441\u0430\u0442\u044c inline \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041e\u0434\u043d\u0430\u043a\u043e, \u043e\u043f\u044f\u0442\u044c \u0436\u0435, \u0443\u0432\u043b\u0435\u043a\u0430\u0442\u044c\u0441\u044f \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0442\u044f\u0436\u0435\u043b\u043e\u0432\u0435\u0441\u043d\u044b\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442.<\/p>\n<h6>Both directions<\/h6>\n<p>  \u0414\u0432\u0443\u0441\u0442\u043e\u0440\u043e\u043d\u043d\u044f\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u043f\u043e \u0441\u0443\u0442\u0438, \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0430 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u0438 from the DOM \u0438 to the DOM:  <\/p>\n<pre><code class=\"html\">&lt;input [value]=&quot;twoWayBindedProperty&quot; (input)=&quot;twoWayBindedProperty=$event.target.value&quot; \/&gt; <\/code><\/pre>\n<p>  \u041e\u0434\u043d\u0430\u043a\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u044d\u0442\u043e \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u0442\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439, \u043a\u043e\u043c\u0430\u043d\u0434\u0430 Angular \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u0443\u044e \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0443 ngModel, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0432\u043f\u043e\u043b\u043d\u0435 \u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u0445\u043e\u0442\u044c \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0436\u0443\u0442\u043a\u043e, \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u044f\u0435\u0442 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 from the DOM \u0438 to the DOM \u0432 \u043e\u0434\u043d\u0443 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e:  <\/p>\n<pre><code class=\"html\">&lt;input [(ngModel)]=&quot;twoWayBindedProperty&quot; \/&gt; <\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043b\u043e\u0436\u0438\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u043e \u0434\u0435\u043b\u043e \u043d\u0430 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0447\u0430\u0441\u0442\u0438, \u0442\u043e\u0433\u0434\u0430 \u0434\u043b\u044f \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f from the DOM \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u0430 ngModelChange:  <\/p>\n<pre><code class=\"html\">&lt;input   [ngModel]=&quot;twoWayBindedProperty&quot; (ngModelChange)=&quot;twoWayBindedProperty=$event&quot;&gt; <\/code><\/pre>\n<p>  <i>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u0435\u0441\u043b\u0438 \u0432\u0430\u0441 \u0441\u043c\u0443\u0449\u0430\u0435\u0442 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0441 [], () b [()] \u0438 \u0432\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u043a\u0430\u043d\u043e\u043d\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u0441\u0442\u0430\u0432\u043a\u0438 bind-,on- \u0438 bindon- \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/i>  <\/p>\n<pre><code class=\"html\">&lt;img bind-src=&quot;iconUrl&quot;&gt; <\/code><\/pre>\n<p>  <i>\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e<\/i> \u2014 \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u043c\u044f\u0433\u043a\u043e \u0433\u043e\u0432\u043e\u0440\u044f, \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u044b\u0439 \u0438 \u0443\u0436\u0435 \u043c\u043d\u043e\u0433\u043e \u0431\u044b\u043b\u043e \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0432\u044b\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u043d\u0438\u0439 \u0432 \u0435\u0433\u043e \u0430\u0434\u0440\u0435\u0441, \u043b\u0438\u0447\u043d\u043e \u043c\u043d\u0435 \u043e\u043d \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f. \u0412\u043e-\u043f\u0435\u0440\u0432\u044b\u0445, \u043e\u043d \u043e\u0447\u0435\u043d\u044c \u0437\u0430\u043c\u0435\u0442\u043d\u044b\u0439. \u0412\u043e-\u0432\u0442\u043e\u0440\u044b\u0445, \u0435\u0433\u043e \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u044c. \u0412-\u0442\u0440\u0435\u0442\u044c\u0438\u0445, \u043e\u043d \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0440\u0443\u0436\u0438\u0442\u0441\u044f \u0441 intellisense \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441 \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u0436\u0435 \u0441\u0438\u043c\u0432\u043e\u043b\u0430 \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u0447\u0442\u043e \u044d\u0442\u043e \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f Angular 2 \u0438 \u043c\u044b \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432 \u0438 \u043d\u0435 \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u0442\u0438 ngClass, ngModel \u0438 \u0442.\u0434. \u0412-\u0447\u0435\u0442\u0432\u0435\u0440\u0442\u044b\u0445, \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043d\u0430 \u043a\u0430\u043d\u043e\u043d\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0444\u043e\u0440\u043c\u0443, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u0441\u043e\u0432\u0441\u0435\u043c \u0443\u0436 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e \u043e\u0442 \u0432\u0441\u0435\u0445 \u044d\u0442\u0438\u0445 \u0441\u043a\u043e\u0431\u043e\u0447\u0435\u043a.<\/p>\n<p>  <i>\u0427\u0442\u043e \u0441\u043c\u0443\u0449\u0430\u0435\u0442<\/i> \u2014 \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0432\u0435\u0441 Aurelia \u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 one-time \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0438 event delegation. \u041d\u043e \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u044b\u043c\u0438 \u044d\u0442\u0438 \u0432\u0435\u0449\u0438, \u0432 \u043e\u0431\u0449\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043d\u0435 \u043d\u0430\u0437\u043e\u0432\u0435\u0448\u044c. <\/p>\n<h5>Aurelia<\/h5>\n<p>  \u0412 Aurelia data binding \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0435\u043d \u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0442\u043e\u043d\u043a\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u0432\u0438\u0436\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445. \u0424\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a \u0434\u0435\u043b\u0430\u0435\u0442 \u043d\u0435\u043a\u0438\u0435 \u0440\u0430\u0437\u0443\u043c\u043d\u044b\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043d\u043e \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0443 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0435\u0448\u0430\u0442\u044c \u0441\u0430\u043c\u043e\u043c\u0443. \u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u0447\u0435\u0442\u0435 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b:<\/p>\n<h6>String Interpolation<\/h6>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;panel-body&quot;&gt;     This string is builted with ${interpolationString} syntax &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u0435\u043d string interpolation \u0432 Angular 2, \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 (${} \u0432\u043c\u0435\u0441\u0442\u043e {{}}):<\/p>\n<h6>Property binding<\/h6>\n<p>  C\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c &lt;\u0438\u043c\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430&gt;.&lt;\u0442\u0438\u043f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438&gt; = \u201c\u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u201d. \u0422\u0438\u043f\u044b \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0435\u0441\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435:  <\/p>\n<ul>\n<li>.bind \u2014 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u0433\u0434\u0435 \u043e\u043d \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d. \u0414\u043b\u044f input-\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d two-way binding, \u043d\u0430 \u0432\u0441\u0435 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043b\u0443\u0447\u0430\u0438 one-way<\/li>\n<li>.one-way \u2014 \u0430\u043d\u0430\u043b\u043e\u0433 to the DOM \u0432 Angular<\/li>\n<li>.two-way \u2014 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0434\u0432\u0443\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u0431\u0438\u043d\u0434\u0438\u043d\u0433<\/li>\n<li>.one-time \u2014 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0434\u043b\u044f \u043e\u0434\u043d\u043e\u0440\u0430\u0437\u043e\u0432\u043e\u0439 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u0431\u0435\u0437 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0433\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439. \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0442\u0430\u043c, \u0433\u0434\u0435 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u0422\u0438\u043f\u0438\u0447\u043d\u044b\u0439 \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u2014 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 read-only.<\/li>\n<\/ul>\n<p>  \u041d\u0430\u0433\u043b\u044f\u0434\u043d\u043e, \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f property binding, \u0432 \u043e\u0431\u0449\u0435\u043c \u0432\u0438\u0434\u0435, \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439:  <\/p>\n<pre><code class=\"html\">&lt;input value.bind=&quot;iconUrl&quot; \/&gt; <\/code><\/pre>\n<p>  \u041f\u043e\u043c\u0438\u043c\u043e \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0441\u0432\u043e\u0439\u0441\u0442\u0432, \u043a\u0430\u043a \u0438 \u0432 Angular 2, \u0438\u043c\u0435\u044e\u0442\u0441\u044f custom \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u044b innerHTML, textContent, style. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u044b \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u2014 \u0441 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435\u043c .bind \u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430, \u0438\u043b\u0438 \u0431\u0435\u0437 .bind \u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c string interpolation:  <\/p>\n<pre><code class=\"html\">&lt;div innerhtml.bind=&quot;htmlProperty&quot;&gt;&lt;\/div&gt; &lt;div innerhtml=&quot;${htmlProperty}&quot;&gt;&lt;\/div&gt; <\/code><\/pre>\n<h6>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439<\/h6>\n<p>  \u0414\u043b\u044f \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0432\u0430 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430:  <\/p>\n<ul>\n<li>.trigger \u2014 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a, \u043f\u0440\u0438\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0439 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043a \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443<\/li>\n<li>.delegate \u2014 \u0441\u043e\u0437\u0434\u0430\u0435\u0442 \u043e\u0434\u0438\u043d \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043f\u0440\u0438\u0441\u043e\u0435\u0434\u0438\u043d\u044f\u044f \u0435\u0433\u043e \u043a \u043e\u0431\u044a\u0435\u043a\u0442\u0443 document (\u0438\u043b\u0438 \u043a \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0439 \u0433\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439 shadow DOM) \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0433\u043e \u0442\u0438\u043f\u0430, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f \u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u043e\u0431\u044a\u044f\u0432\u0438\u0432\u0448\u0435\u043c\u0443 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a. \u041f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0437\u0430 \u0441\u0447\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043c\u0435\u043d\u044c\u0448\u0435\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u041e\u0434\u043d\u0430\u043a\u043e, \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0445 bubbling (\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u0440\u0430\u0437\u043d\u0438\u0446\u0443, \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u0434\u0435\u043c\u043e-\u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0432 \u0444\u0430\u0439\u043b\u0435 binding-sample.html).<\/li>\n<\/ul>\n<p>  \u0414\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044e \u0432\u043d\u0443\u0442\u0440\u0438 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430, \u043a\u0430\u043a \u0438 \u0432 Angular 2, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f $event.<\/p>\n<p>  <i>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435: \u0432 \u0441\u0432\u043e\u0435\u043c \u0432\u044b\u0441\u0442\u0443\u043f\u043b\u0435\u043d\u0438\u0438 \u043d\u0430 <a href=\"https:\/\/vimeo.com\/153090562?utm_content=buffer79560&amp;utm_medium=social&amp;utm_source=twitter.com&amp;utm_campaign=buffer\">NDC London<\/a> \u042d\u0439\u0437\u0435\u043d\u0431\u0435\u0440\u0433 \u0433\u043e\u0432\u043e\u0440\u0438\u0442 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 Aurelia \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432 \u0438 \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 data binding \u0432 Aurelia \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441\u0430 Angular 2. \u041e\u0434\u043d\u0430\u043a\u043e, \u043d\u0430\u0439\u0442\u0438 \u044d\u0442\u043e\u0442 \u043f\u043b\u0430\u0433\u0438\u043d \u0433\u0434\u0435-\u043b\u0438\u0431\u043e \u043c\u043d\u0435 \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c.<br \/>  <\/i><br \/>  <i>\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e<\/i> \u2014 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0442\u043e\u043d\u043a\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430. \u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u0438 one time. \u041f\u043e\u043b\u043d\u0430\u044f \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0430\u043c\u0438 HTML.<\/p>\n<p>  <i>\u0427\u0442\u043e \u0441\u043c\u0443\u0449\u0430\u0435\u0442<\/i> \u2014 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0432\u043d\u044b\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 one-time, one-way \u0438 two-way. \u0418 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 intellisense \u0431\u0443\u0434\u0435\u0442 \u043d\u0435 \u0442\u0430\u043a\u043e\u0439 \u043a\u0440\u0443\u0442\u043e\u0439, \u043a\u0430\u043a \u0432 Angular.<\/p>\n<h4>\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u0432 data binding<\/h4>\n<p>  <\/p>\n<h5>Angular<\/h5>\n<p>  <\/p>\n<h6>\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 (for, if, switch)<\/h6>\n<p>  \u0412\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0435\u0442\u0430\u043b\u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u043c, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443, \u043f\u043e\u043b\u0430\u0433\u0430\u044e, \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u0443\u0436\u0435 \u043d\u0430\u0447\u0430\u043b \u0443\u0441\u0442\u0430\u0432\u0430\u0442\u044c. \u041f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0431\u0449\u0438\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;panel-body&quot;&gt;     Select something:     &lt;select [(ngModel)]=&quot;selectedClass&quot;&gt;         &lt;option *ngFor=&quot;#alertClass of alertClasses&quot; [value]=&quot;alertClass&quot;&gt;{{alertClass}}&lt;\/option&gt;     &lt;\/select&gt; &lt;\/div&gt; &lt;div class=&quot;panel-body&quot;&gt;     &lt;div [ngSwitch]=&quot;selectedClass&quot;&gt;         &lt;template [ngSwitchWhen]=&quot;'success'&quot;&gt;             &lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;You will be successfull if you learn Angular&lt;\/div&gt;         &lt;\/template&gt;                 ...         &lt;template ngSwitchDefault&gt;You must choose option&lt;\/template&gt;     &lt;\/div&gt;     &lt;div *ngIf=&quot;selectedClass=='success'&quot;&gt;         &lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;Extra message with *ngIf binding&lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0412 \u0446\u0435\u043b\u043e\u043c \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e. \u041d\u0430 \u0447\u0442\u043e \u0441\u0442\u043e\u0438\u0442 \u043e\u0431\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u044d\u0442\u043e \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 ngFor \u0438 ngIf \u2014 \u0434\u0438\u0440\u0435\u043a\u0442\u0438\u0432\u044b \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u044f\u0435\u0442 \u0441\u0438\u043c\u0432\u043e\u043b *. \u041a\u0430\u043a \u043e\u0431\u044a\u044f\u0441\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438, \u044d\u0442\u043e \u0441\u0432\u043e\u0435\u0433\u043e \u0440\u043e\u0434\u0430 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0445\u0430\u0440, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043e\u0431\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 template.<\/p>\n<h6>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445<\/h6>\n<p>  \u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0434\u0430\u043d\u043d\u044b\u043c \u0438\u0437 \u0440\u0430\u0437\u043d\u044b\u0445 \u043e\u0431\u043b\u0430\u0441\u0442\u0435\u0439 html-\u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u041f\u0440\u043e\u0441\u0442\u0435\u0439\u0448\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043c\u044b \u0443\u0436\u0435 \u0443\u0432\u0438\u0434\u0435\u043b\u0438 \u0432 \u0446\u0438\u043a\u043b\u0435 ngFor:  <\/p>\n<pre><code class=\"html\">&lt;option *ngFor=&quot;#alertClass of alertClasses&quot; [value]=&quot;alertClass&quot;&gt;{{alertClass}}&lt;\/option&gt; <\/code><\/pre>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043f\u0435\u0446\u0441\u0438\u043c\u0432\u043e\u043b\u0430 # \u043c\u044b \u0443\u043a\u0430\u0437\u0430\u043b\u0438 Angular, \u0447\u0442\u043e \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u043a \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0431\u0443\u0434\u0435\u043c \u043e\u0431\u0440\u0430\u0449\u0430\u0442\u044c\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 \u0448\u0430\u0431\u043b\u043e\u043d\u0430. \u0422\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0443\u044e \u0438\u043d\u0434\u0435\u043a\u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043c\u0430\u0441\u0441\u0438\u0432\u0430:  <\/p>\n<pre><code class=\"html\">&lt;option *ngFor=&quot;#alertClass of alertClasses, #index=index&quot; [value]=&quot;alertClass&quot;&gt;{{index}} {{alertClass}}&lt;\/option&gt; <\/code><\/pre>\n<p>  \u0415\u0449\u0435 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 # (\u0438\u043b\u0438 \u043a\u0430\u043d\u043e\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b \u201cval-\u201d) \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0442\u044c \u0432\u043d\u0435 \u0446\u0438\u043a\u043b\u0430 ngFor. \u0412 \u0442\u0430\u043a\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430 html \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0431\u044b\u043b\u0430 \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0430. \u042d\u0442\u0443 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439. \u041d\u043e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435 \u0442\u0430\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442, \u0442\u043e \u0435\u0441\u0442\u044c watch \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f:  <\/p>\n<pre><code class=\"html\">&lt;input #i placeholder=&quot;Type something&quot;&gt; &lt;input type=&quot;button&quot; class=&quot;btn btn-success&quot; (click)=&quot;displayTextboxValue(i.value)&quot; value=&quot;And click&quot; \/&gt; &lt;br\/&gt; But templating doesn't work with it - {{i.value}} <\/code><\/pre>\n<p>  <\/p>\n<h5>Aurelia<\/h5>\n<p>  <\/p>\n<h6>\u0423\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 (for, if, show)<\/h6>\n<p>  \u041d\u0430\u0447\u0430\u0442\u044c \u0441\u0442\u043e\u0438\u0442 \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432 Aurelia switch \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d (\u043f\u043e \u043a\u0440\u0430\u0439\u043d\u0435\u0439 \u043c\u0435\u0440\u0435 \u043f\u043e\u043a\u0430). \u0422\u0430\u043a\u0436\u0435, \u0441\u0442\u043e\u0438\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 \u0442\u0435\u0440\u043c\u0438\u043d\u043e\u043b\u043e\u0433\u0438\u0438 Aurelia \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0435 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438 \u043e\u0442\u043d\u043e\u0441\u044f\u0442\u0441\u044f \u043d\u0435 \u043a data binding, \u0430 \u043a HTML extensions, \u043a\u0430\u043a \u0438 \u0432\u0438\u0434\u0435\u043d\u043d\u044b\u0439 \u043d\u0430\u043c\u0438 \u0440\u0430\u043d\u0435\u0435 <a href=\"https:\/\/github.com\/aurelia\/documentation\/blob\/master\/English\/docs.md#compose\">compose<\/a>. <\/p>\n<p>  \u0418\u0442\u043e\u0433\u043e, \u0438\u0437 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0439 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c repeat, if \u0438 \u043f\u0440\u0438\u0442\u044f\u043d\u0443\u0442\u044b\u0439 \u0441\u044e\u0434\u0430 \u0436\u0435 \u0437\u0430 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044e show:  <\/p>\n<pre><code class=\"html\">&lt;div class=&quot;panel-body&quot;&gt;     Select something:     &lt;select value.bind=&quot;selectedClass&quot;&gt;         &lt;option repeat.for=&quot;alertClass of alertClasses&quot; value.bind=&quot;alertClass&quot;&gt;${alertClass}&lt;\/option&gt;     &lt;\/select&gt; &lt;\/div&gt; &lt;div class=&quot;panel-body&quot;&gt;     &lt;div if.bind=&quot;selectedClass=='success'&quot; class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;You will be successfull if you learn Aurelia&lt;\/div&gt;     ...     &lt;div show.bind=&quot;selectedClass=='success'&quot;&gt;         &lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;Extra message with show extension&lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043e\u0442\u043c\u0435\u0447\u0443, \u0447\u0442\u043e \u043f\u0440\u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0432\u044b\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432\u043d\u0443\u0442\u0440\u0438 repeat \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435:  <\/p>\n<ul>\n<li>$index \u2014 \u0438\u043d\u0434\u0435\u043a\u0441 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435<\/li>\n<li>$first \u2014 true, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435<\/li>\n<li>$last \u2014 true, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435<\/li>\n<li>$even \u2014 true, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0447\u0435\u0442\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435<\/li>\n<li>$odd \u2014 true, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435\u0447\u0435\u0442\u043d\u044b\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435<\/li>\n<\/ul>\n<h6>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445<\/h6>\n<p>  \u0421\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 repeat \u043c\u044b \u0443\u0436\u0435 \u0443\u0432\u0438\u0434\u0435\u043b\u0438 \u0432\u044b\u0448\u0435. \u0414\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0441 Angular 2 \u043e\u0441\u0442\u0430\u043b\u043e\u0441\u044c \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0438\u0435 \u043d\u0430 HTML \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 ref. \u0421\u043e\u0437\u0434\u0430\u043d\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u0441\u043e\u0431\u044b\u0442\u0438\u0439, \u0442\u0430\u043a \u0438 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435, \u0442\u043e \u0435\u0441\u0442\u044c watch \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f:<\/p>\n<pre><code class=\"html\">&lt;div class=&quot;panel-body&quot;&gt;     &lt;input ref=&quot;i&quot; placeholder=&quot;Type something&quot;&gt;     &lt;input type=&quot;button&quot; class=&quot;btn btn-success&quot; click.delegate=&quot;displayTextboxValue(i.value)&quot; value=&quot;And click&quot; \/&gt;     &lt;br\/&gt; And templating works with it - ${i.value} &lt;\/div&gt; <\/code><\/pre>\n<p>  <i>\u0427\u0442\u043e \u0441\u043c\u0443\u0449\u0430\u0435\u0442<\/i> \u2014 \u0432\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0447\u0438\u0442\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0433 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0432 \u0447\u0430\u0441\u0442\u0438 Angular 2 \u043d\u0435 \u0431\u044b\u043b\u043e \u0437\u0430\u043c\u0435\u0442\u043e\u043a \u00ab\u0427\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u043e \u2014 \u0427\u0442\u043e \u0441\u043c\u0443\u0449\u0430\u0435\u0442\u00bb. \u042f \u0440\u0435\u0448\u0438\u043b \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0440\u0430\u0437\u0434\u0435\u043b \u0438 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u043e \u043f\u043e\u0432\u043e\u0434\u0443 \u043e\u0431\u043e\u0438\u0445, \u0438\u0431\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0443 \u043d\u0438\u0445 \u043e\u0434\u043d\u0430. \u042d\u0442\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0430\u0445 \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445, \u0434\u0430\u043b\u0435\u043a\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0431\u0430 \u0431\u0440\u043e\u0441\u0430\u044e\u0442 \u043e\u0448\u0438\u0431\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e \u0438\u043c\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0441 if \u0434\u043b\u044f \u043e\u0431\u043e\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u2014 \u043e\u0431\u0430 \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0442 \u0432\u0442\u0438\u0445\u0443\u0448\u043a\u0443 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c. <br \/>  \u0410 \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u044b \u043e\u0441\u0442\u0430\u0435\u043c\u0441\u044f \u043d\u0430\u0435\u0434\u0438\u043d\u0435 \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u043e\u0448\u0438\u0431\u043a\u0430\u043c\u0438 \u0438 \u043e\u043f\u0435\u0447\u0430\u0442\u043a\u0430\u043c\u0438.<\/p>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u043c \u0432\u0441\u0435. \u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0434\u043e\u0447\u0438\u0442\u0430\u0432\u0448\u0438\u043c \ud83d\ude42               <\/p>\n<div class=\"clear\"><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habrahabr.ru\/post\/276649\/\"> https:\/\/habrahabr.ru\/post\/276649\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>       <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/files\/f0a\/f30\/342\/f0af3034266844bd88f43b125db328b2.jpg\" alt=\"image\"\/><\/p>\n<p>  \u041d\u0435 \u0442\u0430\u043a \u0434\u0430\u0432\u043d\u043e \u0432 \u043c\u0438\u0440\u0435 web-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u0440\u043e\u0438\u0437\u043e\u0448\u043b\u043e \u0432\u0430\u0436\u043d\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u2014 \u0432\u044b\u0448\u043b\u0430 \u0431\u0435\u0442\u0430 <a href=\"http:\/\/angularjs.blogspot.ru\/2015\/12\/angular-2-beta.html\">Angular 2<\/a>. \u0418 \u0443\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u043e\u0441\u043b\u0435 \u0440\u0435\u043b\u0438\u0437\u0430.<\/p>\n<p>  \u041d\u043e \u043e\u0446\u0435\u043d\u043a\u0430 \u0441\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435, \u0432 \u0432\u0430\u043a\u0443\u0443\u043c\u0435, \u043d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442 \u0432\u044b\u0431\u043e\u0440 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u0438\u043a\u0438 \u043f\u043e \u0440\u0435\u043a\u043b\u0430\u043c\u043d\u044b\u043c \u0431\u0443\u043a\u043b\u0435\u0442\u0430\u043c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u0412\u0441\u0435 \u0444\u0438\u0448\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0441\u0442\u044c \u0432 \u0433\u0430\u0434\u0436\u0435\u0442\u0435, \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b. \u0410 \u0432\u0441\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442 \u2014 \u043d\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b \u0438 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e \u0438\u0445 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u0430\u0436\u0435 \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435 \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0442\u044c \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u044f \u0441 \u0447\u0435\u043c-\u0442\u043e \u0435\u0449\u0435.<\/p>\n<p>  \u0422\u0430\u043a \u0438 \u0440\u043e\u0434\u0438\u043b\u0430\u0441\u044c \u043c\u044b\u0441\u043b\u044c \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c Angular 2 \u0441 \u043d\u043e\u0432\u044b\u043c, \u043d\u043e \u0432\u0435\u0441\u044c\u043c\u0430 \u0430\u043c\u0431\u0438\u0446\u0438\u043e\u0437\u043d\u044b\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u043e\u043c <a href=\"http:\/\/blog.durandal.io\/2015\/11\/16\/aurelia-beta-week-day-1-the-beta-is-here\/\">Aurelia<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a \u0436\u0435 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0432\u044b\u0448\u0435\u043b \u0432 \u0431\u0435\u0442\u0443. \u0410 \u0437\u0430\u043e\u0434\u043d\u043e \u043f\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u043a\u043e\u043f\u0438\u043b\u043a\u0443 \u0425\u0430\u0431\u0440\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0435\u0439 \u043e\u0431 \u044d\u0442\u043e\u043c \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0435, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043f\u043e\u043a\u0430 \u0435\u0435 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0431 Angular 2.  <\/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-273653","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/273653","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=273653"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/273653\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=273653"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=273653"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=273653"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}