AngularJS Merhaba Dünya Uygulaması: İlk Örnek Programınız
James Hartman
Bir AngularJS Uygulamasının gücünü görmenin en iyi yolu, ilk temel programınız olan “Merhaba Dünya” uygulamasını Angular.JS'de oluşturmaktır.
AngularJS geliştirme için kullanabileceğiniz birçok entegre geliştirme ortamı vardır, popüler olanlardan bazıları aşağıda belirtilmiştir. Örneğimizde şunu kullanıyoruz: Webstorm IDE'miz olarak.
- Webstorm
- Sublime Text
- angularjs Eclipse
- Visual Studio
Merhaba dünya, AngularJS
Aşağıdaki örnek, AngularJS'de ilk "Merhaba dünya" uygulamanızı oluşturmanın en kolay yolunu göstermektedir.
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf 8">
<title>Guru99</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{message}}</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script>
angular.module("app", []).controller("HelloWorldCtrl", function($scope) {
$scope.message="Hello World"
} )
</script>
</body>
</html>
Kod Açıklaması:
- "ng-uygulaması” anahtar kelimesi bu uygulamanın angular js uygulaması olarak değerlendirilmesi gerektiğini belirtmek için kullanılmaktadır. Bu uygulamaya herhangi bir isim verilebilir.
- Denetleyici iş mantığını tutmak için kullanılan şeydir. h1 etiketinde “HelloWorld” gösterme mantığına sahip olacak olan denetleyiciye erişmek istiyoruz yani bu etikette “HelloWorldCtrl” isimli denetleyiciye erişmek istiyoruz diyebiliriz.
- “Merhaba Dünya” mesajını görüntülemek için yer tutucudan başka bir şey olmayan “message” adlı üye değişkenini kullanıyoruz.
- “Script etiketi”, angular js için gerekli tüm işlevlere sahip olan angular.js betiğine referans vermek için kullanılır. Bu referans olmadan herhangi bir AngularJS fonksiyonunu kullanmaya çalışırsak çalışmayacaktır.
- “Kontrolör” aslında bizim kontrolörümüz olan iş mantığımızı oluşturduğumuz yerdir. Her bir anahtar kelimenin özellikleri sonraki bölümlerde açıklanacaktır. Adım 2'de başvurulan 'HelloWorldCtrl' adında bir denetleyici yöntemi tanımladığımızı unutmamak önemlidir.
- Kodumuz bu denetleyiciyi çağırdığında çağrılacak bir “fonksiyon” yaratıyoruz. $scope nesnesi, Angular.js'de kullanılan global bir nesne olan AngularJS'deki özel bir nesnedir. $scope nesnesi, denetleyici ile görünüm arasındaki verileri yönetmek için kullanılır.
- “message” adında bir üye değişkeni oluşturup ona “HelloWorld” değerini atayıp üye değişkenini kapsam nesnesine iliştiriyoruz.
NOT: Ng-controller direktifi şurada tanımlanan bir anahtar kelimedir: angularjs (adım#2) ve uygulamanızdaki denetleyicileri tanımlamak için kullanılır. Burada uygulamamızda 'HelloWorldCtrl' adında bir denetleyici tanımlamak için ng-controller anahtar sözcüğünü kullandık. Denetleyicinin gerçek mantığı (adım#5)'da oluşturulacaktır.
Komut başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
'Merhaba Dünya' mesajı görüntülenecektir.
