AngularJS Modülleri
AngularJS modülü bir uygulamayı tanımlar.
Modül, bir uygulamanın farklı bölümleri için bir kapsayıcıdır.
Modül, uygulama denetleyicileri için bir kapsayıcıdır.
Kontrolörler her zaman bir modüle aittir.
Modül Oluşturma
AngularJS işlevi kullanılarak bir modül oluşturulurangular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"Uygulamam" parametresi, uygulamanın içinde çalışacağı bir HTML öğesini ifade eder.
Artık AngularJS uygulamanıza denetleyiciler, yönergeler, filtreler ve daha fazlasını ekleyebilirsiniz.
Denetleyici Ekleme
Uygulamanıza bir denetleyici ekleyin ve
ng-controlleryönergeyle birlikte denetleyiciye bakın:
Örnek
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var
app
= angular.module("myApp",
[]);
app.controller("myCtrl", function($scope) {
$scope.firstName
= "John";
$scope.lastName
= "Doe";
});
</script>
Bu öğreticide daha sonra denetleyiciler hakkında daha fazla bilgi edineceksiniz.
Direktif Ekleme
AngularJS, uygulamanıza işlevsellik eklemek için kullanabileceğiniz bir dizi yerleşik yönergeye sahiptir.
Tam bir referans için, AngularJS yönerge referansımızı ziyaret edin .
Ek olarak, uygulamalarınıza kendi yönergelerinizi eklemek için modülü kullanabilirsiniz:
Örnek
<div ng-app="myApp" w3-test-directive></div>
<script>
var app =
angular.module("myApp", []);
app.directive("w3TestDirective",
function() {
return {
template : "I was made in a directive constructor!"
};
});
</script>
Bu öğreticide daha sonra yönergeler hakkında daha fazla bilgi edineceksiniz.
Dosyalardaki Modüller ve Denetleyiciler
AngularJS uygulamalarında modülü ve denetleyicileri JavaScript dosyalarına yerleştirmek yaygındır.
Bu örnekte, "myApp.js" bir uygulama modülü tanımı içerirken, "myCtrl.js" denetleyiciyi içerir:
Örnek
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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ımındaki [] parametresi, bağımlı modülleri tanımlamak için kullanılabilir.
[] parametresi olmadan yeni bir modül oluşturmazsınız , ancak mevcut olanı alırsınız .
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
İşlevler Genel Ad Alanını Kirletebilir
JavaScript'te global işlevlerden kaçınılmalıdır. Diğer komut dosyaları tarafından kolayca üzerlerine yazılabilir veya yok edilebilirler.
AngularJS modülleri, tüm işlevleri modülde yerel tutarak bu sorunu azaltır.
Kitaplık Ne Zaman Yüklenir
HTML uygulamalarında, komut dosyalarını öğenin sonuna yerleştirmek yaygın olsa da,
AngularJS <body>kitaplığını .<head><body>
Bunun nedeni, çağrıların angular.moduleyalnızca kitaplık yüklendikten sonra derlenebilmesidir.
Örnek
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>