Модули AngularJS

Модуль AngularJS определяет приложение.

Модуль является контейнером для различных частей приложения.

Модуль является контейнером для контроллера приложения.

Контроллер всегда принадлежит к определенному модулю.

Создание модуля

Используя функции AngularJS,angular.module Создание модуля:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
"myApp" параметр указывает на HTML элемент, в котором будет работать приложение.

Теперь вы можете добавлять контроллеры, директивы, фильтры и т.д. в ваше приложение AngularJS.

Добавление контроллера

Добавьте контроллер в ваше приложение, используя ng-controller Директива ссылается на контроллер:

пример

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

Попробуйте сами

Вы узнаете больше о контроллерах в latter части этого руководства.

Добавление директив

AngularJS имеет набор встроенных директив, которые можно использовать для добавления функциональности в приложение.

Для полных сведений обратитесь к нашей справке по директивам AngularJS.

Кроме того, вы можете использовать модуль для добавления своих директив в приложение:

пример

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "Я был создан в конструкторе директивы!"
  };
});
</script>

Попробуйте сами

Вы узнаете больше о директивах в latter части этого руководства.

модули и контроллеры в файле

В приложениях AngularJS модули и контроллеры частоplacing в файлах JavaScript.

В этом примере, "myApp.js" содержит определение модуля приложения, а "myCtrl.js" содержит контроллер:

пример

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

Попробуйте сами

myApp.js

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

Параметры [] в определении модуля могут использоваться для определения зависимых модулей.

Если у вас нет [] параметров, вы не создаете новый модуль, а получаете существующий.

myCtrl.js

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

Функции могут загрязнять глобальное пространство имен

В JavaScript следует избегать использования глобальных функций. Их легко переписать или разрушить другими скриптами.

Модули AngularJS уменьшают эту проблему, сохраняя все функции в локальном пространстве модуля.

когда загружать библиотеку

хотя в приложениях HTML частоplacing скриптов <body> в конце элементов <head> или <body> в начале загрузить библиотеку AngularJS.

Это потому что только после загрузки библиотеки можно компилировать angular.module применения.

пример

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

Попробуйте сами