معرفی ساختار انگولار و ویرایش اولین برنامه

14 آبان 1397
angular-structure

با مطالعه‌ی فصل گذشته اطلاعات نسبتا کلی در ارتباط با انگولار و انواع نسخه های آن بدست آوردید. سپس با اعمال یک سری دستور سیستم مدیریت پکیج یا NPM و سیستم مدیریت خط فرمان انگولار تحت عنوان Angular CLI، را نصب کردید. در نهایت پس از انجام تمام این مراحل با وارد کردن آدرس http://localhost:4200 به صفحه اولین پروژه انگولار خود وارد شده و پیام app Works که به معنای کار کردن نرم‌ افزار شماست، را مشاهده کردید.

حال در ادامه به توضیح ساختار پوشه بندی انگولار و همچنین نحوه‌ی ویرایش آنها می‌پردازیم.

فایل‌های انگولار

پس از نصب انگولار یک پوشه که نام آن را خودتان مشخص کرده‌ اید در مسیر مورد نظرتان ایجاد می‌گردد. توضیح هر یک از این فایل‌ها به صورت زیر است:

پوشه e2e: به عنوان یک پوشه برای تست کردن پروژه مورد استفاده قرار می‌گیرد که مخفف عبارت End 2 End است.

پوشه src: به عنوان پوشه اصلی نرم‌افزار شما محسوب شده که درون آن فایل‌هایی با فرمت‌های html و ts و ... وجود دارند و اصلی‌ ترین فایل آن به نام index.html است که بدنه‌ی اصلی نرم‌ افزار می‌باشد.

سایر فایل‌ها: به عنوان فایل‌های برای تنظیمات نرم‌افزار بوده که اغلب به صورت پیش فرض توسط خط فرمان Angular CLI ایجاد شده است.

محتویات درون پوشه src

این پوشه شامل یک سری فایل‌های ویژه است که برای اجرای نرم‌ افزار شما مورد استفاده قرار می‌گیرند همانطور که قبلا ذکر کردیم مهم‌ترین فایل موجود تحت عنوان index.html در ریشه یا root این پوشه قرار دارد و با کلیک روی آن می‌توانید محتویات درون آن را ملاحظه بفرمایید. علاوه بر این یک سری پوشه‌های دیگر درون src وجود دارند که شرح هر کدام از آنها به صورت زیر است:

پوشه app: این پوشه به عنوان قلب کنترلی اصلی نرم‌ افزار معرفی می‌شود و شامل کامپوننت‌ های نرم‌افزار شما می‌باشد.

پوشه assets: از این پوشه معمولا برای قرار دادن تصاویر و سایر فایل‌های جانبی استفاده می‌کنند.

پوشه environment: درون این پوشه معمولا متغییرهای مربوط به محیط نرم‌افزار تنظیم می‌شود که به صورت پیش فرض ثابت می‌باشند و در طول این سری از دوره‌ های آموزشی کمتر به آن می‌پردازیم.

کار کردن با محیط انگولار

برای ایجاد یک سری عملیات مقدماتی در پروژه خود نیاز داریم تا تغییراتی را ایجاد کرده و در وهله‌ی اول با محیط ساختاری انگولار آشنا شویم.

هنگامیکه شما آدرس http://localhost:4200 را وارد می‌کنید با عبارت app works روبه‌رو خواهید شد. البته در نسخه‌های جدید این فریم‌ورک یک آرم از انگولار ۴ مشابه تصویر زیر ملاحظه می‌کنید:

صفحه اولیه انگولار به هنگام نصب

برای ایجاد تغییرات روی این صفحه کافی‌ست وارد پوشه‌ی app شده و روی فایل app.component.ts کلیک نمایید. پسوند ts مخفف عبارت TypeScript می باشد که در ادامه بیشتر درباره آن بحث می‌کنیم. بنابراین محتویات فایل app.component.ts به صورت زیر خواهد بود:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

