En son web geliştirme öğreticiler
 

AngularJS Giriş


Angularjs bir JavaScript çerçevesidir. Bu bir ile bir HTML sayfasına eklenebilir <script> etiketi.

Angularjs HTML Direktiflerine niteliklerini uzanır ve İfadelerle HTML verileri bağlar.


Angularjs bir JavaScript Çerçeve olduğu

Angularjs bir JavaScript çerçevesidir. Bu JavaScript ile yazılmış bir kütüphanedir.

Angularjs bir JavaScript dosyası olarak dağıtılır ve bir komut dosyası etiketi olan bir web sayfasına eklenebilir:

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

Angularjs HTML Uzattı

Angularjs ng-direktifleri HTML uzanır.

Ng uygulama yönergesi angularjs uygulama tanımlamaktadır.

Ng model yönergesi HTML kontroller değerinin bağlanan (input, select, textarea) uygulama verilerine.

Ng bağlama yönergesi HTML görünümüne uygulama verilerini bağlanır.

angularjs Örnek

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>
Kendin dene "

Örnek açıklanmıştır:

Web sayfası yüklendiğinde angularjs otomatik olarak başlar.

Ng-app yönergesi angularjs söyler <div> unsurdur "owner" bir angularjs uygulamanın.

Ng model yönergesi bir uygulama ise değişken adının giriş alanı değerini bağlanır.

Ng bağlama yönergesi innerHTML bağlanan <p> bir uygulama ise değişken adının elemanı.


angularjs Direktifleri

Zaten gördüğümüz gibi, angularjs direktifler HTML bir ng öneki ile özellikleridir.

Ng init yönergesi angularjs uygulama değişkenleri başlatır.

angularjs Örnek

<div ng-app="" ng-init="firstName='John'">

<p>The name is <span ng-bind="firstName"></span></p>

</div>
Kendin dene "

Alternatif geçerli HTML ile:

angularjs Örnek

<div data-ng-app="" data-ng-init="firstName='John'">

<p>The name is <span data-ng-bind="firstName"></span></p>

</div>
Kendin dene "

Eğer sayfa, HTML geçerli kılmak istiyorsanız, yerine Ng- ait veri-Ng- kullanabilirsiniz.

Daha sonra bu eğitimde direktifleri hakkında çok daha fazla öğreneceksiniz.


angularjs İfadeler

Angularjs ifadeler çift parantezi içindeki yazılır: {{ifade}}.

Angularjs olacak "output" veri ifadesi yazılır tam olarak nerede:

angularjs Örnek

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>
Kendin dene "

Angularjs ifadeler ng-bağlama direktifi aynı şekilde HTML angularjs verileri bağlamak.

angularjs Örnek

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>

</body>
</html>
Kendin dene "

Daha sonra bu eğitimde ifadeler hakkında daha fazla öğreneceksiniz.


Uygulamalar angularjs

Angularjs modüller angularjs uygulamaları tanımlamaktadır.

Angularjs kontrolörleri angularjs uygulamalarını denetler.

Ng uygulama yönergesi uygulama ng kontrol cihazı yönergesi denetleyicisi tanımlamaktadır.

angularjs Örnek

<div ng-app=" myApp " ng-controller=" myCtrl ">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module(' myApp ', []);
app.controller(' myCtrl ', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>
Kendin dene "

Angularjs modülleri uygulamalarını tanımlar:

angularjs Modülü

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

kontrolörleri kontrol uygulamaları angularjs:

angularjs Kontrolörü

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

Sen modülleri ve daha sonra bu eğitimde kontrolörleri hakkında daha fazla bilgi edineceksiniz.