AngularJS Tanıtımı

AngularJS JavaScript çerçevesikullanır. Bu, HTML sayfasına bir <script> etiketi ile eklenabilir.

AngularJSkomutlarıHTML özelliklerini genişletti veifadeleriverileri HTML'e bağlamak için

AngularJS, bir JavaScript çerçevesidir

AngularJS, JavaScript ile yazılmış bir JavaScript çerçevesidir.

AngularJS, JavaScript dosyası olarak dağıtılır ve web sayfasına script etiketi ile eklenebilir:

<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>

HTML'yi genişletti

AngularJS ng-komutHTML'yi genişletti

ng-app bir AngularJS uygulaması tanımlayan komut

ng-model HTML kontrolü (input, select, textarea) değerlerini uygulama verilerine bağlamak için komut

ng-bind uygulama verilerini HTML görünümüne bağlamak için komut

AngularJS Örnek

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>İsim: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>
</body>
</html>

Deneyin

Örnek açıklama:

web sayfası yüklenip tamamlanınca, AngularJS otomatik olarak başlayacağını

ng-app AngularJS'ye, <div> elementinin AngularJS'nin uygulamasahibi olan.

ng-model Giriş alanının değerini uygulama değişkenine bağlamak için komut name。

ng-bind Kılavuz, <p> elementinin içeriğini uygulama değişkenine bağlar. name。

AngularJS Düzenleyici

Gördüğünüz gibi, AngularJS kılavuzları ng önekli HTML özellikleri.

ng-init Kılavuz AngularJS uygulama değişkenlerini başlatır.

AngularJS Örnek

<div ng-app="" ng-init="firstName='Bill'">
<p>İsim <span ng-bind="firstName"></span></p>
</div>

Deneyin

veya geçerli HTML kullanarak:

AngularJS Örnek

<div data-ng-app="" data-ng-init="firstName='Bill'">
<p>İsim <span data-ng-bind="firstName"></span></p>
</div>

Deneyin

Sayfa HTML'sini geçerli yapmak istiyorsanız, data-ng- değil ng-。

Kılavuz hakkında daha fazla bilgiyi bu eğitimın sonunda öğreneceksiniz.

AngularJS İfade

AngularJS ifadeleri çift büyük parantez içinde yazılır:{{ ifade }}。

AngularJS ifade yerinde "çıkış" verilerini "yazar":

AngularJS Örnek

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>İlk ifadem: {{ 5 + 5 }}</p>
</div>
</body>
</html>

Deneyin

AngularJS ifadeleri AngularJS verilerini HTML'ye bağlar, ng-bind Kılavuzun yolu aynıdır.

AngularJS Örnek

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
  <p>İsim: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>
</body>
</html>

Deneyin

İfade hakkında daha fazla bilgiyi bu eğitimın sonunda öğreneceksiniz.

AngularJS Uygulaması

AngularJS ModülAngularJS uygulamasını tanımlar.

AngularJS KontrolcüAngularJS uygulamasını kontrol eder.

ng-app Kılavuz uygulamayı tanımlar.ng-controller Kılavuz tanımlar kontrolcüsü.

AngularJS Örnek

<div ng-app="myApp" ng-controller="myCtrl">
İsim: <input type="text" ng-model="firstName"><br>
Soyadı：<input type="text" ng-model="lastName"><br>
<br>
Tam Adı：{{firstName + " " + lastName}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName= "Bill";
  $scope.lastName= "Gates";
});
</script>

Deneyin

AngularJS Modülü, uygulamanın tanımlanmasını sağlar:

AngularJS Modül

var app = angular.module('myApp', []);

AngularJS Kontrolörü, uygulamanın kontrolünü sağlar:

AngularJS Kontrolör

app.controller('myCtrl', function($scope) {
  $scope.firstName= "Bill";
  $scope.lastName= "Gates";
});

Bu eğitim'nin ardından modül ve kontrolörler hakkında daha fazla bilgi edineceksiniz.