MEAN.JS - Uygulamada Açısal Bileşenler
Bu bölümde, bir uygulamaya açısal bileşenler ekleyeceğiz. Model View Controller (MVC) desenini kullanarak dinamik, tek sayfalı uygulamalar oluşturmaya izin veren bir web ön uç JavaScript çerçevesidir. MEAN.JS mimarisi bölümünde, AngularJS'in istemci talebini nasıl işleyeceğini ve sonucu veritabanından nasıl alacağını gördünüz.
AngularJS'yi tanımak
AngularJS, HTML'yi şablon dili olarak kullanan ve uygulama bileşenlerinizi açıkça ifade etmek için HTML'nin sözdizimini genişleten açık kaynaklı bir web uygulama çerçevesidir. AngularJS, veri bağlama, model, görünümler, denetleyiciler, hizmetler vb. Gibi bazı temel özellikler sağlar. AngularJS hakkında daha fazla bilgi için bu bağlantıya bakın .
Sayfaya Angular ekleyerek sayfayı Angular uygulaması yapabilirsiniz. Yalnızca indirilebilen veya doğrudan bir CDN sürümüyle referans alınabilen harici bir JavaScript dosyası kullanılarak eklenebilir.
Dosyayı indirdiğimizi ve sayfaya aşağıdaki gibi ekleyerek yerel olarak referans verdiğimizi düşünün -
<script src="angular.min.js"></script>Şimdi, Angular'a bu sayfanın bir Angular uygulaması olduğunu söylememiz gerekiyor. Bu nedenle, bunu aşağıda gösterildiği gibi <html> veya <body> etiketine bir nitelik, ng-app ekleyerek yapabiliriz -
<html ng-app>
or
<body ng-app>Ng uygulaması sayfadaki herhangi bir öğeye eklenebilir, ancak genellikle <html> veya <body> etiketine eklenir, böylece Angular sayfanın içinde herhangi bir yerde çalışabilir.
Modül Olarak Açısal Uygulama
Angular uygulamasıyla çalışmak için bir modül tanımlamamız gerekir. Uygulama ile ilgili bileşenleri, yönergeleri, hizmetleri vb. Gruplayabileceğiniz bir yerdir. Modül adına, HTML'deki ng-app özniteliği ile başvurulur. Örneğin, Angular uygulama modülü adını myApp olarak söyleyeceğiz ve aşağıda gösterildiği gibi <html> etiketinde belirtilebilir -
<html ng-app="myApp">Harici bir JavaScript dosyasında aşağıdaki ifadeyi kullanarak uygulama için tanım oluşturabiliriz -
angular.module('myApp', []); //The [] parameter specifies dependent modules in the module definitionDenetleyiciyi Tanımlama
AngularJS uygulaması, uygulamadaki veri akışını kontrol etmek için denetleyicilere güvenir. Bir kontrolör, ng-controller direktifi kullanılarak tanımlanır .
Örneğin, kullanmak istediğiniz denetleyicinin adı ile birlikte ng-denetleyici yönergesini kullanarak denetleyiciyi gövdeye bağlayacağız. Aşağıdaki satırda denetleyicinin adını "myController" olarak kullanıyoruz.
<body ng-controller="myController">Aşağıda gösterildiği gibi bir Angular modüle (myApp) bir denetleyici (myController) bağlayabilirsiniz -
angular
.module('myApp')
.controller('myController', function() {
// controller code here
});Okunabilirlik, yeniden kullanılabilirlik ve test edilebilirlik için anonim bir işlev yerine adlandırılmış işlevi kullanmak daha iyidir. Aşağıdaki kodda, denetleyici kodunu tutmak için yeni adlandırılmış "myController" işlevini kullanıyoruz -
var myController = function() {
// controller code here
};
angular
.module('myApp')
.controller('myController', myController);Denetleyiciler hakkında daha fazla bilgi için bu bağlantıya bakın .
Kapsam Tanımlama
Kapsam, denetleyiciyi görünümlere bağlayan ve model verilerini içeren özel bir JavaScript nesnesidir. Denetleyicilerde, model verilerine $ kapsam nesnesi aracılığıyla erişilir. Denetleyici işlevi, Angular tarafından oluşturulan $ kapsam parametresini alır ve modele doğrudan erişim sağlar.
Aşağıdaki kod parçacığı, $ kapsam parametresini almak için denetleyici işlevinin nasıl güncelleneceğini belirtir ve varsayılan değeri ayarlar -
var myController = function($scope) {
$scope.message = "Hello World...";
};Denetleyiciler hakkında daha fazla bilgi için bu bağlantıya bakın . Sonraki bölümde Angular kullanarak tek sayfalık uygulama oluşturmaya başlayacağız.