Bir angularjs modülü bir uygulama tanımlamaktadır.
Modül, bir uygulamanın çeşitli parçaları için bir kaptır.
modülünün uygulama kontrol için bir kaptır.
Kontrolörler hep bir modül aittir.
bir modül yaratılması
Bir modül angularjs fonksiyonu kullanılarak oluşturulur angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>"myApp" parametresi uygulaması çalışacağı bir HTML elemanına değinmektedir.
Artık angularjs uygulamaya, kontrolörler, direktifleri, filtreler ve daha ekleyebilirsiniz.
Bir Kontrolör ekleme
Uygulamanıza bir denetleyici ekleyin ve denetleyiciye bakınız ng-controller yönergesi:
Ö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>
Kendin dene " Daha sonra bu eğitimde kontrolörleri hakkında daha fazla bilgi edineceksiniz.
Bir Direktifi ekleme
Angularjs uygulamanıza işlevsellik eklemek için kullanabileceğiniz yerleşik bir yönerge kümesi vardır.
Tam Başvuru için bizim ziyaret angularjs referansı direktifi .
Ayrıca uygulamalarınıza kendi direktifleri eklemek için modülünü 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> Kendin dene " Daha sonra bu eğitimde direktifler hakkında daha fazla bilgi edineceksiniz.
Dosyalarda Modüller ve Kontrolörler
Angularjs uygulamaları modülü ve JavaScript dosyalarında denetleyicileri koymak için de yaygındır.
Bu örnekte, "myApp.js" ise, bir uygulama modülü tanımını içeren "myCtrl.js" denetleyicisi içerir:
Örnek
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Kendin dene " myApp.js
var app = angular.module( "myApp" , []);
Modül tanımı [], parametreye bağlı modülleri tanımlamak için kullanılabilir.
[] Parametresi olmadan, yeni bir modül oluşturmak ancak varolan bir alınırken değildir.
myCtrl.js
app.controller( "myCtrl" , function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Fonksiyonlar Genel Ad Alanı Kirletmiyor edebilirsiniz
Küresel fonksiyonlar JavaScript kaçınılmalıdır. Kolayca üzerine veya diğer komut tarafından yok edilebilir.
modüller modülüne yerel tüm fonksiyonları tutarak, bu problemi azaltır angularjs.
Ne zaman Kütüphane Yük
O sonunda komut dosyalarını HTML uygulamalarında yaygın olmakla birlikte <body> elemanı, ya angularjs kitaplığı yüklenemedi önerilir <head> ya başında <body> .
Yapılan çağrılar Bunun nedeni angular.module kütüphane yüklendikten sonra sadece derlenebilir.
Örnek
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Kendin dene "