AngularJS Modülü
- Önceki Sayfa AngularJS İfade
- Sonraki Sayfa AngularJS Düzenleyicisi
AngularJS modülü bir uygulama tanımlar.
Modül, uygulamanın farklı bölümlerinin konteyneridir.
Modül, uygulama kontrolcüsünün konteyneridir.
Kontrolörler her zaman bir modüle aittir.
Modül oluşturma
AngularJS fonksiyonlarını kullanarakangular.module Bir modül oluşturun：
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" parametresi, uygulamanın çalışacağı HTML elementini belirtir.
Şimdi, AngularJS uygulamanıza kontrolcü, yönerge, filtreler vb. ekleyebilirsiniz.
Kontrolcü ekle
Uygulamanıza bir kontrolcü ekleyin ve ng-controller yönerge kontrolcüyü referans alır:
örnek
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName = "Gates";
});
</script>
Daha sonra bu dersin sonunda kontrolcüler hakkında daha fazla bilgi öğreneceksiniz.
Yönerge ekle
AngularJS, uygulamanıza işlev eklemek için kullanabileceğiniz bir dizi yerleşik yönergeye sahiptir.
Tam referans için, AngularJS yönerge referansımıza göz atın.
Ayrıca, kendi yönergelerinizi uygulamanıza ekleyebilirsiniz:
örnek
<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
return {
template : "Bir yönergede yapıldım!"
};
});
</script>
Daha sonra bu dersin sonunda yönergeleri ayrıntılı olarak öğreneceksiniz.
dosyasındaki modül ve kontrolcü
AngularJS uygulamasında, modülleri ve kontrolcüyü JavaScript dosyalarında bulundurmak çok yaygındır.
Bu örnekte, "myApp.js" uygulama modül tanımlamasını içerirken, "myCtrl.js" kontrolcüyü içerir:
örnek
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>
myApp.js
var app = angular.module("myApp", []);
modül tanımlamasındaki [] parametresi, bağımlı modülleri tanımlamak için kullanılabilir.
Eğer [] parametresi yoksa, yeni bir modül oluşturmadığınızı, mevcut modülü aradığınızı
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName= "Gates";
});
fonksiyonlar genel adlandırma alanını kirletebilir
JavaScript'te genel fonksiyonlar kullanmakten kaçınılmalıdır. Diğer betikler tarafından kapsanabilir veya hasar görebilirler.
AngularJS modülleri, tüm fonksiyonları modül yerelinde tutarak bu sorunu azaltır.
kütüphaneyi ne zaman yükleyeceğinizi
HTML uygulamasında betikleri <body> elementinin sonunda çok yaygın, ancak <head> veya <body> başına AngularJS kütüphanesini yüklemek için.
Bu, sadece kütüphaneyi yüklemeden sonra kodu angular.module çalıştırma.
örnek
<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName = "Gates";
});
</script>
</body>
</html>
- Önceki Sayfa AngularJS İfade
- Sonraki Sayfa AngularJS Düzenleyicisi
