{"id":78336,"date":"2024-09-28T18:27:07","date_gmt":"2024-09-28T14:57:07","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/universal-server-side-rendering-ussr-v-angular-108n\/"},"modified":"2024-09-28T18:27:07","modified_gmt":"2024-09-28T14:57:07","slug":"universal-server-side-rendering-ussr-v-angular-108n","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/universal-server-side-rendering-ussr-v-angular-108n\/","title":{"rendered":"\u0631\u0646\u062f\u0631 \u062c\u0627\u0646\u0628\u06cc \u0633\u0631\u0648\u0631 \u062c\u0647\u0627\u0646\u06cc (USSR) \u062f\u0631 Angular"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n \u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u060c \u0641\u0646\u0627\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc \u06cc\u0627\u0641\u062a\u0646 \u062a\u0639\u0627\u062f\u0644 \u0628\u0647\u06cc\u0646\u0647 \u0628\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f\u060c \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0648 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0645\u062f\u0627\u0648\u0645 \u062f\u0631 \u062d\u0627\u0644 \u062a\u06a9\u0627\u0645\u0644 \u0627\u0633\u062a. \u06cc\u06a9\u06cc \u0627\u0632 \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u06a9\u0647 \u062a\u0648\u0633\u0639\u0647 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u062f\u0627\u0634\u062a\u0647 \u0627\u0633\u062a\u060c \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 (SSR) \u06cc\u0627 \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0627\u0633\u062a. \u0686\u0627\u0631\u0686\u0648\u0628 Angular \u0646\u0642\u0634 \u0645\u0647\u0645\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u062a\u06a9\u0627\u0645\u0644 \u0627\u06cc\u0641\u0627 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u0627\u0632 \u0635\u0641\u062d\u0627\u062a \u0627\u0633\u062a\u0627\u062a\u06cc\u06a9 \u06af\u0631\u0641\u062a\u0647 \u062a\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0648\u06cc\u0627<\/p>\n

\u062f\u0631 \u0627\u0628\u062a\u062f\u0627\u060c \u0648\u0628 \u0645\u062a\u0634\u06a9\u0644 \u0627\u0632 \u0635\u0641\u062d\u0627\u062a HTML \u0627\u06cc\u0633\u062a\u0627 \u0628\u0648\u062f \u06a9\u0647 \u062f\u0631 \u0622\u0646 \u062a\u0645\u0627\u0645 \u0645\u062d\u062a\u0648\u0627 \u0628\u0631 \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u062a\u0648\u0644\u06cc\u062f \u0645\u06cc \u0634\u062f. \u0628\u0627 \u0646\u06cc\u0627\u0632 \u0631\u0648\u0632\u0627\u0641\u0632\u0648\u0646 \u0628\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0648\u06cc\u0627\u060c \u0641\u0646\u0627\u0648\u0631\u06cc\u200c\u0647\u0627\u06cc \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0645\u0627\u0646\u0646\u062f PHP\u060c ASP \u0648 JSP \u0638\u0647\u0648\u0631 \u06a9\u0631\u062f\u0647\u200c\u0627\u0646\u062f \u06a9\u0647 \u0628\u0647 HTML \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0628\u0647 \u0633\u0631\u0639\u062a \u062a\u0648\u0644\u06cc\u062f \u0634\u0648\u062f.<\/p>\n

\u062f\u0648\u0631\u0627\u0646 \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc \u0648 \u0638\u0647\u0648\u0631 Angular<\/p>\n

\u0627\u0646\u0642\u0644\u0627\u0628\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0628\u0627 \u0638\u0647\u0648\u0631 \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 \u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0631\u062e \u062f\u0627\u062f \u0648 Angular (\u062f\u0631 \u0627\u0635\u0644 AngularJS) \u06cc\u06a9\u06cc \u0627\u0632 \u067e\u06cc\u0634\u06af\u0627\u0645\u0627\u0646 \u062f\u0631 \u0627\u06cc\u0646 \u0632\u0645\u06cc\u0646\u0647 \u0628\u0648\u062f. AngularJS \u06a9\u0647 \u062a\u0648\u0633\u0637 \u06af\u0648\u06af\u0644 \u062f\u0631 \u0633\u0627\u0644 2010 \u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u060c \u0631\u0648\u06cc\u06a9\u0631\u062f \u062c\u062f\u06cc\u062f\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u067e\u0648\u06cc\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc (CSR) \u0627\u0631\u0627\u0626\u0647 \u06a9\u0631\u062f.<\/p>\n

Angular (\u0646\u0633\u062e\u0647 2+) \u06a9\u0647 \u062f\u0631 \u0633\u0627\u0644 2016 \u0645\u0646\u062a\u0634\u0631 \u0634\u062f\u060c \u0627\u06cc\u0646 \u0633\u0646\u062a \u0631\u0627 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0628\u0647 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u06af\u0627\u0646 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u06a9 \u0635\u0641\u062d\u0647 \u0627\u06cc (SPA) \u0627\u062f\u0627\u0645\u0647 \u062f\u0627\u062f. \u0627\u06cc\u0646 \u0627\u0645\u06a9\u0627\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0648 \u067e\u0627\u0633\u062e\u06af\u0648 \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc \u06a9\u0631\u062f\u060c \u0627\u0645\u0627 \u0686\u0627\u0644\u0634 \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f\u06cc \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u0647\u0645\u0631\u0627\u0647 \u062f\u0627\u0634\u062a:<\/p>\n

\u0628\u0627\u0631\u06af\u06cc\u0631\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0622\u0647\u0633\u062a\u0647 \u0628\u0647 \u062f\u0644\u06cc\u0644 \u0627\u0646\u062f\u0627\u0632\u0647 \u0628\u0632\u0631\u06af \u0628\u0627\u0646\u062f\u0644 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a.
\n\u0645\u0634\u06a9\u0644\u0627\u062a \u0628\u0627 \u0633\u0626\u0648\u060c \u0632\u06cc\u0631\u0627 \u0631\u0648\u0628\u0627\u062a \u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u06af\u0631 \u0647\u0645\u06cc\u0634\u0647 \u0646\u0645\u06cc \u062a\u0648\u0627\u0646\u0646\u062f \u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0627\u06cc\u0646\u062f\u06a9\u0633 \u06a9\u0646\u0646\u062f.
\n\u0632\u0645\u0627\u0646 \u062a\u0627 First Meaningful Paint \u0627\u0641\u0632\u0627\u06cc\u0634 \u06cc\u0627\u0641\u062a.<\/p>\n

\u0627\u062d\u06cc\u0627\u06cc SSR \u0648 \u0646\u0642\u0634 Angular Universal<\/p>\n

\u0628\u0627 \u062f\u0631\u06a9 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a \u0647\u0627\u06cc \u0631\u0648\u06cc\u06a9\u0631\u062f \u0635\u0631\u0641\u0627\u064b \u0633\u0645\u062a \u0645\u0634\u062a\u0631\u06cc\u060c \u062c\u0627\u0645\u0639\u0647 Angular \u0628\u0647 \u0627\u06cc\u062f\u0647 \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0631\u0648\u06cc \u0622\u0648\u0631\u062f\u060c \u0627\u0645\u0627 \u062f\u0631 \u0633\u0637\u062d \u062c\u062f\u06cc\u062f\u06cc. Angular Universal \u0627\u06cc\u0646\u06af\u0648\u0646\u0647 \u0645\u062a\u0648\u0644\u062f \u0634\u062f – \u0631\u0627\u0647 \u062d\u0644 \u0631\u0633\u0645\u06cc SSR \u0628\u0631\u0627\u06cc Angular.<\/p>\n

Angular Universal \u0628\u0647 \u0634\u0645\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc Angular \u0631\u0627 \u0631\u0648\u06cc \u0633\u0631\u0648\u0631 \u0631\u0646\u062f\u0631 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0645\u0634\u06a9\u0644\u0627\u062a \u06a9\u0644\u06cc\u062f\u06cc CSR \u0631\u0627 \u062d\u0644 \u0645\u06cc \u06a9\u0646\u062f:<\/p>\n

\u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0628\u0627 \u0627\u0631\u0633\u0627\u0644 HTML \u0627\u0632 \u067e\u06cc\u0634 \u0631\u0646\u062f\u0631 \u0634\u062f\u0647 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u0628\u062e\u0634\u062f.
\n\u0633\u0626\u0648 \u0631\u0627 \u0628\u0627 \u0627\u0631\u0627\u0626\u0647 \u0631\u0628\u0627\u062a \u0647\u0627\u06cc \u062c\u0633\u062a\u062c\u0648\u06af\u0631 \u0628\u0627 \u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0627\u0645\u0644 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.
\n\u0639\u0645\u0644\u06a9\u0631\u062f \u0631\u0627 \u062f\u0631 \u062f\u0633\u062a\u06af\u0627\u0647 \u0647\u0627\u06cc \u062a\u0644\u0641\u0646 \u0647\u0645\u0631\u0627\u0647 \u0648 \u0634\u0628\u06a9\u0647 \u0647\u0627\u06cc\u06cc \u0628\u0627 \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u06a9\u0646\u062f \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u0628\u062e\u0634\u062f.<\/p>\n

\u062a\u0645\u0631\u06cc\u0646 \u06a9\u0646\u06cc\u062f<\/p>\n

\u0647\u0645\u0647 \u0686\u06cc\u0632 \u062f\u0631 \u06a9\u0644\u0645\u0627\u062a \u062c\u0627\u0644\u0628 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u062f\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0633\u0639\u06cc \u06a9\u0646\u06cc\u0645 \u0622\u0646 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0622\u0646\u0686\u0647 \u06a9\u0647 \u0628\u0631\u0646\u0627\u0645\u0647 \u0628\u062f\u0648\u0646 SSR \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 “\u062e\u0627\u0644\u06cc” \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f. <\/p>\n

\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0648 \u0628\u06cc\u0634\u062a\u0631\u060c \u06a9\u062f \u0631\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u062f\u0631 \u06a9\u0646\u0633\u0648\u0644 \u062f\u0631\u062c \u06a9\u0631\u062f<\/p>\n

# \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d Angular CLI
\nnpm install -g @angular\/cli
\n# \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u0430\u0448 \u0434\u0435\u043c\u043e \u043f\u0440\u043e\u0435\u043a\u0442
\nng new no-ssr-demo<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0627\u0632 \u0645\u0627 \u062e\u0648\u0627\u0633\u062a\u0647 \u0634\u0648\u062f \u06a9\u0647 \u067e\u0627\u0631\u0627\u0645\u062a\u0631\u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u0645\u060c \u0647\u0645\u0647 \u062c\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f enter<\/p>\n

\u062f\u0631 \u06a9\u0646\u0633\u0648\u0644 \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u062e\u0631\u0648\u062c\u06cc \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u0645<\/p>\n

\u2714 Packages installed successfully.
\n Successfully initialized git.<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06af\u0631 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632 \u0628\u0648\u062f\u060c \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0648\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n

cd no-ssr-demo\/
\nnpm start<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062e\u0631\u0648\u062c\u06cc \u0628\u0627\u06cc\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0634\u06a9\u0644 \u0628\u0627\u0634\u062f<\/p>\n

\u0627\u0645\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0645\u0631\u0648\u0631\u06af\u0631 \u0648\u0642\u062a\u06cc \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u0628\u0647 \u0633\u0627\u06cc\u062a \u0645\u0627 \u062f\u0633\u062a\u0631\u0633\u06cc \u067e\u06cc\u062f\u0627 \u0645\u06cc \u06a9\u0646\u062f \u0686\u0647 \u0686\u06cc\u0632\u06cc \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc \u06a9\u0646\u062f\u060c \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f curl. \u0627\u06af\u0631 \u0627\u0647\u0644 \u0648\u06cc\u0646\u062f\u0648\u0632 \u0647\u0633\u062a\u06cc\u062f \u0641\u0642\u0637 \u0628\u0647 \u0622\u062f\u0631\u0633 \u0645\u0631\u0627\u062c\u0639\u0647 \u06a9\u0646\u06cc\u062f view-source:http:\/\/localhost:4200\/. \u0646\u062a\u06cc\u062c\u0647 \u0645\u0634\u0627\u0628\u0647 \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f<\/p>\n

# \u0412\u0430\u0436\u043d\u043e! \u0432\u0430\u0448 \u0441\u0430\u0439\u0442 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0437\u0430\u043f\u0443\u0448\u0435\u043d \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u043f\u043e\u0440\u0442\u0443, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u0442\u0430\u043a, \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u0435 4200 \u043d\u0430 \u0432\u0430\u0448 \u043f\u043e\u0440\u0442
\ncurl localhost:4200<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0686\u0647 \u0646\u062a\u06cc\u062c\u0647 \u0627\u06cc \u06af\u0631\u0641\u062a\u06cc\u0645\u061f<\/p>\n

NoSsrDemo<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062d\u0627\u0644\u0627 \u0628\u0631\u06cc\u0645 \u0633\u0631\u0627\u063a \u0645\u0631\u0648\u0631\u06af\u0631 \u0648 \u0645\u0642\u0627\u06cc\u0633\u0647 \u06a9\u0646\u06cc\u0645 html<\/p>\n

\u0628\u0631\u0686\u0633\u0628 \u0645\u0627 app-root \u0627\u0648 \u0628\u0627 \u06a9\u0645\u06a9 Angular \u062a\u0628\u062f\u06cc\u0644 \u0628\u0647 \u06cc\u06a9 \u0642\u0648 \u0632\u06cc\u0628\u0627 \u0634\u062f \u06a9\u0647 \u0645\u062a\u0627\u0633\u0641\u0627\u0646\u0647 \u0631\u0628\u0627\u062a \u0628\u06cc \u0631\u0648\u062d \u0622\u0646 \u0631\u0627 \u0646\u062e\u0648\u0627\u0647\u062f \u062f\u06cc\u062f. \u0627\u0645\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u06cc\u0646 \u0631\u0627 \u0628\u0631\u0637\u0631\u0641 \u06a9\u0646\u06cc\u0645\u060c \u0628\u0631\u0627\u06cc \u0645\u062b\u0627\u0644\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u06a9\u0648\u0686\u06a9 \u0628\u0633\u0627\u0632\u06cc\u0645 \u06a9\u0647 \u0628\u062a\u0648\u0627\u0646 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0646\u0648\u0634\u062a markdown<\/p>\n

\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af Markdown \u0633\u0627\u062f\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 Angular \u0648 SSR<\/p>\n

\u0627\u06af\u0631 \u0645\u0631\u0627\u062d\u0644 \u0628\u0627\u0644\u0627 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0631\u062f\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0635\u0631\u0641 \u0646\u0638\u0631 \u06a9\u0646\u06cc\u062f<\/p>\n

npm install -g @angular\/cli<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0627 \u062f\u0631 \u062d\u0627\u0644 \u0627\u06cc\u062c\u0627\u062f \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u062f \u0647\u0633\u062a\u06cc\u0645. \u0628\u0647 \u0633\u0648\u0627\u0644 ? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG\/Prerendering)? (y\/N) \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f yes \u06cc\u0627 y<\/p>\n

