AngularJS Hello World Uygulaması: İlk Örnek Programınız

Bir AngularJS Uygulamasının gücünü görmenin en iyi yolu, Angular.JS'de ilk temel program olan "Hello World" uygulamanızı 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, IDE olarak Webstorm kullanıyoruz.

1. Web fırtınası
2. Yüce metin
3. AngularJS Eclipse
4. Görsel stüdyo

Merhaba dünya, AngularJS

Aşağıdaki örnek, AngularJS'de ilk "Merhaba dünya" uygulamanızı oluşturmanın en kolay yolunu gösterir.

{{message}}

Kod Açıklaması:

1. " Ng-app " anahtar sözcüğü, bu uygulamanın bir açısal js uygulaması olarak değerlendirilmesi gerektiğini belirtmek için kullanılır. Bu uygulamaya herhangi bir isim verilebilir.
2. Denetleyici, iş mantığını tutmak için kullanılan şeydir. H1 etiketinde, "HelloWorld" görüntüleme mantığına sahip olacak denetleyiciye erişmek istiyoruz, bu nedenle bu etikette "HelloWorldCtrl" adlı denetleyiciye erişmek istediğimizi söyleyebiliriz.
3. "Merhaba Dünya" mesajını görüntülemek için bir yer tutucudan başka bir şey olmayan "mesaj" adlı bir üye değişkeni kullanıyoruz.
4. "Betik etiketi", açısal js için gerekli tüm işlevselliğe sahip olan angular.js betiğine başvurmak için kullanılır. Bu referans olmadan, herhangi bir AngularJS işlevini kullanmaya çalışırsak çalışmazlar.
5. "Denetleyici", bizim denetleyicimiz olan iş mantığımızı gerçekten yarattığımız yerdir. Her bir anahtar kelimenin özellikleri sonraki bölümlerde açıklanacaktır. Adım 2'de referans verilen 'HelloWorldCtrl' adlı bir kontrolör yöntemi tanımladığımıza dikkat etmek önemlidir.
6. Kodumuz bu denetleyiciyi çağırdığında çağrılacak bir "işlev" oluşturuyoruz. $ Kapsam nesnesi, Angular.js içinde kullanılan genel bir nesne olan AngularJS'de özel bir nesnedir. $ Kapsam nesnesi, denetleyici ve görünüm arasındaki verileri yönetmek için kullanılır.
7. "Message" adında bir üye değişkeni oluşturuyoruz, ona "HelloWorld" değerini atıyoruz ve üye değişkenini kapsam nesnesine ekliyoruz.

NOT : ng-kontrolör direktifi, AngularJS'de (adım # 2) tanımlanan bir anahtar kelimedir ve uygulamanızda kontrolörleri tanımlamak için kullanılır. Burada uygulamamızda, ng-controller anahtar sözcüğünü 'HelloWorldCtrl' adlı bir denetleyiciyi tanımlamak için kullandık. Denetleyici için gerçek mantık (adım # 5) 'de 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.