AngularJS Yazı Dizisi 2: Uygulama ve Kontrol Yapısı

Merhaba,

Angular JS yazı dizisinin bu bölümünde, bir AngularJS uygulaması içinde nasıl application ve controller yapısının oluşturulabildiğini anlatacağım. Birinci yazıyı okumamış olanlar, buradan birinci yazıya ulaşabilirler.

Bir uygulama tanımlamak ve tanımladığımız uygulamada işlemler yapmak için bir ng-app etiketi eklememiz gerekiyor. Uygulamanın belli bir blok kısmında ise işlem yapmamız için uygulamamızda bir controller eklememiz gerekiyor. Bu işlem için aşağıdaki kod parçasını bir html dosyası içinde oluşturalım.

<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>
Full Name: {{firstName + ” ” + lastName}}<br>
</div>

Yine aynı dosya içerisine aşağıdaki script bölümünü de ekleyelim.

<script>
var app = angular.module(‘myApp’, []);
app.controller(‘myCtrl’, function($scope) {
$scope.firstName= “John”;
$scope.lastName= “Doe”;
});
</script>

Yukarıda tanımlanan kodda görüldüğü üzere, script bölümünde önce bir myApp isimli AngularJS modülü oluşturduk ve oluşturduğumuz modül içerisinde myCtrl isminde bir controller tanımladık. Burada fonksiyonumuz içinde bir $scope değişkeni kullandık. Kullandığımız bu $scope sayesinde uygulamamız içinde de firstName ve lastName varlıklarını oluşturabildik.

Oluşturduğumuz varlıkları bir input alanına yazdırmak için de ilgili input etiketine, $scope değişkenimizdeki aynı varlık adını ng-model etiketini kullanarak verdik. Tabi ki bu $scope varlıklarını da kullanabilmek için, $scope değişkeninin bağlı olduğu uygulamanın adını ve controller adını ve yine bir div etiketi içinde ng-app ve ng-controller ile tanımlamış olduk.

AngularJS mimarisinin temel yapısını oluşturan uygulama ve controller kullanımı bu şekilde. Bir sonraki AngularJS yazısında görüşmek üzere.