ng new my-blog –routing –style=scss
\ncd my-blog<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u067e\u0633 \u0627\u0632 \u062e\u0631\u0648\u062c\u06cc \u0645\u0648\u0641\u0642\u06cc\u062a \u0622\u0645\u06cc\u0632\u060c \u0628\u0627\u06cc\u062f \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0631\u0627 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f marked\u060c \u06a9\u0647 \u0645\u0627 \u0631\u0627 \u062a\u062c\u0632\u06cc\u0647 \u0645\u06cc \u06a9\u0646\u062f mardown<\/p>\n

npm install marked<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0648\u0644\u06cc\u0646 \u0642\u062f\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u0646\u0627\u0628\u0639 \u0646\u0645\u0627\u06cc\u0634 \u0648 \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0633\u0631\u0648\u0631 \u0627\u0633\u062a<\/p>\n

\/\/ \u043f\u0430\u043f\u043a\u0430 \u0441 \u043d\u0430\u0448\u0438\u043c\u0438 \u0444\u0430\u0439\u043b\u0430\u043c\u0438 .md
\nconst articlesFolder = resolve(serverDistFolder, ‘..\/..\/..\/articles’);<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0632\u06cc\u0631 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0645\u06cc \u06a9\u0646\u06cc\u0645 API \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0622\u0646\u0647\u0627<\/p>\n

