Angular 4 dersleri 1 - Kurulum, İlk örnek proje

Angular 4 kurulumu :

Komut satırında aşağıdaki komutu vererek node’un yüklü olup olmadığını ve versiyonunu kontrol edelim:

node -v

Node versiyonum eskiymiş. Upgrade etmek için komut çalıştırmakla uğraşmaya gerek yok. Sitesinden indirip kurdum. 64’de bit’de sıkıntı çıktığı için bunu silip 32 bit versiyonunu indirdim.

https://www.youtube.com/watch?v=g13I7Xy1PtI

Sonra ise node package manager(npm)’ı kullanarak angular-cli’yi yükleyelim.

Yukarıdaki npm install komutundan sonra ng new komutu çalışmadı. Dolayısıyla şu komutu vererek angular/cli’yi tekrar yükledim :

npm install -g --save-dev @angular/cli@latest

Kurulumdan sonra ng new proje_deneme komutunu vererek yeni bir angular projesi yaratırız.Sonra bu projenin içerisine gireriz : cd new proje_deneme .

Burada ng -v komutunu çalıştırarak angular’ın düzgün yüklenip yüklenmediğini test ederiz.

Yukarıdaki ekranı gördüyseniz angular düzgün bir şekilde yüklenmiştir. Şimdi projemizi ng serve komutu ile çalıştıralım :

Sonra Sublime Text 3 ‘ü indirdim.Angular projelerimi bu ide’yi kullanarak geliştireceğim.

SublimeText’de open folder diyerek proje klasörümüzü açalım.

Örnek 1 : https://angular.io/tutorial/toh-pt1

Src -> app klasörü altındaki app.component.ts dosyasını açalım. Buradaki title property’sinin değerini değiştirip istanbul yapalım:

export class AppComponent {

 title = 'istanbul';

}

Sonuç output’a hemen yansımıştır :

Sonra @Component({ ‘in içerisine aşağıda gösterilen şekilde güncelleyelim :

@Component({

 template: '<h1>{{ulke}}</h1><h2>{{hero}} details!</h2>'

})

Ve export class AppComponent içerisini aşağıdaki gibi güncelleyelim:

export class AppComponent {

 ulke = 'turkiye';

 hero = 'Windstorm';

}

Sonuç :

Yukarıdaki örnekte data binding yaptık, yani ulke isimli variable’ı html içerisinde yazdır dedik, ulke isimli variable’a ise export class AppComponent içerisinde bir değer atadık.

The double curly braces are Angular's interpolation binding syntax. These interpolation bindings present the component's title and hero property values, as strings, inside the HTML header tags.

Hero object

The hero needs more properties. Convert the hero from a literal string to a class. ( hero isimli string type’ında bir property tanımlamıştık, şimdi Hero isimli bir class tanımlayalım ve hero property’sinin Hero class’ı type’ında olmasını sağlayalım.  )

Create a Hero class with id and name properties. Add these properties near the top of the app.component.ts file, just below the import statement. ( Hero isimli class içerisinde 2 tane property tanımlayalım. Bu class’ı import statement’ın hemen aşağısında tanımlayalım. )

src/app/app.component.ts (Hero class’ı tanımlayalım)

export class Hero {
 id: number;
 name: string;
}

In the AppComponent class, refactor the component's hero property to be of type Hero, then initialize it with an id of 1 and the name Windstorm. ( AppComponent class’ında tanımladığımız hero property’nin type’ının Hero class’ı olduğu belirtelim, ve bu class’ı initialize edelim: )

src/app/app.component.ts (hero property’yi güncelleyelim)

hero: Hero = {
 id: 1,
 name: 'Windstorm'
};

Because you changed the hero from a string to an object, update the binding in the template to refer to the hero's name property. ( hero isimli property’nin type’ını string’den object’e değiştirdiğimiz için, template’da yaptığımız binding’i değiştirmeliyiz, hero isimli object’in name property’sine bind etmeliyiz. )

src/app/app.component.ts (binding’i güncelleriz)

template: `<h1>{{title}}</h1><h2>{{hero.name}} details!</h2>`

The browser refreshes and continues to display the hero's name.(Yaptığımız değişikliği tarayıcıda görebiliriz, hero object’deki name property’sinin değeri olan Windstorm gösterilmiştir tarayıcıda : )

Adding HTML with multi-line template strings

To show all of the hero's properties, add a <div> for the hero's id property and another <div> for the hero's name. To keep the template readable, place each <div> on its own line.

The backticks around the component template let you put the <h1>, <h2>, and <div> elements on their own lines, thanks to the template literals feature in ES2015 and TypeScript. For more information, see Template literals. (template’i backtick işaretleri( yani ` karakteri ) arasında belirtirsek multiline html yazabiliriz aşağıda görüldüğü gibi. Ne saçma karakter ya bunu çok mu aramışlar, ben bulamadım laptop klavyesinden nasıl bu karakteri çıkartacağımı. O yüzden doğrudan kaynaktan kopyalamak zorunda kaldım. )

app.component.ts (AppComponent's template)

template: `
 <h1>{{title}}</h1>
 <h2>{{hero.name}} details!</h2>
 <div><label>id: </label>{{hero.id}}</div>
 <div><label>name: </label>{{hero.name}}</div>
 `