AngularJS - Ortam Kurulumu

Bu bölümde, web uygulaması geliştirmede kullanılacak AngularJS kitaplığının nasıl kurulacağı açıklanmaktadır. Ayrıca dizin yapısını ve içeriğini kısaca açıklar.

Bağlantıyı açtığınızda https://angularjs.org/, AngularJS kitaplığını indirmek için iki seçenek olduğunu göreceksiniz -

View on GitHub - Bu butona tıklayarak GitHub'a yönlendirilirsiniz ve en son komut dosyalarını alırsınız.
Download AngularJS 1 - Bu düğmeye tıkladığınızda, şu şekilde gösterilen bir iletişim kutusu göreceksiniz -

Bu ekran, aşağıdaki gibi Angular JS kullanmanın çeşitli seçeneklerini sunar -

Downloading and hosting files locally
- İki farklı seçenek vardır: Eski ve En Son. İsimlerin kendisi kendi kendini açıklayıcıdır. Legacy'nin 1.2.x'ten daha düşük bir sürümü vardır ve En son sürüm 1.3.x ile gelir.
- Ayrıca küçültülmüş, sıkıştırılmamış veya sıkıştırılmış sürümle de gidebiliriz.
CDN access- Ayrıca bir CDN'ye erişiminiz var. CDN, bölgesel veri merkezlerine erişmenizi sağlar. Bu durumda, Google barındırıcısı. CDN, dosyaları barındırma sorumluluğunu kendi sunucularınızdan bir dizi harici sunucuya aktarır. Ayrıca, web sayfanızın ziyaretçisi aynı CDN'den AngularJS'nin bir kopyasını zaten indirmişse, yeniden indirmeye gerek olmaması gibi bir avantaj sunar.

Bu eğitim boyunca kütüphanenin CDN versiyonlarını kullanıyoruz.

Misal

Şimdi AngularJS kütüphanesini kullanarak basit bir örnek yazalım. Aşağıda gösterildiği gibi bir HTML dosyası myfirstexample.html oluşturalım -

<!doctype html>
<html>
   <head>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
   </head>
   
   <body ng-app = "myapp">
      <div ng-controller = "HelloController" >
         <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
      </div>
      
      <script>
         angular.module("myapp", [])
         
         .controller("HelloController", function($scope) {
            $scope.helloTo = {};
            $scope.helloTo.title = "AngularJS";
         });
      </script>
      
   </body>
</html>

Yukarıdaki kodu ayrıntılı olarak inceleyelim -

AngularJS'yi dahil et

AngularJS JavaScript dosyasını kullanabilmemiz için HTML sayfasına ekliyoruz -

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
   </script>
</head>

AngularJS'nin en son sürümünü resmi web sitesinde kontrol edebilirsiniz.

AngularJS uygulamasına gelin

Ardından, HTML'nin hangi kısmının AngularJS uygulamasını içerdiğini söylemek gerekir. AngularJS uygulamasının kök HTML öğesine ng-app özniteliğini ekleyerek bunu yapabilirsiniz. Bunu aşağıda gösterildiği gibi html öğesine veya gövde öğesine ekleyebilirsiniz -

<body ng-app = "myapp">
</body>

Görünüm

Görünüm bu kısımdır -

<div ng-controller = "HelloController" >
   <h2>Welcome {{helloTo.title}} to the world of Tutorialspoint!</h2>
</div>

ng-controller , AngularJS'e bu görünümle hangi denetleyicinin kullanılacağını söyler. helloTo.title , AngularJS'e helloTo.title adlı model değerini HTML'de bu konumda yazmasını söyler.

Kontrolör

Denetleyici kısmı -

<script>
   angular.module("myapp", [])
   
   .controller("HelloController", function($scope) {
      $scope.helloTo = {};
      $scope.helloTo.title = "AngularJS";
   });
</script>

Bu kod, myapp adlı açısal modüle HelloController adlı bir denetleyici işlevini kaydeder . Modüller ve kontrolörler hakkında ilgili bölümlerinde daha fazla çalışacağız . Denetleyici işlevi, açısal modül (...) denetleyici (...) işlev çağrısı aracılığıyla açısal olarak kaydedilir.

$ Kapsam parametre modeli denetleyici işlevine aktarılır. Denetleyici işlevi bir helloTo JavaScript nesnesi ekler ve bu nesneye bir başlık alanı ekler .

Yürütme

Yukarıdaki kodu ilkörnek.html olarak kaydedin ve herhangi bir tarayıcıda açın. Aşağıdaki çıktıyı göreceksiniz -

Welcome AngularJS to the world of Tutorialspoint!

Sayfa tarayıcıya yüklendiğinde ne olur? Bakalım -

HTML belgesi tarayıcıya yüklenir ve tarayıcı tarafından değerlendirilir.
AngularJS JavaScript dosyası yüklenir, açısal global nesne oluşturulur.
Denetleyici işlevlerini kaydeden JavaScript çalıştırılır.
Ardından, AngularJS, AngularJS uygulamalarını ve görünümleri aramak için HTML üzerinden tarar.
Görünüm yerleştirildikten sonra, bu görünümü ilgili denetleyici işlevine bağlar.
Ardından, AngularJS denetleyici işlevlerini yürütür.
Daha sonra, görünümleri denetleyici tarafından doldurulan modelden gelen verilerle işler. Sayfa artık hazır.