Moduły AngularJS

Moduł AngularJS definiuje aplikację.

Moduł jest kontenerem różnych części aplikacji.

Moduł jest kontenerem kontrolera aplikacji.

Kontroler zawsze należy do pewnego modułu.

Utwórz moduł

Poprzez użycie funkcji AngularJS,angular.module Utwórz moduł:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" parametr oznacza element HTML, w którym aplikacja będzie działać.

Teraz możesz dodać kontrolery, instrukcje, filtry itp. do swojej aplikacji AngularJS.

Dodawanie kontrolera

Dodaj kontroler do swojej aplikacji, używając ng-controller instrukcja odnosi się do kontrolera:

przykładowa

<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>

Spróbuj sam

Dowiedz się więcej o kontrolerach w dalszej części tego przewodnika.

Dodawanie instrukcji

AngularJS ma zestaw wbudowanych instrukcji, które możesz użyć do dodania funkcji do aplikacji.

Dla pełnej dokumentacji odwiedź naszą stronę z referencją do instrukcji AngularJS.

Ponadto, możesz dodać własne instrukcje do swojej aplikacji za pomocą modułów:

przykładowa

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "Zostałem stworzony w konstruktorze instrukcji!"
  };
});
</script>

Spróbuj sam

Dowiedz się więcej o instrukcjach w dalszej części tego przewodnika.

moduły i kontrolery w pliku

W aplikacjach AngularJS umieszczanie modułów i kontrolerów w plikach JavaScript jest dość powszechne.

W tym przykładzie, "myApp.js" zawiera definicję modułu aplikacji, a "myCtrl.js" zawiera kontroler:

przykładowa

<!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>

Spróbuj sam

myApp.js

var app = angular.module("myApp", []);

Parametr [] w definicji modułu można użyć do zdefiniowania zależnych modułów.

Jeśli nie ma parametrów [], to nie tworzysz nowego modułu, ale pobierasz istniejący moduł.

myCtrl.js

app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName= "Gates";
});

funkcje mogą zanieczyścić globalną przestrzeń nazw

W JavaScriptie należy unikać użycia funkcji globalnych. Są one łatwo nadpisywane lub niszczane przez inne skrypty.

Moduły AngularJS zmniejszają ten problem, zatrzymując wszystkie funkcje w lokalnym środowisku modułu.

kiedy łączyć bibliotekę

choć w aplikacjach HTML umieszczanie skryptów w <body> elementów na końcu jest dość powszechne, ale zalecam, abyście wstawiali <head> lub <body> na początku załadować bibliotekę AngularJS.

ponieważ tylko po załadowaniu biblioteki można kompilować odwołania do angular.module wywołania.

przykładowa

<!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>

Spróbuj sam