server.get(‘\/api\/articles’, async (req, res) => {
\n try {
\n const files = await fs.readdir(articlesFolder);<\/p>\n

const articlePromises = files
\n .filter((file) => file.endsWith(‘.md’))
\n .map(async (file) => {
\n const filePath = path.join(articlesFolder, file);
\n try {
\n const fileData = await fs.readFile(filePath, ‘utf8’);
\n return {
\n fileName: file.replace(‘.md’, ”),
\n content: fileData.split(‘\\n’).slice(0, 150),
\n };
\n } catch (err) {
\n console.error(`Error reading file ${file}:`, err);
\n return null;
\n }
\n });<\/p>\n

const articles = await Promise.all(articlePromises);
\n res.json(articles.filter((article) => article !== null));
\n } catch (err) {
\n console.error(‘Error scanning directory:’, err);
\n res.status(500).json({ error: ‘Unable to scan directory’ });
\n }
\n });<\/p>\n

server.get(‘\/api\/articles\/:name’, (req, res) => {
\n const fileName = req.params.name + ‘.md’;
\n const filePath = path.join(articlesFolder, fileName);<\/p>\n

fs.readFile(filePath, ‘utf8’)
\n .then((data) => res.send(data))
\n .catch(() => res.status(404).send(‘Article not found’));
\n });<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0631\u06cc\u0634\u0647 \u067e\u0631\u0648\u0698\u0647\u060c \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f articles \u06a9\u0647 \u062f\u0631 \u0622\u0646 1-2 \u0641\u0627\u06cc\u0644 \u0628\u0627 \u067e\u0633\u0648\u0646\u062f md<\/p>\n

