Moduł angularjs definiuje aplikację.
Moduł jest kontenerem dla różnych częściach aplikacji.
Moduł jest pojemnik dla kontrolerów aplikacji.
Kontrolery zawsze należą do modułu.
Tworzenie modułu
Moduł jest tworzony przy użyciu funkcji angularjs angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>Parametr "myApp" odnosi się do elementu HTML, w którym aplikacja będzie działać.
Teraz można dodać kontrolery, dyrektywy, filtry i inne, do aplikacji angularjs.
Dodawanie kontrolera
Dodaj kontroler do aplikacji, oraz zapoznać się z kontrolerem z ng-controller dyrektywy:
Przykład
<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>
Spróbuj sam " Dowiesz się więcej o kontrolerach w dalszej części tego podręcznika.
Dodanie dyrektywę
Angularjs posiada zestaw wbudowanych dyrektyw, które można użyć, aby rozszerzyć funkcjonalność aplikacji.
Dla pełnego odniesienia, odwiedź nasze dyrektywa odnosi angularjs .
Dodatkowo można użyć modułu dodać własne wytyczne do aplikacji:
Przykład
<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> Spróbuj sam " Dowiesz się więcej na temat dyrektyw w dalszej części tego podręcznika.
Moduły i kontrolery w plikach
Jest to powszechne w aplikacji angularjs umieścić moduł i kontrolerów w plikach JavaScript.
W tym przykładzie "myApp.js" zawiera definicję modułu aplikacji, podczas gdy "myCtrl.js" zawiera kontroler:
Przykład
<!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>
Spróbuj sam " myApp.js
var app = angular.module( "myApp" , []);
 | W [] parametrów w definicji modułu mogą być stosowane w celu określenia powiązanych modułów. |
|---|
| Bez [] parametru, nie tworzysz nowy moduł, ale pobierając istniejący. |
|---|
myCtrl.js
app.controller( "myCtrl" , function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Funkcje mogą zanieczyszczać globalnej przestrzeni nazw
Funkcje globalne należy unikać w JavaScript. Można je łatwo zostać zastąpione lub zniszczone przez inne skrypty.
Angularjs moduły zmniejsza ten problem, przy zachowaniu wszystkich funkcji lokalnych do modułu.
Kiedy załadować biblioteki
Choć jest to powszechne w aplikacji HTML, aby umieścić skrypty na końcu <body> elementu, zaleca się, aby załadować bibliotekę angularjs albo w <head> lub na początku <body> .
To dlatego, że rozmowy do angular.module można sporządzić jedynie po biblioteka została załadowana.
Przykład
<!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>
Spróbuj sam "