با تکرار فعلی اکوسیستم وب، بسیاری از فریم ورک ها رویکرد اول سرور را برای ساختن برنامه ها و وب سایت ها اتخاذ می کنند. این تا حد زیادی از طریق فریم‌ورک‌های متا، مانند Next.JS، SvelteKit، Nuxt، Qwik City و غیره انجام می‌شود. این متا فریم‌ورک‌ها دارای ویژگی‌هایی مانند مسیریابی مبتنی بر سیستم فایل، رندر سمت سرور، تولید سایت استاتیک، مسیرهای API داخلی و موارد بیشتر در تجربه توسعه‌دهنده هستند.
آنالوگ متا چارچوبی است که به شما کمک می کند برنامه ها و وب سایت ها را سریعتر با Angular ارسال کنید.
امکانات
آنالوگ در بالای Angular با قابلیت های اضافی از جمله:
بیایید شیرجه بزنیم!
شروع 🤓
برای ایجاد یک پروژه آنالوگ جدید، می توانید از create-analog بسته با مدیر بسته انتخابی شما:
npm create analog@latest analog-app
cd analog-app
شما همچنین می توانید یک پروژه جدید را با Nx داربست کنید.
وابستگی ها را نصب کنید:
npm install
و برنامه را ارائه دهید:
npm start
برای مشاهده برنامه در حال اجرا در مرورگر خود به http://localhost:5173 بروید.
برای ساخت برای استقرار، دستور build را اجرا کنید:
npm run build
مسیریابی مبتنی بر سیستم فایل 🤖
آنالوگ مسیریابی مبتنی بر سیستم فایل را در بالای روتر Angular فراهم می کند.
برای مثال برای تعریف a /about مسیر، یک فایل به نام ایجاد کنید src/app/pages/about.page.ts در پروژه آنالوگ
بعد، یک جزء Angular مستقل اضافه کنید:
import { Component } from '@angular/core';
@Component({
selector: 'app-about',
standalone: true,
template: `
<h2>Hello Analog</h2>
Analog is a meta-framework on top of Angular.
`,
})
export default class AboutPageComponent {}
تغییرات را ذخیره کنید و مسیر شما بدون هیچ گونه پیکربندی اضافی وجود دارد!
برای دیدن صفحه درباره، به http://localhost:5173/about بروید.
آنالوگ همچنین از مسیرهای ثابت، مسیرهای پویا، مسیرهای تودرتو، مسیرهای فراگیر و غیره پشتیبانی می کند.
مسیرهای API 🧑🔧
آنالوگ از تعریف مسیرهای API پشتیبانی می کند که می توانند برای ارائه داده به برنامه استفاده شوند.
مسیرهای API در تعریف شده است src/server/routes پوشه مسیرهای API نیز مبتنی بر سیستم فایل هستند و تحت پیش فرض قرار می گیرند /api پیشوند در حال توسعه
به عنوان مثال، برای تعریف یک مسیر API برای ارسال پیام “Hello Word” به عنوان JSON:
ایجاد یک src/server/routes/v1/hello.ts فایل
import { defineEventHandler } from 'h3';
export default defineEventHandler(() => {
return { message: 'Hello World' };
});
تغییرات را ذخیره کنید و اکنون می توانید به این مسیر API دسترسی پیدا کنید /api/v1/hello. پایگاه داده ها را پرس و جو کنید، به CMS خود متصل شوید و سایر اقدامات را روی سرور انجام دهید.
رندر سمت سرور و تولید سایت استاتیک 📈
رندر سمت سرور و تولید استاتیک می تواند برنامه Angular شما را از نظر سئو و عملکرد بهبود بخشد. آنالوگ به طور پیش فرض از رندر سمت سرور و تولید سایت استاتیک خارج از جعبه پشتیبانی می کند.
برای ساخت برای استقرار، دستور build را اجرا کنید:
npm run build
برای پیش رندر کردن صفحات، آنها را در قسمت پیکربندی کنید vite.config.ts در ریشه پروژه:
import { defineConfig } from 'vite';
import analog from '@analogjs/platform';
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
plugins: [
analog({
prerender: {
routes: async () => [
'/',
'/about',
'/blog',
'/blog/posts/2023-06-28-my-first-post',
],
},
}),
],
}));
این مسیرها در زمان ساخت به HTML ایستا از قبل رندر می شوند و قبل از بارگیری برنامه Angular برای مشتری ارسال می شوند و تجربه کاربری بهتری را ارائه می دهند. سپس برنامه Angular بارگذاری می شود و یک تجربه کاربر تعاملی مداوم برای وب سایت یا برنامه ارائه می دهد.
استقرار 🚀
همچنین می‌توانید برنامه‌های آنالوگ را در بسیاری از ارائه‌دهندگان مختلف با پیکربندی کم یا بدون پیکربندی از جمله Netlify، Vercel، Firebase و موارد دیگر مستقر کنید.
برای کسب اطلاعات بیشتر به اسناد استقرار مراجعه کنید.
اسپانسر آنالوگ 💰
آنالوگ یک پروژه منبع باز دارای مجوز MIT است، اما تلاش مورد نیاز برای حفظ این پروژه از طریق حمایت ها و مشارکت ها پشتیبانی می شود. ما به دنبال حمایت مالی و مشارکت برای حمایت از توسعه آینده پروژه هستیم.
حمایت مالی از پروژه آنالوگ را در نظر بگیرید.
اگر کسب‌وکاری هستید که از انگولار برای ساختن یک محصول درآمدزا استفاده می‌کنید، حمایت مالی از آنالوگ و توسعه آن نیز به علایق شما در پیشبرد آنالوگ و انگولار کمک می‌کند. اگر فردی هستید که از پروژه‌های منبع باز پشتیبانی می‌کنید، می‌توانید در آنالوگ حمایت مالی و مشارکت کنید.
به انجمن بپیوندید🤝
اگر این را دوست داشتید، روی ❤️ کلیک کنید تا دیگران آن را ببینند. دنبال کردن من در توییتر و برای محتوای Angular، Analog، NgRx و موارد دیگر در کانال YouTube من مشترک شوید!
