آموزش Angular 2

آموزش Angular 2 – اتصال داده (Data Binding)

توضیح

اتصال داده فرآیندِ هماهنگ سازیِ داده میان model (مدل) و مؤلفه های (view) است. برای نمایش پراپرتیِ component (مؤلفه)، می توانید نام آن پراپرتی را در دو آکولاد تو در تو در view template (الگوی view) بذارین. Tow-way Binding، با استفاده از دستور ngModel در یک notation واحد، پراپرتی (property) و رویداد (event) را به هم اتصال میده.

مثال

مثال زیر طرز کار data binding (اتصال داده) در Angular 2 را شرح میده:

<!DOCTYPE html>
<html>
   <head>
      <title>Data Binding</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/angular2-polyfills.js"></script>
      <script src="https://code.angularjs.org/tools/system.js"></script>
      <script src="https://code.angularjs.org/tools/typescript.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/Rx.js"></script>
      <script src="https://code.angularjs.org/2.0.0-beta.6/angular2.dev.js"></script>
      <script>
         System.config({
           transpiler: 'typescript',
           typescriptOptions: { emitDecoratorMetadata: true },
           packages: {'app': {defaultExtension: 'ts'}},
           map: { 'app': './angular2/src/app' }
         });
         System.import('app/data_binding_main')
               .then(null, console.error.bind(console));
      </script>
   </head>
   <body>
      <my-app>Loading...</my-app>
   </body>
</html>

کد بالا شامل آپشن های پیکربندی زیرِه:

  • می توانید با استفاده از نسخه ی typescript، فایلِ index.html را پیکربندی کنین. SystemJS، قبل از اجرای برنامه، توسطِ آپشنِ transpiler، TypeScript را به جاوا اسکریپت ترجمه می کنه.
  •  اگه قبل از اجرای برنامه transpile را به جاوا اسکریپت ترجمه نکنین، اخطارها و خطاهای کامپایلر را که در مرورگر نهفته اند، مشاهده خواهید کرد.
  • زمانی که آپشنِ emitDecoratorMetadata، تنظیم میشه، TypeScript برای همه ی کلاس هایِ کد، metadata تولید می کنه. اگه این گزینه را تعیین نکنین، حجم زیادی metadataیِ بی استفاده، تولید میشه که بر اندازه فایل و فشرده سازیِ اپلیکیشن در زمان اجرای برنامه تأثیر میذاره.
  •  angular 2، مشمولِ (incudes) فایل های با پسوندِ .ts در پوشه ی app میشه.
  •  سپس angular 2، فایل مؤلفه ی اصلی را از پوشه ی app، بارگذاری می کنه. اگه فایل مؤلفه ی اصلی را پیدا نکنه، در کنسول، پیغام خطا نمایش میده.
  • وقتی Angular، در main.ts، تابعِ bootstrap را فراخوانی می کنه، این تابع مؤلفه های metadata را می خواند، سِلِکتورهای (selecrors) ‘app’ را پیدا می کنه، عنصرِ تگی به نام app را مستقر می کنه، و برنامه را میان این تگ ها بارگذاری می کنه.

برای اجرای کد، باید فایل های typeScript (.ts) را در پوشه ی app ذخیره کنین.

data_binding_main.ts

import {bootstrap} from 'angular2/platform/browser';           //importing bootstrap function
import {AppComponent} from "./data_binding_app.component";     //importing component function

bootstrap(AppComponent);

اکنون بصورت زیر یک مؤلفه در فایلِ TypeScript (.ts) ایجاد می کنیم.

data_binding_app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    template: `
           <ul>
              <li
              *ngFor="#Item of Items"
              (click)="onItemClicked(Item)">
                  {{ Item.name }}
              </li>
           </ul>
           <input type="text" [(ngModel)]="clickedItem.name">
   `
})
export class AppComponent {
     public Items = [
                     {name: "Butter"},
                     {name: "Milk"},
                     {name: "Yogurt"},
                     {name: "Cheese"},
                  ];
     public clickedItem = {name: ""};
     onItemClicked(Item) {
        this.clickedItem = Item;
     }
}
  •  @Component یک decorator است که برای ایجاد مؤلفه و view مرتبط با آن، از شیءِ configuration استفاده می کنه.
  •  selector، نمونه ای از مؤلفه ای که آن را در تگِ <my-app> از HTML پدر، پیدا کرده ایجاد می کنه.
  • دستورِ *ngFor خروجیِ viewای که به الگو (template) متصل کردیم را را ایجاد می کنه. علامتِ *، نوعی مختصر نویسی ایِه برای استفاده از دستوراتِ الگوی Angular 2 همراه با تگِ template.
  • متغیر محلیِ Item، در الگو ارجاع داده میشه و index آرایه را می گیره. وقتی روی آیتمِ value کلیک می کنین، رویداد onItemClicked()، فعال میشه و Angular 2، نامِ مدلِ (model) داخل آرایه را به متغیر محلیِ template (الگو) اتصال میده.
  •  نام مدلِ clickedItem به name اتصال داده میشه و  زمانی که کاربر روی نام آیتمِ داخل لیست کلیک کنه، نام آیتم را در جعبه متن نمایش میده.

خروجی

بیاین مراحل زیر را برای دیدن طرز کار کدهای بالا انجام بدیم:

  •  فایلِ index.html را همان طور که در بخشِ محیط (enviroment) انجام دادیم، در پوشه ی app که حاوی فایل های .ts است، ذخیره کنین.
  •  پنجره ی ترمینال را باز کنین و دستورات زیر را وارد کنین:
npm start
  •  بعد از چند لحظه، باید زبانه ای (tab) در مرورگر باز بشه و بصورت زیر خروجی را نشان بده.

یا می توانید به روش دیگه ای این فایل را اجرا کنین:

  •  کدِ HTML با لا را در فایلی به نامِ angular2_ data_binding.html در پوشه ی ریشه ی سرور، ذخیره کنین.
  •  این فایلِ HTML را با http://localhost/angular2_ data_binding.html باز کنین تا خروجی را بصورت زیر ببینین.
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش Angular 2

Learn Angular 2

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...