Moduły AngularJS
Moduł AngularJS definiuje aplikację.
Moduł jest pojemnikiem na różne części aplikacji.
Moduł jest kontenerem dla kontrolerów aplikacji.
Kontrolery zawsze należą do modułu.
Tworzenie modułu
Moduł jest tworzony za pomocą funkcji AngularJSangular.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żesz dodawać kontrolery, dyrektywy, filtry i nie tylko do swojej aplikacji AngularJS.
Dodawanie kontrolera
Dodaj kontroler do swojej aplikacji i odnieś się do kontrolera za pomocą
ng-controllerdyrektywy:
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>
Więcej o kontrolerach dowiesz się w dalszej części tego samouczka.
Dodawanie dyrektywy
AngularJS ma zestaw wbudowanych dyrektyw, których możesz użyć, aby dodać funkcjonalność do swojej aplikacji.
Aby uzyskać pełne informacje, odwiedź naszą dokumentację dotyczącą dyrektywy AngularJS .
Dodatkowo możesz użyć modułu do dodawania własnych dyrektyw do swoich 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>
Więcej o dyrektywach dowiesz się w dalszej części tego samouczka.
Moduły i kontrolery w plikach
W aplikacjach AngularJS często umieszcza się moduł i kontrolery w plikach JavaScript.
W tym przykładzie „myApp.js” zawiera definicję modułu aplikacji, a „myCtrl.js” zawiera kontroler:
Przykład
<!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>
mojaAplikacja.js
var app = angular.module("myApp", []);
Parametr [] w definicji modułu może służyć do definiowania modułów zależnych.
Bez parametru [] nie tworzysz nowego modułu, ale pobierasz istniejący.
mójCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Funkcje mogą zanieczyszczać globalną przestrzeń nazw
W JavaScript należy unikać funkcji globalnych. Mogą być łatwo nadpisane lub zniszczone przez inne skrypty.
Moduły AngularJS zmniejszają ten problem, utrzymując wszystkie funkcje lokalne dla modułu.
Kiedy załadować bibliotekę?
Chociaż w aplikacjach HTML często umieszcza się skrypty na końcu
<body>elementu, zaleca się załadowanie biblioteki AngularJS na <head>początku lub na początku <body>.
Dzieje się tak, ponieważ wywołania do angular.modulemożna skompilować dopiero po załadowaniu biblioteki.
Przykład
<!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>