کار با Angular (قسمت اول)
در این مقاله به موضوعات اصلی برای کار با Angular می‌پردازیم
پوشه app
تا به حال کدهای اصلی مربوط به برنامه را (قرار گرفته در پوشه app) ندیده‌ایم – پس بیایید کار با Angular را شروع کنیم!
همانطور که قبلاً گفته شد، عمده فعالیت‌های ما در هنگام کار با Angular در پوشه app و پوشه داخلی آن با نام src انجام می‌شود، بنابراین بیایید این پوشه را دقیق‌تر بررسی کنیم
پوشه app نقطه ورود برای کدنویسی برنامه شما در هنگام کار با Anglar می‌باشد. هنگامی که برنامه شما اجرا (بوت استرپ) می شود از تمامی فایل‌های این پوشه استفاده می شود.
این پوشه در ترکیب با فایل index.html کار می‌کند، این فایل برخی مقادیر را به کدهای ما وارد کرده و در تگ body مقادیر زیر وجود دارد:
|
1 2 3 |
<body> <app-root></app-root> </body> |
این جایی است که برنامه شما در آن بارگذاری می شود!
به ندرت نیاز می‌شود این فایل را تغییر کنید، اما بهتر است از کارکرد آن در هنگام کار با Angular مطلع باشید.
صفحات (pages)
برنامه ما از کامپوننت‌های مختلف یا صفحاتی (pages) تشکیل شده است که توسط ماژول‌ها در فریمورک Angular سازماندهی می‌شوند
پس از راه‌اندازی برنامه و شروع کار با Angular، ما یک صفحه در داخل پوشه‌ای به نام home داریم. اگر در پروژه ionic صفحه‌ای را ایجاد کنید، این صفحه با فایل‌های زیر به پروژه شما اضافه خواهد شد:
- routing.module.ts: در این فایل مسیرهای مربوط به این صفحه تعریف می‌شود
- module.ts: در این فایل شما کامپوننت را معرفی و import می‌کنید
- page.html: قالب صفحه شما در این فایل تعریف می‌شود
- page.scss: استایل‌دهی به قالب صفحه شما در این فایل تعریف می‌شود
- page.spec.ts: این فایل برای تست صفحه بکار گرفته می‌شود
- page.ts: کنترلر مربوط به قالب در این فایل تعریف می‌شود
همانطور که دیدیم هر صفحه از بخش‌های مختلفی تشکیل شده است که این بخش‌ها به یکدیگر در هنگام کار با Angular متصل می‌باشند.
در فایل SCSS می توانید قالب خود را استایل دهی نمایید همچنین صفحه HTML نمایانگر view شما است و فایل Page.ts شامل کلاسی است که با view شما مرتبط است.
ارتباط بین view و class به کار با Angular مربوط می‌شود و نیازی به اضافه کردن چیزی برای این ارتباط نداریم. فایل home.page.ts شما به این شکل خواهد بود:
|
1 2 3 4 5 6 7 8 9 10 |
import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor() {} } |
برای برنامه‌نویسان جاوا اسکریپت یا توسعه دهندگان وب در هنگام کار با Angular، این موضوع شبیه شی‌گرایی می‌باشد و برای توسعه دهندگان اپلیکیشن‌های native نیز تا حدی زیادی آشنا به نظر می رسد!
دکوراتور Component@ به صورت داخلی توسط Angular استفاده می‌شود و نیازی نیست در اینجا چیزی را تغییر دهیم، import ها در بالای صفحه اجزای مختلفی را از بسته‌های NPM دیگر وارد می‌کند که تعداد دیگری از آنها را در مقالات بعدی مشاهده خواهید کرد.
برای مطالعه بیشتر در این زمینه اینجا کلیک کنید
برای مطالعه مقاله مربوط به ساختار پروژه‌های ionic اینجا کلیک کنید