\u067e\u0633 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u062f\u0633\u062a\u0648\u0631 npm run build && npm run serve:ssr:my-blog \u0633\u0631\u0648\u0631 \u0634\u0631\u0648\u0639 \u0628\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f (\u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0627 \u062f\u0642\u062a) \u067e\u0633 \u0627\u0632 \u0647\u0631 \u0627\u0635\u0644\u0627\u062d\u060c \u062f\u0633\u062a\u0648\u0631 \u0628\u0627\u06cc\u062f \u062f\u0648\u0628\u0627\u0631\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u0634\u0648\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0642\u0633\u0645\u062a \u062c\u0644\u0648\u06cc\u06cc \u0631\u0627 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u06cc\u0645 \u0648 \u0647\u0631 \u0628\u0627\u0631 \u0628\u06cc\u0644\u062f \u0646\u0646\u0648\u06cc\u0633\u06cc\u0645\u060c \u0628\u0627\u06cc\u062f \u0622\u0646 \u0631\u0627 \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u0645 \u0648 \u062c\u062f\u0627\u06af\u0627\u0646\u0647 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645. npm run start\u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0633\u0642\u0648\u0637 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u0647\u0627\u060c \u0628\u0627\u06cc\u062f \u0641\u0639\u0627\u0644 \u06a9\u0646\u06cc\u062f server.use(cors()); (\u062e\u0648\u0628\u060c \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u0631\u0627 \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0622\u0646 \u0646\u0635\u0628 \u06a9\u0646\u06cc\u062f)<\/p>\n

