AngularJS Giriş
AngularJS bir JavaScript çerçevesidir . <script> etiketi ile bir HTML sayfasına eklenebilir.
AngularJS, HTML niteliklerini Directives ile genişletir ve Expressions ile verileri HTML'ye bağlar .
AngularJS bir JavaScript Çerçevesidir
AngularJS, JavaScript ile yazılmış bir JavaScript çerçevesidir.
AngularJS bir JavaScript dosyası olarak dağıtılır ve bir web sayfasına bir komut dosyası etiketiyle eklenebilir:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
AngularJS HTML'yi Genişletiyor
AngularJS, HTML'yi ng yönergeleriyle genişletir .
ng-app yönergesi bir AngularJS uygulamasını tanımlar .
ng-model yönergesi , HTML kontrollerinin (input, select, textarea) değerini uygulama verilerine bağlar.
ng-bind yönergesi, uygulama verilerini HTML görünümüne bağlar .
AngularJS Örneği
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/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>
Örnek açıkladı:
AngularJS, web sayfası yüklendiğinde otomatik olarak başlar.
ng-app yönergesi, AngularJS'ye <div> öğesinin bir AngularJS uygulamasının " sahibi" olduğunu söyler .
ng-model yönergesi, girdi alanının değerini name uygulama değişkenine bağlar .
ng-bind yönergesi, <p> öğesinin içeriğini name uygulama değişkenine bağlar .
AngularJS Yönergeleri
Daha önce gördüğünüz gibi, AngularJS yönergeleri ng ön eki olan HTML öznitelikleridir.
ng-init yönergesi , AngularJS uygulama değişkenlerini başlatır.
AngularJS Örneği
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
Alternatif olarak geçerli HTML ile:
AngularJS Örneği
<div data-ng-app="" data-ng-init="firstName='John'">
<p>The name is <span data-ng-bind="firstName"></span></p>
</div>
Sayfa HTML'nizi geçerli kılmak istiyorsanız, ng- yerine data-ng- kullanabilirsiniz .
Bu öğreticide daha sonra yönergeler hakkında çok daha fazlasını öğreneceksiniz.
AngularJS İfadeleri
AngularJS ifadeleri çift parantez içinde yazılır: {{ ifade }} .
AngularJS, verileri tam olarak ifadenin yazıldığı yerde "çıkarır":
AngularJS Örneği
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
AngularJS ifadeleri, AngularJS verilerini HTML'ye ng-bind yönergesiyle aynı şekilde bağlar.
AngularJS Örneği
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name:
<input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>
Bu öğreticide daha sonra ifadeler hakkında daha fazla bilgi edineceksiniz.
AngularJS Uygulamaları
AngularJS modülleri , AngularJS uygulamalarını tanımlar.
AngularJS denetleyicileri , AngularJS uygulamalarını kontrol eder.
ng-app yönergesi uygulamayı tanımlar, ng -controller yönergesi denetleyiciyi tanımlar.
AngularJS Örneği
<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>
AngularJS modülleri uygulamaları tanımlar:
AngularJS Modülü
var app = angular.module('myApp', []);
AngularJS kontrolörleri uygulamaları kontrol eder:
AngularJS Denetleyicisi
app.controller('myCtrl',
function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
Bu öğreticide daha sonra modüller ve denetleyiciler hakkında daha fazla bilgi edineceksiniz.