{"id":101836,"date":"2025-03-16T22:36:44","date_gmt":"2025-03-16T19:06:44","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/"},"modified":"2025-03-16T22:36:44","modified_gmt":"2025-03-16T19:06:44","slug":"%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/","title":{"rendered":"\u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc JS \u0631\u0627 \u0628\u0627 \u0645\u0646 \u0628\u06cc\u0627\u0645\u0648\u0632\u06cc\u062f: Angular &#8211; \u0633\u0641\u0631 \u06cc\u06a9 \u0645\u0628\u062a\u062f\u06cc"},"content":{"rendered":"<div data-article-id=\"2336214\" id=\"article-body\">\n<p>\u0633\u0644\u0627\u0645 \u060c \u0639\u0644\u0627\u0642\u0647 \u0645\u0646\u062f\u0627\u0646 \u0628\u0647 \u06a9\u062f \u0647\u0645\u06a9\u0627\u0631! \u0628\u0647 \u062f\u0648\u0645\u06cc\u0646 \u0642\u0633\u0645\u062a \u0627\u0632 \u0622\u0646\u0686\u0647 \u0645\u0646 \u0645\u06cc \u06af\u0648\u06cc\u0645 \u0633\u0631\u06cc\u0627\u0644 &#8220;\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc JS \u0628\u0627 \u0645\u0646&#8221; \u0645\u06cc \u0646\u0627\u0645\u0645. \u0645\u0646 \u06a9\u0627\u0645\u0644\u0627\u064b \u0647\u06cc\u062c\u0627\u0646 \u0632\u062f\u0647 \u0627\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 \u0634\u0645\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631\u062f\u0645 \u060c \u0632\u06cc\u0631\u0627 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0622\u0646 \u0631\u0648\u0628\u0631\u0648 \u0634\u0648\u06cc\u0645 \u060c \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0631\u0639\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0627\u0634\u0646\u062f &#8211; \u0627\u0645\u0627 \u0648\u0642\u062a\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 \u0647\u0645 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u06cc\u0645 \u062e\u06cc\u0644\u06cc \u0628\u0647\u062a\u0631 \u0627\u0633\u062a!<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D8%B3%D9%81%D8%B1_%DA%86%D8%A7%D8%B1%DA%86%D9%88%D8%A8_%D8%A2%D8%BA%D8%A7%D8%B2_%D9%85%DB%8C_%D8%B4%D9%88%D8%AF\" >\u0633\u0641\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u0622\u063a\u0627\u0632 \u0645\u06cc \u0634\u0648\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%DA%86%D8%B1%D8%A7_%D8%AF%D8%B1_%D8%B3%D8%A7%D9%84_2025_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C%D8%9F\" >\u0686\u0631\u0627 \u062f\u0631 \u0633\u0627\u0644 2025 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc\u061f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D8%A7%D9%88%D9%84%DB%8C%D9%86_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0627\u0648\u0644\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7%DB%8C\" >\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_nodejs_%D9%88_npm_%D8%B1%D8%A7_%D9%86%D8%B5%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 1: node.js \u0648 npm \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_CLI_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C_%D8%B1%D8%A7_%D9%86%D8%B5%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 2: CLI \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%A7%D9%88%D9%84%DB%8C%D9%86_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 3: \u0627\u0648\u0644\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%A7%D8%AC%D8%B1%D8%A7_%DA%A9%D9%86%DB%8C%D8%AF\" >\u0645\u0631\u062d\u0644\u0647 4: \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C\" >\u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%B0%D9%87%D9%86%DB%8C_%D8%AA%D9%81%DA%A9%D8%B1_%D9%85%D8%A8%D8%AA%D9%86%DB%8C_%D8%A8%D8%B1_%D9%85%D8%A4%D9%84%D9%81%D9%87\" >\u062a\u063a\u06cc\u06cc\u0631 \u0630\u0647\u0646\u06cc: \u062a\u0641\u06a9\u0631 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0645\u0624\u0644\u0641\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D8%A7%D8%AA%D8%B5%D8%A7%D9%84_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D8%AF%D9%88_%D8%B7%D8%B1%D9%81%D9%87_%D8%AC%D8%A7%D8%AF%D9%88_%D8%B4%D8%B1%D9%88%D8%B9_%D9%85%DB%8C_%D8%B4%D9%88%D8%AF\" >\u0627\u062a\u0635\u0627\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062f\u0648 \u0637\u0631\u0641\u0647: \u062c\u0627\u062f\u0648 \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D8%B3%D8%A7%D8%AE%D8%AA_%D8%A7%D9%88%D9%84%DB%8C%D9%86_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%85%D8%A7_%DB%8C%DA%A9_%D9%84%DB%8C%D8%B3%D8%AA_%DA%A9%D8%A7%D8%B1\" >\u0633\u0627\u062e\u062a \u0627\u0648\u0644\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0627: \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#Angular_vs_jQuery_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%B0%D9%87%D9%86%DB%8C\" >Angular vs jQuery: \u062a\u063a\u06cc\u06cc\u0631 \u0630\u0647\u0646\u06cc<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D8%B1%D9%88%DB%8C%DA%A9%D8%B1%D8%AF_jQuery\" >\u0631\u0648\u06cc\u06a9\u0631\u062f jQuery:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D8%B1%D9%88%DB%8C%DA%A9%D8%B1%D8%AF_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C\" >\u0631\u0648\u06cc\u06a9\u0631\u062f \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc:<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D9%84%D8%B9%D9%85%D9%84_%D9%87%D8%A7_%D8%A7%D8%A8%D8%B1%D9%82%D8%AF%D8%B1%D8%AA_%D9%87%D8%A7%DB%8C_Angular\" >\u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0647\u0627: \u0627\u0628\u0631\u0642\u062f\u0631\u062a \u0647\u0627\u06cc Angular<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/nabfollower.com\/blog\/%da%86%d8%a7%d8%b1%da%86%d9%88%d8%a8-%d9%87%d8%a7%db%8c-js-%d8%b1%d8%a7-%d8%a8%d8%a7-%d9%85%d9%86-%d8%a8%db%8c%d8%a7%d9%85%d9%88%d8%b2%db%8c%d8%af-angular-%d8%b3%d9%81%d8%b1-%db%8c%da%a9-%d9%85\/#%D8%AE%D8%AF%D9%85%D8%A7%D8%AA_%D8%A8%D9%87_%D8%A7%D8%B4%D8%AA%D8%B1%D8%A7%DA%A9_%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7_%D8%A8%DB%8C%D9%86_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%87%D8%A7\" >\u062e\u062f\u0645\u0627\u062a: \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D9%81%D8%B1_%DA%86%D8%A7%D8%B1%DA%86%D9%88%D8%A8_%D8%A2%D8%BA%D8%A7%D8%B2_%D9%85%DB%8C_%D8%B4%D9%88%D8%AF\"><\/span>\n<p>  \u0633\u0641\u0631 \u0686\u0627\u0631\u0686\u0648\u0628 \u0622\u063a\u0627\u0632 \u0645\u06cc \u0634\u0648\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0646 \u0628\u0627\u06cc\u062f \u0627\u0639\u062a\u0631\u0627\u0641 \u06a9\u0646\u0645 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u0628\u0627 JavaScript \u0634\u0631\u0648\u0639 \u0628\u0647 \u06a9\u0627\u0631 \u06a9\u0631\u062f\u0645 \u060c API DOM \u0628\u0648\u0645\u06cc \u0631\u0627 \u0646\u0627\u0627\u0645\u06cc\u062f \u06a9\u0646\u0646\u062f\u0647 \u062f\u06cc\u062f\u0645. \u0627\u0646\u062a\u062e\u0627\u0628 \u0639\u0646\u0627\u0635\u0631 \u0627\u062d\u0633\u0627\u0633 &#8220;\u0645\u0634\u06a9\u0644 \u0633\u0627\u0632&#8221; \u060c \u0631\u0633\u06cc\u062f\u06af\u06cc \u0628\u0647 \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0647\u0627 \u0645\u062a\u0646\u0627\u0642\u0636 \u0628\u0648\u062f \u060c \u0648 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0646\u0648\u0634\u062a\u0646 \u062f\u0647 \u0647\u0627 \u062e\u0637 \u06a9\u062f \u062f\u0627\u0634\u062a\u0646\u062f. \u0635\u062f\u0627 \u0622\u0634\u0646\u0627 \u0627\u0633\u062a\u061f<\/p>\n<p>\u062f\u0631 \u0622\u0646 \u0632\u0645\u0627\u0646 \u060c jQuery \u0628\u0627 \u0641\u0644\u0633\u0641\u0647 &#8220;\u0646\u0648\u0634\u062a\u0646 \u06a9\u0645\u062a\u0631 \u060c \u0628\u06cc\u0634\u062a\u0631 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f&#8221; \u0628\u0647 \u0646\u062c\u0627\u062a \u0631\u0633\u06cc\u062f. \u0627\u06cc\u0646 \u0627\u0646\u0642\u0644\u0627\u0628\u06cc \u0628\u0648\u062f \u0648 \u062a\u063a\u06cc\u06cc\u0631 \u06a9\u0631\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u06cc\u06a9 \u0646\u0633\u0644 \u0627\u0632 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 (\u062e\u0648\u062f\u0645 \u0634\u0627\u0645\u0644) \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062c\u0628\u0647\u0647 \u0646\u0632\u062f\u06cc\u06a9 \u0634\u062f\u0646\u062f.<\/p>\n<p>\u0627\u0645\u0627 \u0627\u0645\u0631\u0648\u0632 \u060c \u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0648\u0631\u0648\u062f \u0628\u0647 \u0642\u0644\u0645\u0631\u0648 \u062c\u062f\u06cc\u062f \u0647\u0633\u062a\u06cc\u0645: <strong>\u0632\u0627\u0648\u06cc\u0647 \u062f\u0627\u0631<\/strong>\u0628\u0634\u0631 \u0627\u06cc\u0646 \u0686\u0627\u0631\u0686\u0648\u0628\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u062f\u062a\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f \u060c \u062f\u0627\u0631\u0627\u06cc \u067e\u0634\u062a\u0648\u0627\u0646\u0647 \u0634\u0631\u06a9\u062a \u0627\u0632 Google \u0627\u0633\u062a \u0648 \u0642\u0648\u0644 \u0645\u06cc \u062f\u0647\u062f \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0633\u0631\u062f\u0631\u062f\u0647\u0627\u06cc\u06cc \u0631\u0627 \u06a9\u0647 \u0628\u0627 \u0633\u0627\u062e\u062a\u0646 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u0645\u062f\u0631\u0646 \u0628\u0627 \u0622\u0646 \u0631\u0648\u0628\u0631\u0648 \u0647\u0633\u062a\u06cc\u0645 \u060c \u062d\u0644 \u06a9\u0646\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%DA%86%D8%B1%D8%A7_%D8%AF%D8%B1_%D8%B3%D8%A7%D9%84_2025_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C%D8%9F\"><\/span>\n<p>  \u0686\u0631\u0627 \u062f\u0631 \u0633\u0627\u0644 2025 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc\u061f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062a\u0639\u062c\u0628 \u06a9\u0646\u06cc\u062f: &#8220;\u0628\u0627 \u0627\u06cc\u0646 \u0647\u0645\u0647 \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc \u0645\u062f\u0631\u0646 \u062f\u0631 \u0622\u0646\u062c\u0627 \u060c \u0686\u0631\u0627 \u0628\u0627\u06cc\u062f \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u06cc\u0627\u062f \u0628\u06af\u06cc\u0631\u0645\u061f&#8221;<\/p>\n<p>\u0633\u0648\u0627\u0644 \u0639\u0627\u0644\u06cc! \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0646\u0645 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0633\u0632\u0627\u0648\u0627\u0631 \u062a\u0648\u062c\u0647 \u0634\u0645\u0627 \u0627\u0633\u062a:<\/p>\n<ol>\n<li>\n<p><strong>\u067e\u0630\u06cc\u0631\u0634 \u0634\u0631\u06a9\u062a<\/strong>: Angular \u0628\u0647 \u0637\u0648\u0631 \u06af\u0633\u062a\u0631\u062f\u0647 \u0627\u06cc \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u062f\u0631 \u0645\u0642\u06cc\u0627\u0633 \u0628\u0632\u0631\u06af \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f. \u062f\u0631 \u0637\u0648\u0644 \u06a9\u0627\u0631 \u0645\u0634\u0627\u0648\u0631\u0647 \u0645\u0646 \u060c \u0628\u0627 \u0645\u0634\u0627\u063a\u0644 \u0645\u062a\u0639\u062f\u062f\u06cc \u0631\u0648\u0628\u0631\u0648 \u0634\u062f\u0647 \u0627\u0645 \u06a9\u0647 \u0633\u06cc\u0633\u062a\u0645 \u0647\u0627\u06cc \u0645\u0647\u0645 \u0631\u0627 \u062f\u0631 \u0645\u0648\u0631\u062f Angular \u0627\u062f\u0627\u0631\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0631\u0627\u0647 \u062d\u0644 \u06a9\u0627\u0645\u0644<\/strong>: \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0644\u0627\u06cc\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u062a\u0645\u0631\u06a9\u0632 \u0645\u06cc \u06a9\u0646\u0646\u062f \u060c Angular \u06cc\u06a9 \u0628\u0633\u062a\u0631 \u06a9\u0627\u0645\u0644 \u0628\u0627 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0627\u0632 \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u0627\u0639\u062a\u0628\u0627\u0631 \u0633\u0646\u062c\u06cc \u067e\u062e\u062a\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0622\u0646 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u062f\u063a\u0627\u0645 \u062a\u06cc\u0631\u0627\u0646\u062f\u0627\u0632\u06cc<\/strong>: Angular \u062f\u0631 \u0622\u063a\u0648\u0634 TypeScript \u060c \u06a9\u0647 \u062a\u0627\u06cc\u067e \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u0631\u0627 \u0628\u0647 JavaScript \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0647 \u0645\u0646 \u0627\u0639\u062a\u0645\u0627\u062f \u06a9\u0646\u06cc\u062f \u060c \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0628\u0647 \u0622\u0646 \u0639\u0627\u062f\u062a \u06a9\u0631\u062f\u06cc\u062f \u060c \u062a\u0639\u062c\u0628 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0628\u062f\u0648\u0646 \u0622\u0646 \u0632\u0646\u062f\u06af\u06cc \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f!<\/p>\n<\/li>\n<li>\n<p><strong>\u0648\u0627\u0642\u0639\u06cc\u062a \u0628\u0627\u0632\u0627\u0631 \u06a9\u0627\u0631<\/strong>: \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0644\u06cc\u0633\u062a \u0647\u0627\u06cc \u0634\u063a\u0644\u06cc \u0645\u0631\u0648\u0631 \u06a9\u0646\u06cc\u062f \u0648 \u0628\u0647 \u0648\u06cc\u0698\u0647 \u0628\u0631\u0627\u06cc \u0645\u0648\u0642\u0639\u06cc\u062a \u0647\u0627\u06cc \u0633\u0637\u062d \u0634\u0631\u06a9\u062a \u060c \u0628\u0647 \u0637\u0648\u0631 \u0645\u06a9\u0631\u0631 Angular \u0630\u06a9\u0631 \u0634\u062f\u0647 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<\/p>\n<\/li>\n<li>\n<p><strong>\u0633\u0627\u062e\u062a\u0627\u0631 \u0639\u0642\u06cc\u062f\u0647<\/strong>: Angular \u0646\u0638\u0631\u0627\u062a \u062f\u0631 \u0645\u0648\u0631\u062f \u0646\u062d\u0648\u0647 \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u062f\u0627\u0631\u062f \u060c \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0647\u0646\u06af\u0627\u0645 \u06a9\u0627\u0631 \u062f\u0631 \u062a\u06cc\u0645 \u0647\u0627\u06cc \u0628\u0632\u0631\u06af \u06cc\u06a9 \u0646\u0639\u0645\u062a \u0628\u0627\u0634\u062f.<\/p>\n<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%88%D9%84%DB%8C%D9%86_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0627\u0648\u0644\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u062f\u0633\u062a\u0627\u0646\u0645\u0627\u0646 \u0631\u0627 \u06a9\u062b\u06cc\u0641 \u06a9\u0646\u06cc\u0645! \u0645\u0646 \u062f\u06cc\u0631\u0648\u0632 \u062d\u062f\u0648\u062f \u06cc\u06a9 \u0633\u0627\u0639\u062a \u0635\u0631\u0641 \u06a9\u0631\u062f\u0645 \u0641\u0642\u0637 \u0645\u062d\u06cc\u0637 \u062e\u0648\u062f \u0631\u0627 \u0622\u0645\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645 \u060c \u0648 \u0627\u0648\u0647 \u067e\u0633\u0631 \u060c \u0627\u06cc\u0646 \u06cc\u06a9 \u0633\u0641\u0631 \u0628\u0648\u062f. \u0627\u0645\u0627 \u0646\u06af\u0631\u0627\u0646 \u0646\u0628\u0627\u0634\u06cc\u062f \u060c \u0645\u0646 \u0642\u062f\u0645 \u0628\u0647 \u0642\u062f\u0645 \u0634\u0645\u0627 \u0631\u0627 \u0637\u06cc \u0645\u06cc \u06a9\u0646\u0645.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%BE%DB%8C%D8%B4_%D9%86%DB%8C%D8%A7%D8%B2%D9%87%D8%A7%DB%8C\"><\/span>\n<p>  \u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0634\u06cc\u0631\u062c\u0647 \u0631\u0641\u062a\u0646 \u060c \u0634\u0645\u0627 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u06cc\u062f:<\/p>\n<ul>\n<li>\n<strong>node.js \u0648 npm<\/strong>: Angular node.js \u0646\u0633\u062e\u0647 14.x \u06cc\u0627 \u0628\u0639\u062f \u0627\u0632 \u0622\u0646 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f<\/li>\n<li>\n<strong>\u06a9\u0644\u06cc\u062f\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc<\/strong>: \u0631\u0627\u0628\u0637 \u062e\u0637 \u0641\u0631\u0645\u0627\u0646 \u0628\u0631\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_1_nodejs_%D9%88_npm_%D8%B1%D8%A7_%D9%86%D8%B5%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 1: node.js \u0648 npm \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06af\u0631 \u0642\u0628\u0644\u0627\u064b Node.js \u0631\u0627 \u0646\u0635\u0628 \u0646\u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f \u060c \u0628\u0647 Nodejs.org \u0628\u0631\u0648\u06cc\u062f \u0648 \u0622\u062e\u0631\u06cc\u0646 \u0646\u0633\u062e\u0647 LTS \u0631\u0627 \u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u062a\u0623\u06cc\u06cc\u062f \u0646\u0635\u0628 \u060c \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0647 \u0648 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>node -v\nnpm -v\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_2_CLI_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C_%D8%B1%D8%A7_%D9%86%D8%B5%D8%A8_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 2: CLI \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Angular CLI \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627 \u060c \u062a\u0648\u0644\u06cc\u062f \u06a9\u062f \u0648 \u0627\u0646\u062c\u0627\u0645 \u06a9\u0627\u0631\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0622\u0633\u0627\u0646 \u0645\u06cc \u06a9\u0646\u062f. \u0622\u0646 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 NPM \u062f\u0631 \u0633\u0637\u062d \u062c\u0647\u0627\u0646\u06cc \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>npm install -g @angular\/cli\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0646\u0635\u0628 \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>ng version\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0646 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0631\u062f\u0645 \u0648 \u0622\u0631\u0645 \u0647\u0646\u0631\u06cc ASCII \u0631\u0627 \u062f\u0631 \u062a\u0631\u0645\u06cc\u0646\u0627\u0644 \u062e\u0648\u062f \u062f\u06cc\u062f\u0645 \u060c \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u06a9\u0644\u0645\u0647 \u06af\u0641\u062a\u0645 &#8220;\u0627\u0648\u0647!&#8221; \u0628\u0627 \u0635\u062f\u0627\u06cc \u0628\u0644\u0646\u062f \u0627\u06cc\u0646 \u0686\u06cc\u0632\u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 \u0627\u0633\u062a \u060c \u062f\u0631\u0633\u062a \u0627\u0633\u062a\u061f<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_3_%D8%A7%D9%88%D9%84%DB%8C%D9%86_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%A7%DB%8C%D8%AC%D8%A7%D8%AF_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 3: \u0627\u0648\u0644\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u062e\u0648\u062f \u0631\u0627 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u0627 \u0622\u0645\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u0627\u0648\u0644\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>ng new learn-angular-with-me\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0637\u0648\u0644 \u062a\u0646\u0638\u06cc\u0645 \u060c Angular CLI \u0633\u0624\u0627\u0644 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f:<\/p>\n<ul>\n<li>\u0627\u06cc\u0646 \u06a9\u0647 \u0622\u06cc\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0645\u0633\u06cc\u0631\u06cc\u0627\u0628\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f (\u0628\u0644\u0647!)<\/li>\n<li>\u06a9\u062f\u0627\u0645 \u067e\u06cc\u0634 \u067e\u0631\u062f\u0627\u0632\u0646\u062f\u0647 CSS \u0631\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f (\u0645\u0646 \u0641\u0639\u0644\u0627\u064b \u0628\u0627 CSS \u0645\u0639\u0645\u0648\u0644\u06cc \u0686\u0633\u0628\u06cc\u062f\u0647 \u0627\u0645)<\/li>\n<\/ul>\n<p>\u0627\u06cc\u0646 \u0644\u062d\u0638\u0647 \u0627\u06cc \u0628\u0648\u062f \u06a9\u0647 \u0641\u0647\u0645\u06cc\u062f\u0645 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u062f\u0631 \u062d\u0627\u0644 \u0622\u0634\u0641\u062a\u06af\u06cc \u0646\u06cc\u0633\u062a. CLI \u0633\u0624\u0627\u0644\u0627\u062a \u0645\u062a\u0641\u06a9\u0631\u0627\u0646\u0647 \u0627\u06cc \u0645\u06cc \u067e\u0631\u0633\u062f \u0648 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u062c\u0627\u0645\u0639 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D9%85%D8%B1%D8%AD%D9%84%D9%87_4_%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87_%D8%AE%D9%88%D8%AF_%D8%B1%D8%A7_%D8%A7%D8%AC%D8%B1%D8%A7_%DA%A9%D9%86%DB%8C%D8%AF\"><\/span>\n<p>  \u0645\u0631\u062d\u0644\u0647 4: \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u0628\u0647 \u0641\u0647\u0631\u0633\u062a \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0628\u0631\u0648\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>cd learn-angular-with-me\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>ng serve --open\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 <code>--open<\/code> \u067e\u0631\u0686\u0645 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0634\u0645\u0627 \u0631\u0627 \u0628\u0627\u0632 \u062e\u0648\u0627\u0647\u062f \u06a9\u0631\u062f <code>http:\/\/localhost:4200\/<\/code>\u0628\u0634\u0631<\/p>\n<p>\u0648\u0642\u062a\u06cc \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u062f\u06cc\u062f\u0645 \u06a9\u0647 \u0622\u0631\u0645 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631 \u0645\u0646 \u0645\u06cc \u0686\u0631\u062e\u062f \u200b\u200b\u060c \u0627\u062d\u0633\u0627\u0633 \u0645\u06cc \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0641\u0642\u0637 \u0628\u0647 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0628\u0627\u0634\u06af\u0627\u0647 \u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0646\u062e\u0628\u0647 \u067e\u06cc\u0648\u0633\u062a\u0647 \u0627\u0645. \u0647\u0645 \u0647\u06cc\u062c\u0627\u0646 \u0627\u0646\u06af\u06cc\u0632 \u0648 \u0647\u0645 \u06a9\u0645\u06cc \u0627\u0631\u0639\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0648\u062f!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA%D8%A7%D8%B1_%D9%BE%D8%B1%D9%88%DA%98%D9%87_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C\"><\/span>\n<p>  \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0627 \u0622\u0645\u062f\u0646 \u0627\u0632 jQuery \u060c Angular \u0627\u062d\u0633\u0627\u0633 &#8230; \u062c\u0627\u0645\u0639. \u0648 \u0627\u0632 \u0646\u0638\u0631 \u062c\u0627\u0645\u0639 \u060c \u0645\u0646\u0638\u0648\u0631\u0645 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0627\u062a\u0641\u0627\u0642\u0627\u062a \u0632\u06cc\u0627\u062f\u06cc \u062f\u0631 \u062c\u0631\u06cc\u0627\u0646 \u0627\u0633\u062a. \u0627\u0648\u0644\u06cc\u0646 \u0648\u0627\u06a9\u0646\u0634 \u0645\u0646 \u0635\u0627\u062f\u0642\u0627\u0646\u0647 \u0648\u0642\u062a\u06cc \u06a9\u0647 \u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0645 \u060c \u06a9\u0645\u06cc \u0628\u06cc\u0634 \u0627\u0632 \u062d\u062f \u0632\u06cc\u0627\u062f \u0628\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>learn-angular-with-me\/\n\u251c\u2500\u2500 node_modules\/\n\u251c\u2500\u2500 src\/\n\u2502   \u251c\u2500\u2500 app\/\n\u2502   \u2502   \u251c\u2500\u2500 app.component.css\n\u2502   \u2502   \u251c\u2500\u2500 app.component.html\n\u2502   \u2502   \u251c\u2500\u2500 app.component.spec.ts\n\u2502   \u2502   \u251c\u2500\u2500 app.component.ts\n\u2502   \u2502   \u2514\u2500\u2500 app.module.ts\n\u2502   \u251c\u2500\u2500 assets\/\n\u2502   \u251c\u2500\u2500 environments\/\n\u2502   \u251c\u2500\u2500 favicon.ico\n\u2502   \u251c\u2500\u2500 index.html\n\u2502   \u251c\u2500\u2500 main.ts\n\u2502   \u251c\u2500\u2500 polyfills.ts\n\u2502   \u251c\u2500\u2500 styles.css\n\u2502   \u2514\u2500\u2500 test.ts\n\u251c\u2500\u2500 angular.json\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 tsconfig.json\n\u2514\u2500\u2500 ... (more config files)\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0635\u0628\u0631 \u06a9\u0646 \u060c \u0686\u06cc\u061f \u062d\u062a\u06cc \u0627\u0632 \u06a9\u062c\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u0645\u061f \u062f\u0631 jQuery \u060c \u0645\u0646 \u0641\u0642\u0637 \u06cc\u06a9 \u0641\u0627\u06cc\u0644 HTML \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u0645 \u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 JS \u0631\u0627 \u067e\u06cc\u0648\u0646\u062f \u0645\u06cc \u062f\u0647\u0645 \u0648 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0631\u0627 \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u0645. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u060c \u0645\u0646 \u0628\u0647 \u0686\u06cc\u0632\u06cc \u0646\u06af\u0627\u0647 \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u0628\u06cc\u0634\u062a\u0631 \u0634\u0628\u06cc\u0647 \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0627\u0631 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062f\u0631 \u0633\u0637\u062d \u0634\u0631\u06a9\u062a \u0627\u0633\u062a.<\/p>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0642\u0637\u0639\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<ul>\n<li>\n<strong>src\/app\/<\/strong>: \u0627\u06cc\u0646\u062c\u0627\u0633\u062a \u06a9\u0647 \u0628\u06cc\u0634\u062a\u0631 \u06a9\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u0632\u0646\u062f\u06af\u06cc \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<li>\n<strong>app.component.ts<\/strong>: \u06a9\u0644\u0627\u0633 \u0627\u0635\u0644\u06cc \u0645\u0624\u0644\u0641\u0647<\/li>\n<li>\n<strong>app.component.html<\/strong>: \u0627\u0644\u06af\u0648\u06cc HTML \u0628\u0631\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u0627\u0635\u0644\u06cc<\/li>\n<li>\n<strong>app.module.ts<\/strong>: \u0645\u0627\u0698\u0648\u0644 \u0631\u06cc\u0634\u0647 \u0627\u06cc \u06a9\u0647 \u0628\u0647 Angular \u0645\u06cc \u06af\u0648\u06cc\u062f \u0686\u06af\u0648\u0646\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0631\u0627 \u0645\u0648\u0646\u062a\u0627\u0698 \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%B0%D9%87%D9%86%DB%8C_%D8%AA%D9%81%DA%A9%D8%B1_%D9%85%D8%A8%D8%AA%D9%86%DB%8C_%D8%A8%D8%B1_%D9%85%D8%A4%D9%84%D9%81%D9%87\"><\/span>\n<p>  \u062a\u063a\u06cc\u06cc\u0631 \u0630\u0647\u0646\u06cc: \u062a\u0641\u06a9\u0631 \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u0645\u0624\u0644\u0641\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0632\u0631\u06af\u062a\u0631\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0630\u0647\u0646\u06cc \u06a9\u0647 \u0645\u0646 \u0645\u062c\u0628\u0648\u0631 \u0628\u0647 \u0627\u06cc\u062c\u0627\u062f \u0622\u0646 \u0647\u0633\u062a\u0645 \u060c \u062a\u0641\u06a9\u0631 \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0627\u0633\u062a. \u062f\u0631 jQuery \u060c \u0645\u0646 \u0628\u0647 \u0646\u0648\u0634\u062a\u0646 \u062a\u0648\u0627\u0628\u0639 \u0648 \u062f\u0633\u062a\u06a9\u0627\u0631\u06cc \u0645\u0633\u062a\u0642\u06cc\u0645 DOM \u0639\u0627\u062f\u062a \u06a9\u0631\u062f\u0645. \u0628\u0627 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u060c \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0628\u0647 \u062d\u0648\u0644 \u0627\u062c\u0632\u0627 \u0645\u06cc \u0686\u0631\u062e\u062f.<\/p>\n<p>\u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u062f\u0631 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0627\u0633\u0627\u0633\u0627\u064b \u06cc\u06a9 \u0633\u0627\u062e\u062a\u0645\u0627\u0646 \u0633\u0627\u062e\u062a\u0645\u0627\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0627\u0645\u0644:<\/p>\n<ul>\n<li>\u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc HTML (\u0646\u0645\u0627\u06cc)<\/li>\n<li>\u06cc\u06a9 \u06a9\u0644\u0627\u0633 Typescript (\u0645\u0646\u0637\u0642)<\/li>\n<li>\u0633\u0628\u06a9 \u0647\u0627\u06cc CSS (\u0646\u06af\u0627\u0647)<\/li>\n<\/ul>\n<p>\u0628\u06af\u0630\u0627\u0631\u06cc\u062f \u0628\u0647 \u0634\u0645\u0627 \u0646\u0634\u0627\u0646 \u062f\u0647\u0645 \u06a9\u0647 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0627\u0633\u0627\u0633\u06cc \u0686\u06af\u0648\u0646\u0647 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ task.component.ts<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-task<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/task.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/task.component.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">TaskComponent<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">taskName<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">isCompleted<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span> <span class=\"o\">=<\/span> <span class=\"kc\">false<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nf\">toggleComplete<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">isCompleted<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">isCompleted<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\"><!-- task.component.html --><\/span>\n<span class=\"nt\"><p> <span class=\"na\">class=<\/span><span class=\"s\">\"task\"<\/span> <span class=\"na\">[class.completed]=<\/span><span class=\"s\">\"isCompleted\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"><span\/>{{ taskName }}<span class=\"nt\"\/><\/span>\n  <span class=\"nt\"><button> <span class=\"na\">(click)=<\/span><span class=\"s\">\"toggleComplete()\"<\/span><span class=\"nt\">&gt;<\/span>Toggle<span class=\"nt\"\/><\/button><\/span>\n<span class=\"nt\"\/><\/p><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* task.component.css *\/<\/span>\n<span class=\"nc\">.task<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">border-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">1px<\/span> <span class=\"nb\">solid<\/span> <span class=\"m\">#eee<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.completed<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">text-decoration<\/span><span class=\"p\">:<\/span> <span class=\"nb\">line-through<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#888<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u0627\u0648\u0644\u06cc\u0646 &#8220;\u0622\u0647&#8221; \u0645\u0646 \u0628\u0648\u062f! \u0644\u062d\u0638\u0647 \u0627\u06cc \u0628\u0627 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc. \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646\u06a9\u0647 HTML \u060c JS \u0648 CSS \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u067e\u0631\u0627\u06a9\u0646\u062f\u0647 \u06a9\u0646\u0646\u062f \u060c \u0622\u0646\u0647\u0627 \u0628\u0631 \u0627\u0633\u0627\u0633 \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0647\u0645 \u0642\u0631\u0627\u0631 \u0645\u06cc \u06af\u06cc\u0631\u0646\u062f. \u0645\u062b\u0644 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0631 \u06cc\u06a9 \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0645\u06cc\u0646\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u062e\u0648\u062f \u0627\u0633\u062a!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%AA%D8%B5%D8%A7%D9%84_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D8%AF%D9%88_%D8%B7%D8%B1%D9%81%D9%87_%D8%AC%D8%A7%D8%AF%D9%88_%D8%B4%D8%B1%D9%88%D8%B9_%D9%85%DB%8C_%D8%B4%D9%88%D8%AF\"><\/span>\n<p>  \u0627\u062a\u0635\u0627\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062f\u0648 \u0637\u0631\u0641\u0647: \u062c\u0627\u062f\u0648 \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u062f\u0631 jQuery \u060c \u0645\u0627 \u0645\u062c\u0628\u0648\u0631 \u0634\u062f\u06cc\u0645 DOM \u0631\u0627 \u0647\u0646\u06af\u0627\u0645 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u0645\u061f \u0627\u06cc\u0646 \u0686\u06cc\u0632\u06cc \u0634\u0628\u06cc\u0647 \u0628\u0647 \u0627\u06cc\u0646 \u0628\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nf\">$<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#task-input<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">val<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">New Task<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n<span class=\"c1\">\/\/ And then later:<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">taskValue<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">$<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#task-input<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">val<\/span><span class=\"p\">();<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>Angular \u0627\u062a\u0635\u0627\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062f\u0648 \u0637\u0631\u0641\u0647 \u0631\u0627 \u0645\u0639\u0631\u0641\u06cc \u0645\u06cc \u06a9\u0646\u062f \u060c \u06a9\u0647 \u0648\u0642\u062a\u06cc \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u0622\u0646 \u0631\u0627 \u0645\u06cc \u0628\u06cc\u0646\u06cc\u062f \u060c \u0645\u0627\u0646\u0646\u062f \u062c\u0627\u062f\u0648 \u0627\u062d\u0633\u0627\u0633 \u0645\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<p>\u0627\u06cc\u0646 \u06a9\u0647 <code>[(ngModel)]<\/code> \u0646\u062d\u0648 &#8220;\u0645\u0648\u0632 \u062f\u0631 \u06cc\u06a9 \u062c\u0639\u0628\u0647&#8221; \u0646\u0627\u0645\u06cc\u062f\u0647 \u0645\u06cc \u0634\u0648\u062f (\u0628\u0647 \u0637\u0648\u0631 \u062c\u062f\u06cc \u060c \u0627\u06cc\u0646 \u0647\u0645\u0627\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 Devs Angular \u0622\u0646 \u0631\u0627 \u0635\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f!) \u060c \u0648 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u062e\u0627\u0635\u06cc\u062a \u0645\u0624\u0644\u0641\u0647 \u0634\u0645\u0627 \u0648 \u0645\u0642\u062f\u0627\u0631 \u0648\u0631\u0648\u062f\u06cc \u0631\u0627 \u062f\u0631 Sync \u0646\u06af\u0647 \u0645\u06cc \u062f\u0627\u0631\u062f.<\/p>\n<p>\u0648\u0642\u062a\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u062f\u06cc\u062f\u0645 \u060c \u0628\u0647 \u0645\u0639\u0646\u0627\u06cc \u0648\u0627\u0642\u0639\u06cc \u06a9\u0644\u0645\u0647 \u06af\u0641\u062a\u0645 &#8220;\u0635\u0628\u0631 \u06a9\u0646\u06cc\u062f \u060c \u0627\u06cc\u0646 \u0627\u0633\u062a\u061f \u0628\u0642\u06cc\u0647 \u06a9\u062f \u06a9\u062c\u0627\u0633\u062a\u061f&#8221; \u0627\u06cc\u0646 \u062e\u06cc\u0644\u06cc \u062e\u0648\u0628 \u0628\u0648\u062f \u06a9\u0647 \u062f\u0631\u0633\u062a \u0628\u0627\u0634\u062f!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%B3%D8%A7%D8%AE%D8%AA_%D8%A7%D9%88%D9%84%DB%8C%D9%86_%D9%88%DB%8C%DA%98%DA%AF%DB%8C_%D9%85%D8%A7_%DB%8C%DA%A9_%D9%84%DB%8C%D8%B3%D8%AA_%DA%A9%D8%A7%D8%B1\"><\/span>\n<p>  \u0633\u0627\u062e\u062a \u0627\u0648\u0644\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0627: \u06cc\u06a9 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u0644\u06cc\u0633\u062a \u06a9\u0627\u0631 \u0633\u0627\u062f\u0647 \u0628\u0633\u0627\u0632\u06cc\u0645 \u062a\u0627 \u0627\u062d\u0633\u0627\u0633 \u06a9\u0646\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u062f\u0631 \u0639\u0645\u0644 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u0648\u0644 \u060c \u0645\u0627 \u06cc\u06a9 \u0645\u0624\u0644\u0641\u0647 \u062c\u062f\u06cc\u062f \u062a\u0648\u0644\u06cc\u062f \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>ng generate component task-list\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0627\u0644 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u067e\u0631\u0648\u0646\u062f\u0647 \u0647\u0627\u06cc \u0645\u0624\u0644\u0641\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ task-list.component.ts<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">Task<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">text<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">completed<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-task-list<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/task-list.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/task-list.component.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">TaskListComponent<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">newTaskText<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">tasks<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Task<\/span><span class=\"p\">[]<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\n\n  <span class=\"nf\">addTask<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newTaskText<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">())<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tasks<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">({<\/span>\n        <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">now<\/span><span class=\"p\">(),<\/span>\n        <span class=\"na\">text<\/span><span class=\"p\">:<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newTaskText<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">completed<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span>\n      <span class=\"p\">});<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newTaskText<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">toggleComplete<\/span><span class=\"p\">(<\/span><span class=\"nx\">task<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Task<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">task<\/span><span class=\"p\">.<\/span><span class=\"nx\">completed<\/span> <span class=\"o\">=<\/span> <span class=\"o\">!<\/span><span class=\"nx\">task<\/span><span class=\"p\">.<\/span><span class=\"nx\">completed<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">deleteTask<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tasks<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tasks<\/span><span class=\"p\">.<\/span><span class=\"nf\">filter<\/span><span class=\"p\">(<\/span><span class=\"nx\">task<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">task<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">!==<\/span> <span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\"><!-- task-list.component.html --><\/span>\n<span class=\"nt\"\/>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight css\"><code><span class=\"c\">\/* task-list.component.css *\/<\/span>\n<span class=\"nc\">.task-manager<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">max-width<\/span><span class=\"p\">:<\/span> <span class=\"m\">500px<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">margin<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"nb\">auto<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.add-task<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">margin-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">20px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.add-task<\/span> <span class=\"nt\">input<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">flex-grow<\/span><span class=\"p\">:<\/span> <span class=\"m\">1<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">8px<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"m\">1px<\/span> <span class=\"nb\">solid<\/span> <span class=\"m\">#ddd<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">4px<\/span> <span class=\"m\">0<\/span> <span class=\"m\">0<\/span> <span class=\"m\">4px<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.add-task<\/span> <span class=\"nt\">button<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">8px<\/span> <span class=\"m\">16px<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#4CAF50<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"no\">white<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span> <span class=\"m\">4px<\/span> <span class=\"m\">4px<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"nb\">pointer<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.task-list<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">list-style-type<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">0<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.task-list<\/span> <span class=\"nt\">li<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">border-bottom<\/span><span class=\"p\">:<\/span> <span class=\"m\">1px<\/span> <span class=\"nb\">solid<\/span> <span class=\"m\">#eee<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">display<\/span><span class=\"p\">:<\/span> <span class=\"n\">flex<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">justify-content<\/span><span class=\"p\">:<\/span> <span class=\"n\">space-between<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">align-items<\/span><span class=\"p\">:<\/span> <span class=\"nb\">center<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.task-list<\/span> <span class=\"nt\">li<\/span><span class=\"nc\">.completed<\/span> <span class=\"nt\">span<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">text-decoration<\/span><span class=\"p\">:<\/span> <span class=\"nb\">line-through<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#888<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nc\">.task-list<\/span> <span class=\"nt\">li<\/span> <span class=\"nt\">button<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">background-color<\/span><span class=\"p\">:<\/span> <span class=\"m\">#f44336<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">color<\/span><span class=\"p\">:<\/span> <span class=\"no\">white<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">border<\/span><span class=\"p\">:<\/span> <span class=\"nb\">none<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">padding<\/span><span class=\"p\">:<\/span> <span class=\"m\">5px<\/span> <span class=\"m\">10px<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">border-radius<\/span><span class=\"p\">:<\/span> <span class=\"m\">4px<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">cursor<\/span><span class=\"p\">:<\/span> <span class=\"nb\">pointer<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 app.module.ts \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0641\u0631\u0645 \u0641\u0631\u0645\u0648\u0644 (\u0644\u0627\u0632\u0645 \u0628\u0631\u0627\u06cc ngmodel) \u0631\u0627 \u0634\u0627\u0645\u0644 \u0634\u0648\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ app.module.ts<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">NgModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">BrowserModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/platform-browser<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">FormsModule<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/forms<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">AppComponent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/app.component<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">TaskListComponent<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/task-list\/task-list.component<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">NgModule<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">declarations<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nx\">AppComponent<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">TaskListComponent<\/span>\n  <span class=\"p\">],<\/span>\n  <span class=\"na\">imports<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n    <span class=\"nx\">BrowserModule<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">FormsModule<\/span>\n  <span class=\"p\">],<\/span>\n  <span class=\"na\">providers<\/span><span class=\"p\">:<\/span> <span class=\"p\">[],<\/span>\n  <span class=\"na\">bootstrap<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"nx\">AppComponent<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">AppModule<\/span> <span class=\"p\">{<\/span> <span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0622\u062e\u0631 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0632 \u0645\u0624\u0644\u0641\u0647 \u062c\u062f\u06cc\u062f \u0645\u0627 \u062f\u0631 App.component.html \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"c\"><!-- app.component.html --><\/span>\n<span class=\"nt\"><div> <span class=\"na\">class=<\/span><span class=\"s\">\"container\"<\/span><span class=\"nt\">&gt;<\/span>\n  <span class=\"nt\"\/>My Angular Task Manager<span class=\"nt\"\/>\n  <span class=\"nt\"><app-task-list\/><\/span>\n<span class=\"nt\"\/><\/div><\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u0644\u062d\u0638\u0647 \u062f\u06cc\u06af\u0631 \u0630\u0647\u0646 \u0628\u0631\u0627\u06cc \u0645\u0646 \u0628\u0648\u062f. \u062f\u0631 jQuery \u060c \u0645\u0646 \u0645\u062c\u0628\u0648\u0631 \u0634\u062f\u0645 \u0628\u0631\u0627\u06cc \u0647\u0631 \u062a\u0639\u0627\u0645\u0644 \u060c \u062f\u0633\u062a\u06cc\u0627\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u0645 \u060c DOM \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u0645 \u0648 \u062d\u0627\u0644\u062a \u0631\u0627 \u067e\u06cc\u06af\u06cc\u0631\u06cc \u06a9\u0646\u0645. \u0628\u0627 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u060c \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0645\u0647 \u0627\u06cc\u0646\u0647\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f!<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Angular_vs_jQuery_%D8%AA%D8%BA%DB%8C%DB%8C%D8%B1_%D8%B0%D9%87%D9%86%DB%8C\"><\/span>\n<p>  Angular vs jQuery: \u062a\u063a\u06cc\u06cc\u0631 \u0630\u0647\u0646\u06cc<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0645\u0642\u0627\u06cc\u0633\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0628\u0647 \u0647\u0645\u0627\u0646 \u0645\u062f\u06cc\u0631 \u0648\u0638\u06cc\u0641\u0647 \u062f\u0631 jQuery \u062f\u0631 \u0645\u0642\u0627\u0628\u0644 Angular \u0646\u0632\u062f\u06cc\u06a9 \u0634\u0648\u06cc\u0645:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D9%88%DB%8C%DA%A9%D8%B1%D8%AF_jQuery\"><\/span>\n<p>  \u0631\u0648\u06cc\u06a9\u0631\u062f jQuery:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\u0639\u0646\u0627\u0635\u0631 DOM \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0636\u0645\u06cc\u0645\u0647 \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0636\u0645\u06cc\u0645\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062f\u0627\u062f\u0647 \u0647\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f DOM \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u062e\u0648\u062f \u0631\u0627 \u0627\u062f\u0627\u0631\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"%D8%B1%D9%88%DB%8C%DA%A9%D8%B1%D8%AF_%D8%B2%D8%A7%D9%88%DB%8C%D9%87_%D8%A7%DB%8C\"><\/span>\n<p>  \u0631\u0648\u06cc\u06a9\u0631\u062f \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc:<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li>\u062a\u0639\u0631\u06cc\u0641 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0645\u0624\u0644\u0641\u0647 (\u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u0634\u0645\u0627)<\/li>\n<li>\u0627\u0644\u06af\u0648\u0647\u0627\u06cc HTML \u0631\u0627 \u0628\u0627 \u0627\u062a\u0635\u0627\u0644 \u062f\u0627\u062f\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 DOM \u0631\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<li>\u062f\u0648\u0644\u062a \u062f\u0631 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0627\u062f\u0627\u0631\u0647 \u0645\u06cc \u0634\u0648\u062f<\/li>\n<\/ol>\n<p>\u0627\u06cc\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u0627\u0632 \u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc \u0636\u0631\u0648\u0631\u06cc \u0628\u0647 \u0627\u0639\u0644\u0627\u0645\u06cc\u0647 \u060c \u06cc\u06a9 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u0646\u062f\u0647 \u0628\u0627\u0632\u06cc \u0628\u0631\u0627\u06cc \u0645\u0646 \u0628\u0648\u062f. \u0645\u0646 \u0628\u0647 \u062c\u0627\u06cc \u06af\u0641\u062a\u0646 \u0645\u0631\u0648\u0631\u06af\u0631 \u062f\u0642\u06cc\u0642\u0627\u064b \u0686\u0647 \u06a9\u0627\u0631\u06cc \u0628\u0627\u06cc\u062f \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0645 \u060c \u0645\u0646 \u0641\u0642\u0637 \u062a\u0648\u0635\u06cc\u0641 \u0645\u06cc \u06a9\u0646\u0645 \u06a9\u0647 \u0686\u0647 \u0646\u062a\u06cc\u062c\u0647 \u0627\u06cc \u0631\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u0645 \u060c \u0648 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0645\u06cc \u06af\u0648\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0622\u0646 \u0631\u0627 \u062a\u062d\u0642\u0642 \u0628\u062e\u0634\u06cc\u062f.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D9%84%D8%B9%D9%85%D9%84_%D9%87%D8%A7_%D8%A7%D8%A8%D8%B1%D9%82%D8%AF%D8%B1%D8%AA_%D9%87%D8%A7%DB%8C_Angular\"><\/span>\n<p>  \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0647\u0627: \u0627\u0628\u0631\u0642\u062f\u0631\u062a \u0647\u0627\u06cc Angular<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Angular \u0634\u0627\u0645\u0644 \u0686\u0646\u062f\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u062f\u0627\u062e\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 HTML \u0631\u0627 \u0628\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u06af\u0633\u062a\u0631\u0634 \u0645\u06cc \u062f\u0647\u062f:<\/p>\n<ul>\n<li>\n<strong>\u0628\u0631\u0627\u06cc<\/strong>: \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0628\u0631\u0627\u06cc \u0647\u0631 \u0645\u0648\u0631\u062f \u0631\u0627 \u062f\u0631 \u06cc\u06a9 \u0645\u062c\u0645\u0648\u0639\u0647 \u062a\u06a9\u0631\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<li>\n<strong>\u0645\u0646 f<\/strong>: \u0628\u0647 \u0637\u0648\u0631 \u0645\u0634\u0631\u0648\u0637 \u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0631\u0627 \u0634\u0627\u0645\u0644 \u06cc\u0627 \u062d\u0630\u0641 \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<li>\n<strong>\u0639\u06a9\u0627\u0633\u06cc<\/strong>: \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u06a9\u0644\u0627\u0633\u0647\u0627\u06cc CSS \u0631\u0627 \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<li>\n<strong>\u0634\u0628\u0647<\/strong>: \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0633\u0628\u06a9 \u0647\u0627 \u0631\u0627 \u0627\u0639\u0645\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<li>\n<strong>\u0639\u06a9\u0633\u0628\u0631\u062f\u0627\u0631\u06cc<\/strong>: \u0627\u062a\u0635\u0627\u0644 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u062f\u0648 \u0637\u0631\u0641\u0647 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f<\/li>\n<\/ul>\n<p>\u0627\u06cc\u0646 \u062f\u0633\u062a\u0648\u0631\u0627\u0644\u0639\u0645\u0644 \u0647\u0627 \u0633\u0627\u062e\u062a \u0648 \u0633\u0627\u0632\u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0628\u0633\u06cc\u0627\u0631 \u0633\u0627\u062f\u0647 \u062a\u0631 \u0645\u06cc \u06a9\u0646\u0646\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644 \u060c \u0628\u0647 \u062c\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u062f jQuery:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"nf\">$<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#task-list<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">empty<\/span><span class=\"p\">();<\/span>\n<span class=\"nx\">tasks<\/span><span class=\"p\">.<\/span><span class=\"nf\">forEach<\/span><span class=\"p\">(<\/span><span class=\"kd\">function<\/span><span class=\"p\">(<\/span><span class=\"nx\">task<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">$li<\/span> <span class=\"o\">=<\/span> <span class=\"nf\">$<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\"><li\/><\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">text<\/span><span class=\"p\">(<\/span><span class=\"nx\">task<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">);<\/span>\n  <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">task<\/span><span class=\"p\">.<\/span><span class=\"nx\">completed<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"nx\">$li<\/span><span class=\"p\">.<\/span><span class=\"nf\">addClass<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">completed<\/span><span class=\"dl\">'<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n  <span class=\"nf\">$<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">#task-list<\/span><span class=\"dl\">'<\/span><span class=\"p\">).<\/span><span class=\"nf\">append<\/span><span class=\"p\">(<\/span><span class=\"nx\">$li<\/span><span class=\"p\">);<\/span>\n<span class=\"p\">});<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u060c \u0645\u0627 \u0628\u0647 \u0633\u0627\u062f\u06af\u06cc \u0645\u06cc \u0646\u0648\u06cc\u0633\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight html\"><code><span class=\"nt\"\/>\n  <span class=\"nt\"><li> <span class=\"na\">*ngFor=<\/span><span class=\"s\">\"let task of tasks\"<\/span> <span class=\"na\">[class.completed]=<\/span><span class=\"s\">\"task.completed\"<\/span><span class=\"nt\">&gt;<\/span>\n    {{ task.text }}\n  <span class=\"nt\"\/><\/li><\/span>\n<span class=\"nt\"\/>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0645\u0627\u0647\u06cc\u062a \u0627\u0639\u0644\u0627\u0646\u06cc \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0628\u0627\u0639\u062b \u0645\u06cc \u0634\u0648\u062f \u06a9\u062f \u0634\u0645\u0627 \u0642\u0627\u0628\u0644 \u062e\u0648\u0627\u0646\u062f\u0646 \u0648 \u062d\u0641\u0638 \u0628\u0627\u0634\u062f. \u0648\u0642\u062a\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u062f\u0631 \u0639\u0645\u0644 \u062f\u06cc\u062f\u0645 \u060c \u0641\u06a9\u0631 \u06a9\u0631\u062f\u0645 \u060c &#8220;\u0627\u06cc\u0646\u06af\u0648\u0646\u0647 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0628\u0627\u06cc\u062f \u062f\u0631 \u06a9\u0646\u0627\u0631 \u0647\u0645 \u0628\u0627\u0634\u062f!&#8221;<\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AE%D8%AF%D9%85%D8%A7%D8%AA_%D8%A8%D9%87_%D8%A7%D8%B4%D8%AA%D8%B1%D8%A7%DA%A9_%DA%AF%D8%B0%D8%A7%D8%B1%DB%8C_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7_%D8%A8%DB%8C%D9%86_%D9%85%D8%A4%D9%84%D9%81%D9%87_%D9%87%D8%A7\"><\/span>\n<p>  \u062e\u062f\u0645\u0627\u062a: \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06af\u0630\u0627\u0631\u06cc \u062f\u0627\u062f\u0647 \u0647\u0627 \u0628\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0628\u0627 \u0631\u0634\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0634\u0645\u0627 \u060c \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u062f\u0627\u062f\u0647 \u0647\u0627 \u0631\u0627 \u0628\u06cc\u0646 \u0645\u0624\u0644\u0641\u0647 \u0647\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f. \u0627\u06cc\u0646 \u062c\u0627\u06cc\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062e\u062f\u0645\u0627\u062a \u0648\u0627\u0631\u062f \u0645\u06cc \u0634\u0648\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0633\u0631\u0648\u06cc\u0633 \u06a9\u0627\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>ng generate service task\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ task.service.ts<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Injectable<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"kr\">interface<\/span> <span class=\"nx\">Task<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">text<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">completed<\/span><span class=\"p\">:<\/span> <span class=\"nx\">boolean<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Injectable<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">providedIn<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">root<\/span><span class=\"dl\">'<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">TaskService<\/span> <span class=\"p\">{<\/span>\n  <span class=\"k\">private<\/span> <span class=\"nx\">tasks<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Task<\/span><span class=\"p\">[]<\/span> <span class=\"o\">=<\/span> <span class=\"p\">[];<\/span>\n\n  <span class=\"nf\">getTasks<\/span><span class=\"p\">():<\/span> <span class=\"nx\">Task<\/span><span class=\"p\">[]<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tasks<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">addTask<\/span><span class=\"p\">(<\/span><span class=\"nx\">text<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tasks<\/span><span class=\"p\">.<\/span><span class=\"nf\">push<\/span><span class=\"p\">({<\/span>\n      <span class=\"na\">id<\/span><span class=\"p\">:<\/span> <span class=\"nb\">Date<\/span><span class=\"p\">.<\/span><span class=\"nf\">now<\/span><span class=\"p\">(),<\/span>\n      <span class=\"nx\">text<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">completed<\/span><span class=\"p\">:<\/span> <span class=\"kc\">false<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">deleteTask<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tasks<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tasks<\/span><span class=\"p\">.<\/span><span class=\"nf\">filter<\/span><span class=\"p\">(<\/span><span class=\"nx\">task<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">task<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">!==<\/span> <span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">toggleComplete<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">):<\/span> <span class=\"k\">void<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tasks<\/span> <span class=\"o\">=<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">tasks<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">task<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"nx\">task<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span> <span class=\"o\">===<\/span> <span class=\"nx\">id<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n        <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"p\">...<\/span><span class=\"nx\">task<\/span><span class=\"p\">,<\/span> <span class=\"na\">completed<\/span><span class=\"p\">:<\/span> <span class=\"o\">!<\/span><span class=\"nx\">task<\/span><span class=\"p\">.<\/span><span class=\"nx\">completed<\/span> <span class=\"p\">};<\/span>\n      <span class=\"p\">}<\/span>\n      <span class=\"k\">return<\/span> <span class=\"nx\">task<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 TaskListComponent \u062e\u0648\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0627\u06cc\u0646 \u0633\u0631\u0648\u06cc\u0633 \u0628\u0647 \u0631\u0648\u0632 \u06a9\u0646\u06cc\u0645:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight typescript\"><code><span class=\"c1\">\/\/ task-list.component.ts<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Component<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">@angular\/core<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">TaskService<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Task<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">..\/task.service<\/span><span class=\"dl\">'<\/span><span class=\"p\">;<\/span>\n\n<span class=\"p\">@<\/span><span class=\"nd\">Component<\/span><span class=\"p\">({<\/span>\n  <span class=\"na\">selector<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">app-task-list<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">templateUrl<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">.\/task-list.component.html<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n  <span class=\"na\">styleUrls<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span><span class=\"dl\">'<\/span><span class=\"s1\">.\/task-list.component.css<\/span><span class=\"dl\">'<\/span><span class=\"p\">]<\/span>\n<span class=\"p\">})<\/span>\n<span class=\"k\">export<\/span> <span class=\"kd\">class<\/span> <span class=\"nc\">TaskListComponent<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">newTaskText<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>\n\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"k\">private<\/span> <span class=\"nx\">taskService<\/span><span class=\"p\">:<\/span> <span class=\"nx\">TaskService<\/span><span class=\"p\">)<\/span> <span class=\"p\">{}<\/span>\n\n  <span class=\"kd\">get<\/span> <span class=\"nf\">tasks<\/span><span class=\"p\">():<\/span> <span class=\"nx\">Task<\/span><span class=\"p\">[]<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">taskService<\/span><span class=\"p\">.<\/span><span class=\"nf\">getTasks<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">addTask<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">if <\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newTaskText<\/span><span class=\"p\">.<\/span><span class=\"nf\">trim<\/span><span class=\"p\">())<\/span> <span class=\"p\">{<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">taskService<\/span><span class=\"p\">.<\/span><span class=\"nf\">addTask<\/span><span class=\"p\">(<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newTaskText<\/span><span class=\"p\">);<\/span>\n      <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">newTaskText<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">''<\/span><span class=\"p\">;<\/span>\n    <span class=\"p\">}<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">toggleComplete<\/span><span class=\"p\">(<\/span><span class=\"nx\">task<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Task<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">taskService<\/span><span class=\"p\">.<\/span><span class=\"nf\">toggleComplete<\/span><span class=\"p\">(<\/span><span class=\"nx\">task<\/span><span class=\"p\">.<\/span><span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"nf\">deleteTask<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">taskService<\/span><span class=\"p\">.<\/span><span class=\"nf\">deleteTask<\/span><span class=\"p\">(<\/span><span class=\"nx\">id<\/span><span class=\"p\">);<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0627\u06cc\u0646 \u06cc\u06a9 \u0645\u0641\u0647\u0648\u0645 \u0627\u0633\u0627\u0633\u06cc \u062f\u0631 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc \u0627\u0633\u062a: \u062a\u0632\u0631\u06cc\u0642 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc. \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0645\u0627 \u0648\u0627\u0628\u0633\u062a\u06af\u06cc \u0628\u0647 \u0633\u0627\u0632\u0646\u062f\u0647 \u0631\u0627 \u0627\u0639\u0644\u0627\u0645 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u060c Angular \u0628\u0647 \u0637\u0648\u0631 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0646\u0645\u0648\u0646\u0647 \u0627\u06cc \u0627\u0632 \u0622\u0646 \u0633\u0631\u0648\u06cc\u0633 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f. \u0627\u06cc\u0646 \u0628\u0627\u0639\u062b \u0622\u0632\u0645\u0627\u06cc\u0634 \u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u062c\u062f\u062f \u0645\u06cc \u0634\u0648\u062f<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0633\u0644\u0627\u0645 \u060c \u0639\u0644\u0627\u0642\u0647 \u0645\u0646\u062f\u0627\u0646 \u0628\u0647 \u06a9\u062f \u0647\u0645\u06a9\u0627\u0631! \u0628\u0647 \u062f\u0648\u0645\u06cc\u0646 \u0642\u0633\u0645\u062a \u0627\u0632 \u0622\u0646\u0686\u0647 \u0645\u0646 \u0645\u06cc \u06af\u0648\u06cc\u0645 \u0633\u0631\u06cc\u0627\u0644 &#8220;\u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc JS \u0628\u0627 \u0645\u0646&#8221; \u0645\u06cc \u0646\u0627\u0645\u0645. \u0645\u0646 \u06a9\u0627\u0645\u0644\u0627\u064b \u0647\u06cc\u062c\u0627\u0646 \u0632\u062f\u0647 \u0627\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 \u0634\u0645\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0631\u062f\u0645 \u060c \u0632\u06cc\u0631\u0627 \u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0627 \u0622\u0646 \u0631\u0648\u0628\u0631\u0648 \u0634\u0648\u06cc\u0645 \u060c \u0686\u0627\u0631\u0686\u0648\u0628 \u0647\u0627\u06cc \u06cc\u0627\u062f\u06af\u06cc\u0631\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0627\u0631\u0639\u0627\u0628 \u06a9\u0646\u0646\u062f\u0647 \u0628\u0627\u0634\u0646\u062f &#8211; \u0627\u0645\u0627 \u0648\u0642\u062a\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":101837,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxiffxzmw0aefkmnh7k1u.jpg","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-101836","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/101836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=101836"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/101836\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/101837"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=101836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=101836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=101836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}