امروز : چهارشنبه ۲ اسفند ۱۳۹۶ شما در سایت وبیت هستید.
دسته ها
سبد خرید شما

محصولی موجود نمی باشد!

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

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

پس از وارد کردن آدرس4200: http://localhost  با عبارت app works  روبه ور خواهیم شد که مشابه تصویر زیر است :

1-1-2 آموزش انگولار(قسمت سوم)

برای تغییرات روی صفحمان کافی است باید وارد پوشه app شده و وارد فایل app.components.ts  میشویم:

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

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'app';

}

 

با تغییر عبارت title به هر عبارتی مثلا Vebbet Test  عنوان بالای آرم انگولار به آن تغییر خواهد کرد.

این نکته جالب وجود دارد که این صفحه بدون اینکه نیازی باشد دوباره بارگزاری شود تغییرات به صورت خودکار در صفحه مرورگر نمایش داده میشود. سرور Node.js   این قابلیت را برای ما فراهم میکند تا در کوتاه ترین زمان ممکن  تغییرات به صورت آنلاین اعمال شود. در اصطلاح به این حالت Watch  یا Watch-poll گفته میشود.

در پوشه app یک فایل دیگر به نام app.component.html  وجود دارد که به عنوان فایل html در طول برنامه مورد استفاده قرار می گیرد. و تمام اطلاعات مربوط به صفحه اصلی در http://localhost:4200 قرار دارد:

<!--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>

 

در ابتدا عبارت Welcome to  قرار گرفته و پس از آن {{title}} قرار دارد تمام متغیر هایی که درون دو کروشه و در فایل html   قرار می گیرند مستقیما در صفحه نمایش داده میشوند به عبارت دیگر این کروشه ها مانند print  عمل می کنند. و اگر title  در کنترلر (app.compoent.ts) تغییر کند اطلاعات به صفحه View  ارسال شده و تغییرات در آن  نمایش داده میشود .

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

<input type="text" [(ngModel)]="title">

<p>{{title}}</p>

 

همانطور که در این مثال ملاحظه می‌کنید یک عبارت نامعلوم و نامشخص برای شما به صورت ngModel ایجاد شده است.  پس در ادامه به توضیح  ngModelمیپردازیم .

ngModel چیست:

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

همانطور که در مثال بالا می بینیم متغیر title که در ابتدا عبارت Vebbet test  را با خود حمل می‌کرد، اکنون با استفاده از دستور 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 { }

 

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

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

 2-1 آموزش انگولار(قسمت سوم)

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

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

در ادامه این اموزش با توضیح روند کار و چرخه حیات انگولار با شما همراه هستیم …

هاست و دامین ندارید!؟ هم اکنون سفارش دهید.

نکته : کپی بردای و انتشار مطالب وبیت با ذکر منبع بلامانع می باشد.

توجه : لطفا مشکلات خود را در انجمن های وبیت مطرح کنيد.

منبع : وبیت

آیا مطلب موثر و مفید بود؟ حالا امتیاز خود ثبت کنید.
بازدید : 128 بار دسته بندی : آموزش Angular دیدگاه : ۰ تاريخ : ۳۰ دی ۱۳۹۶
به اشتراک بگذارید :
فیسبوک گوگل تویتر کلوب فیسنما
فائزه سلطان پور

دیدگاه کاربران تعداد دیدگاه : ۰