\u06a9\u0627\u0631 \u06a9\u062b\u06cc\u0641 \u062a\u0645\u0627\u0645 \u0634\u062f\u0647 \u0627\u0633\u062a\u060c \u0627\u06a9\u0646\u0648\u0646 \u0645\u0627 \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u062f\u0627\u0631\u06cc\u0645 \u06a9\u0647 \u0645\u062d\u062a\u0648\u0627\u06cc \u06cc\u06a9 \u0645\u0642\u0627\u0644\u0647 \u062e\u0627\u0635 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f\u060c \u0628\u0631\u0627\u06cc \u0647\u0645\u0647 \u06cc\u06a9 \u0645\u062d\u062a\u0648\u0627\u06cc \u06a9\u0648\u0686\u06a9 (150 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631 \u0627\u0648\u0644) \u0648 \u0646\u0627\u0645 \u0641\u0627\u06cc\u0644 \u0631\u0627 \u0628\u0631\u0645\u06cc \u06af\u0631\u062f\u0627\u0646\u062f.<\/p>\n

\u0628\u0631\u06cc\u0645 \u062c\u0644\u0648 \u0631\u0648 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645 \u0648 \u0627\u0648\u0644 \u0627\u0632 \u0647\u0645\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 \u0648 \u0627\u06cc\u0645\u067e\u0648\u0631\u062a \u0647\u0627 \u0631\u0648 \u0627\u0635\u0644\u0627\u062d \u06a9\u0646\u06cc\u0645 (\u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646 \u0628\u0647 \u067e\u0648\u0634\u0647 \u0628\u0627 src\/app \u062e\u0648\u0628\u060c \u0628\u0631\u0627\u06cc \u0647\u0631 \u06cc\u06a9 \u067e\u0648\u0634\u0647 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f)<\/p>\n

