AngularJ2 Data Binding ve Data Display

Merhaba, bir önceki makalemde nasıl yeni bir angularJs2 projesi oluşturacağımdan bahsetmiştim. Bu makalemde ise angularjs2’de data binding ve data display’den bahsedeceğim.

Önceki makalemde oluşturduğum app klasörünün altına data_binding_main.ts doyasını ekliyorum.


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

bootstrap(AppComponent);

Şimdi de data_binding_app.component.ts isminde içinde component barındıran bir TypeScript dosyası ekleyelim


import {Component, View} from "angular2/core";

@Component({
   selector: 'my-app'
})

@View({
  template: `


<h3>İsim : {{name}}</h3>



<h3>Soyisim : {{surname}}</h3>



<h3>Şehir : {{City}}</h3>



<h2>Showing data using array property with NgFor</h2>



<h3>My favorite is: {{myfavorite}}</h3>


List of Favorites:


<ul>


<li *ngFor="#favorite of favorites" (click)="onItemClicked(favorite)">
          {{ favorite }}
       </li>

    </ul>

    <input type="text" [(ngModel)]="clickedItem">
    `
})

export class AppComponent {
   name: 'Mustafa';
   surname:'Alkan';

City: string;
constructor() {
   this.City = 'İzmir';
}

favorites = ['Sport', 'Music', 'Sinema', 'Swimming'];
   myfavorite = this.favorites[1];

   public clickedItem = "";
     onItemClicked(Item) {
        this.clickedItem = Item;
     }
}

Yukarıda yaptığımız işleri kısaca özetlemek istersek, AppComponent ismiyle yarattığımız component içerisinde name, surname ve City olarak 3 değişken oluşturup, bunlara değer atadık. Önceki makalemde anlattığım üzere, AngularJS2’de scopelar kaldırılmıştı ve artık bu gibi değişkenleri componentler içerisinde tanımladığımızı söylemiştik. Böylece component içerisinde oluşturduğumuz dataları son kullanıcıya view içinde göstermiş olduk.

Favorites isminde bir array nesnesi oluşturduk ve array içerisindeki her bir itemi view içerisindeki templatede *ng-for directive ile bind ettik. Listemizdeki herhangi bir nesneye tıkladığımızda, gidip aşağıdaki text inputta görünmesini istiyorsak bunu da aşağıda gördüğümüz click eventi ile gerçekleştirebiliriz.

(click)="onItemClicked(favorite)"

onItemClicked fonksiyonu ise, AppComponent içerisinde tanımlanmış bir fonksiyondur ve görevi clickedItem değişkenine, fonksiyon içerisinde gelen parametreyi set etmektir.

public clickedItem = "";
     onItemClicked(Item) {
        this.clickedItem = Item;
     }
<input type="text" [(ngModel)]="clickedItem">

Şimdi databinding.html dosyasımızı oluşturalım.


<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': './app' }
         });
         System.import('app/data_binding_main')
               .then(null, console.error.bind(console));
      </script>
   </head>
   <body>
      <my-app>Loading...</my-app>
   </body>
</html>

NodeJS command promptan databinding.html dosyasını içeren klasöre gidelim ve projemizi npm start komutuyla çalıştıralım.

1