در صورتیکه مقدار عبارت روبه‌روی title را به عبارت roxo App یا هر عنوان دلخواه دیگری تغییر دهید. عنوان بالای آرم انگولار به Welcome to roxo App!! تغییر می‌کند.

چقدر جالب! شما هم به این نکته پی بردید که بدون اینکه صفحه را مجددا بارگذاری کنید به صورت خودکار تغییرات اعمال شده پس از ذخیره کردن فایل خود به خود در صفحه مرورگر نمایش داده می‌شود.

این قابلیت توسط سرور Nodejs برای شما فراهم شده است تا در سریع‌ترین زمان ممکن تغییرات موردنظر خود را به صورت آنلاین و در لحظه مشاهده کنید. در اصطلاح به این حالت watch یا watch-poll گفته می‌شود. یعنی سرور به حالت انتظار می‌نشیند تا پس از اعمال اولین تغییرات در صفحه، سریعا آن را نمایش دهد.

در پوشه‌ app یک فایل دیگر تحت عنوان app.component.html وجود دارد که به عنوان فایل html برای کامپوننت app همواره و در طول برنامه مورد استفاده قرار می‌گیرد. اگر این فایل را باز کنید محتویات آن به صورت زیر خواهد بود:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{title}}!!
  </h1>
  <img width="300" src="data:">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" href="http://angularjs.blogspot.ca/">Angular blog</a></h2>
  </li>
</ul>

همانطور که ملاحظه می‌کنید تمام اطلاعات مربوط به صفحه اصلی که در آدرس http://localhost:4200 مشاهده می‌کنید، در این بخش قرار گرفته است!

در ابتدای این فایل عبارت welcome to درج شده و سپس دستوری آشنا با عنوان {{title}} بعد از آن قرار گرفته است. در واقع اگر تمام داده‌ها و متغییرهای موجود در انگولار و زبان typescript درون دو کروشه یا {{  }} درج و در فایل html قرار داده شوند، در صفحه مانیتور نمایش داده خواهند شد.

به عبارت دیگر دستور {{ }} همانند دستور print کار می‌کند یعنی متغییر را نمایش می‌دهد.

بنابراین اگر title درون کنترلر (app.component.ts) را تغییر دهیم، اطلاعات به صفحه View (صفحه ای با پسوند html. برای هر کامپوننت) ارسال شده و سپس در آن نمایش داده خواهد شد.

حال تمام دستور‌های موجود در صفحه‌ی app.component.html را پاک کرده تا تغییراتی دلخواه را در این صفحه اعمال کنیم. سپس مجموعه‌ی کد زیر را به صفحه خود اضافه نمایید:

<input type="text" [(ngModel)]="title">
<p>{{title}}</p>

با بررسی این مثال متوجه خواهید شد که یک عبارت نامعلوم و نامشخص برای شما به صورت ngModel ایجاد شده است. هرچند در ادامه و فصل‌های بعدی به توضیح دقیق این مباحث می‌پردازیم اما مختصری درباره مدل ها می گوییم:

ngModel چیست؟

ngModel به عنوان یک دستور یا directive در انگولار معرفی می شود که وظیفه‌ی حمل اطلاعات را به عهده دارد.

یعنی اگر در یک input که به عنوان ورودی اطلاعات است یک صفت تحت عنوان ngModel اضافه کنیم، اطلاعاتی که درون آن text نوشته می‌شوند توسط ngModel به متغییر درون آن یعنی title چسبیده و سپس در هر قسمتی که نام آن متغییر یا ویژگی را ذکر کنیم، آن اطلاعات نمایش داده خواهند شد.

در مثال فوق متغییر یا ویژگی title که در ابتدا عبارت Roxo App را با خود حمل می‌کرد، حال با استفاده از دستور ngModel اطلاعات دریافتی از input text را جایگزین مقادیر قبلی کرده و سپس در تگ پاراگراف <p> نمایش می‌دهد.

برای فعال‌سازی این نحوه‌ی نگه‌داری اطلاعات و نمایش آنها باید از یک ساختار یا ماژول استفاده کنیم.