ng g c ArticleComponent
\nng g c HomeComponent<\/p>\n

#\u0440\u0435\u0437\u043e\u043b\u0432\u0435\u0440\u044b
\nng g r ArticleResolver
\nng g r arcticlesResolver<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

export const routes: Routes = [
\n {
\n path: ‘article\/:slug’,
\n component: ArticleComponent,
\n resolve: {
\n content: ArticleResolver,
\n },
\n },
\n {
\n path: ”,
\n component: HomeComponent,
\n resolve: {
\n content: arcticlesResolver
\n },
\n },
\n];<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0645\u0642\u0627\u0644\u0647<\/p>\n

import { AsyncPipe, NgIf } from ‘@angular\/common’;
\nimport { Component, inject } from ‘@angular\/core’;
\nimport { toSignal } from ‘@angular\/core\/rxjs-interop’;
\nimport { ActivatedRoute } from ‘@angular\/router’;
\nimport { map } from ‘rxjs’;<\/p>\n

@Component({
\n selector: ‘app-article’,
\n standalone: true,
\n imports: [AsyncPipe, NgIf],
\n template: `<\/p>\n

`
\n})
\nexport class ArticleComponent {
\n readonly #route = inject(ActivatedRoute);<\/p>\n

content = toSignal(this.#route.data.pipe(map(({ content }) => content)));
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

ArticleResolver<\/p>\n

import { inject, Injectable } from ‘@angular\/core’;
\nimport { SafeHtml } from ‘@angular\/platform-browser’;
\nimport { ActivatedRouteSnapshot, Resolve } from ‘@angular\/router’;
\nimport { Observable } from ‘rxjs’;
\nimport { MarkdownService } from ‘..\/..\/services\/markdown.service’;<\/p>\n

@Injectable({ providedIn: ‘root’})
\nexport class ArticleResolver implements Resolve {
\n readonly #markdownService = inject(MarkdownService);<\/p>\n

resolve(route: ActivatedRouteSnapshot): Observable {
\n const article = route.paramMap.get(‘slug’) ?? ”;
\n return this.#markdownService.getMarkdownFromServer(article);
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc<\/p>\n

import { HttpClient } from ‘@angular\/common\/http’;
\nimport { Component, inject } from ‘@angular\/core’;
\nimport { toSignal } from ‘@angular\/core\/rxjs-interop’;
\nimport { ActivatedRoute, ResolveFn, RouterModule } from ‘@angular\/router’;
\nimport { map } from ‘rxjs’;
\nimport { ArticlePreviewComponent } from ‘..\/article-preview\/article-preview.component’;<\/p>\n

interface Article {
\n fileName: string;
\n content: string;
\n}<\/p>\n

export const arcticlesResolver: ResolveFn = () => {
\n const http = inject(HttpClient);<\/p>\n

return http.get(‘http:\/\/localhost:4000\/api\/articles’);
\n};<\/p>\n

@Component({
\n selector: ‘app-home’,
\n standalone: true,
\n imports: [RouterModule, ArticlePreviewComponent],
\n styleUrl: ‘.\/home.component.scss’,
\n template: `<\/p>\n

@for (item of articles(); track item) {<\/p>\n

}
\n `,
\n})
\nexport class HomeComponent {
\n readonly #route = inject(ActivatedRoute);<\/p>\n

articles = toSignal(
\n this.#route.data.pipe(map(({ content }) => content as Article[]))
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0645\u0642\u0627\u0644\u0647<\/p>\n

import { AsyncPipe, DatePipe } from ‘@angular\/common’;
\nimport {
\n ChangeDetectionStrategy,
\n Component,
\n inject,
\n input,
\n} from ‘@angular\/core’;
\nimport { toSignal } from ‘@angular\/core\/rxjs-interop’;
\nimport { RouterLink } from ‘@angular\/router’;
\nimport { MarkdownService } from ‘..\/..\/services\/markdown.service’;<\/p>\n

@Component({
\n selector: ‘app-article-preview’,
\n standalone: true,
\n changeDetection: ChangeDetectionStrategy.OnPush,
\n imports: [RouterLink, DatePipe, AsyncPipe],
\n template: `<\/p>\n

{{ name() }}
\n {{ rendered() }}<\/p>\n

\u041e\u043f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u043d\u043e {{ currentDate | date : ‘medium’ }}<\/p>\n

`,
\n styles: `
\n :host {
\n cursor: pointer;
\n }
\n `,
\n})
\nexport class ArticlePreviewComponent {
\n readonly #markdownService = inject(MarkdownService);<\/p>\n

name = input();
\n content = input();
\n currentDate = new Date();<\/p>\n

rendered = toSignal(
\n this.#markdownService.parseMarkdown(this.content() ?? ”)
\n );
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

MarkdownService<\/p>\n

import { HttpClient } from ‘@angular\/common\/http’;
\nimport { inject, Injectable } from ‘@angular\/core’;
\nimport { DomSanitizer, SafeHtml } from ‘@angular\/platform-browser’;
\nimport { marked } from ‘marked’;
\nimport { from, Observable, of } from ‘rxjs’;
\nimport { map, switchMap } from ‘rxjs\/operators’;<\/p>\n

@Injectable({
\n providedIn: ‘root’,
\n})
\nexport class MarkdownService {
\n readonly #http = inject(HttpClient);
\n readonly #sanitizer = inject(DomSanitizer);<\/p>\n

getMarkdownFromServer(file: string): Observable {
\n return this.#http
\n .get(`http:\/\/localhost:4000\/api\/articles\/${file}`, {
\n responseType: ‘text’,
\n })
\n .pipe(
\n switchMap((res) => {
\n const parsed = marked.parse(res);
\n return typeof parsed === ‘string’ ? of(parsed) : from(parsed);
\n }),
\n map((html) => this.#sanitizer.bypassSecurityTrustHtml(html)),
\n );
\n }<\/p>\n

parseMarkdown(content: string): Observable {
\n return of(content).pipe(
\n map((markdown) => {
\n console.log(markdown);
\n return marked.parse(markdown);
\n }),
\n map((html) => this.#sanitizer.bypassSecurityTrustHtml(html as string))
\n );
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631 \u0627\u06cc\u0646 \u0645\u0631\u062d\u0644\u0647 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0628\u0627\u06cc\u062f \u06a9\u0627\u0631 \u06a9\u0646\u062f\u060c \u0627\u06af\u0631 \u06a9\u0627\u0631 \u0646\u06a9\u0631\u062f\u060c \u063a\u0645 \u0627\u0646\u06af\u06cc\u0632 \u0627\u0633\u062a\u060c \u0622\u0646 \u0631\u0627 \u0627\u0645\u062a\u062d\u0627\u0646 \u06a9\u0646\u06cc\u062f\u060c \u06af\u0631\u06cc\u0647 \u06a9\u0646\u06cc\u062f\u060c \u0628\u0631\u0627\u06cc \u0645\u0646 \u0647\u0645 \u06a9\u0627\u0631 \u0646\u0645\u06cc \u06a9\u0646\u062f\u060c \u06a9\u062f \u0627\u06cc\u0646\u062c\u0627\u0633\u062a https:\/\/github.com\/alaev-dev\/my-blog\u0627\u0645\u0627 \u0686\u0647 \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u06cc\u0645<\/p>\n

\u0648\u0627\u0642\u0639\u06cc \u0648\u0627\u0642\u0639\u06cc html\u060c \u06a9\u0647 \u0628\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0647\u0627\u06cc \u06a9\u0648\u0686\u06a9 js<\/p>\n

\n

\u062f\u0631 \u062f\u0646\u06cc\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u0648\u0628\u060c \u0641\u0646\u0627\u0648\u0631\u06cc \u0628\u0631\u0627\u06cc \u06cc\u0627\u0641\u062a\u0646 \u062a\u0639\u0627\u062f\u0644 \u0628\u0647\u06cc\u0646\u0647 \u0628\u06cc\u0646 \u0639\u0645\u0644\u06a9\u0631\u062f\u060c \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0648 \u06a9\u0627\u0631\u0627\u06cc\u06cc \u062a\u0648\u0633\u0639\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0645\u062f\u0627\u0648\u0645 \u062f\u0631 \u062d\u0627\u0644 \u062a\u06a9\u0627\u0645\u0644 \u0627\u0633\u062a. \u06cc\u06a9\u06cc \u0627\u0632 \u0641\u0646\u0627\u0648\u0631\u06cc \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06cc \u06a9\u0647 \u062a\u0648\u0633\u0639\u0647 \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u0647\u06cc \u062f\u0627\u0634\u062a\u0647 \u0627\u0633\u062a\u060c \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 (SSR) \u06cc\u0627 \u0631\u0646\u062f\u0631 \u0633\u0645\u062a \u0633\u0631\u0648\u0631 \u0627\u0633\u062a. \u0686\u0627\u0631\u0686\u0648\u0628 Angular \u0646\u0642\u0634 \u0645\u0647\u0645\u06cc \u062f\u0631 \u0627\u06cc\u0646 \u062a\u06a9\u0627\u0645\u0644 \u0627\u06cc\u0641\u0627 \u06a9\u0631\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n