بنابراین ابتدا وارد فایل app.module شده و سپس این فایل را به صورت زیر ویرایش می‌کنید:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';// ----> اضافه شده است

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule // ----> اضافه شده است
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

همانطور که ملاحظه می‌کنید ساختار فرم‌ها را برای پروژه خود قابل فهم کردیم تا بتوانیم از دستورهای موردنیاز به هنگام کار کردن با المان‌ها و اجزای فرم‌ها استفاده کنیم.

بنابراین خروجی ما به صورت زیر خواهد بود:

نمایش ngModel در ورودی input

همانطور که در خروجی مشاهده می‌کنید به ازای هر نوشته‌ای که درون input text نوشته شود، سریعا مقدار موردنظر در تگ <p> نمایش داده خواهد شد.

شگفت زده شده‌اید؟؟ درسته دقیقا همینطوره، کاری که یک فریم ورک جاوا اسکریپت انجام می‌دهد، همزمان کردن ساختار برنامه‌ است.

یعنی بدون اینکه صفحه رفرش شود به صورت همزمان و Real-Time اطلاعات برای شما نمایش داده خواهد شد. اگر بخواهید همچین کدی را با زبان جاو اسکریپت بنویسید باید ساعتها زمان گذاشته و صدها خط کدنویسی انجام بدهید.

قبل از اینکه این آموزش را به پایان ببرید از تمام شما عزیزان درخواست می‌کنم که مقاله‌های زیر را جهت آشنایی با زبان تایپ اسکریپت (TypeScript) به صورت کامل مطالعه بفرمایید و سپس وارد فصل ۲ شوید.

معرفی TypeScript (تایپ اسکریپت)

توجه: دوستان عزیز آموزش ویدیویی انگولار 6 از مقدماتی تا پیشرفته به زبان فارسی را می‌توانید با کلیک روی اینجا یاد بگیرید.

دوره آموزش انگولار به زبان فارسی + پروژه ساخت فروشگاه اینترنتی

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش رایگان انگولار توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما (5 دیدگاه)

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

R
01 شهریور 1397
سلام، بابت آموزش ممنون خیلی خوب آموزش دادید. ولی من طبق کارهایی که نوشتید رو انجام میدم ولی تغییری توی خروجیم نمیبینم

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

حمید
20 دی 1396
نکته ای که به نظر می آد مهم هست اینه که در انگولار جی اس، ng-model داشتیم و حالا در انگولار ngModel، یعنی dash از نام مدل حذف شده است توجه به اسم این کامپوننت ها هم مهم هست، همونطور که می دونید انگولار از الگوی MVC استفاده می کنه، در این الگو Model رابطی برای برقراری ارتباط با داده ها هست، V که مخفف View هست، رابطی برای نمایش داده ها و C که مخفف Controller هست، رابطی برای محاسبات منطقی برنامه و یا به عبارتی کنترل برنامه هست. دونستن اینکه چرا نامگذاری ها به این شکل هست، میتونه به ما کمک کنه که یادمون بمونه در هر بخش باید از چه کامپوننتی استفاده کرد. مثلاً در مثال همین بخش، چون input ما قرار بود داده درون خودش رو در title نشون بده از نام model استفاده شد، چرا که همونطور که گفتیم model برای برقراری ارتباط با داده ها بود.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

سبحان
02 شهریور 1396
با سلام و درود... ممنون از اموزش ساده و کاملتون

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

Morteza
26 تیر 1396
سلام ممنون بابت آموزش خوبتون اگر امکانش هست مثل آموزش انگولار ۲ آخر هر پست لینکای بخش های دیگه یا حداقل لینک بخش بعدی رو قرار بدید خیلی عالی میشه

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

ehsan
19 تیر 1396
بخش 1 از فصل 2 کجاست؟

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.

روکسو
19 تیر 1396
جهت دستیابی به تمام بخش ها کافیست به انتهای هر مطلب مراجعه کنید و سری آموزش انگولار را ملاحظه کنید.

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.