Модули 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
= "John";
$scope.lastName
= "Doe";
});
</script>
Вы узнаете больше о контроллерах позже в этом руководстве.
Добавление директивы
AngularJS имеет набор встроенных директив, которые вы можете использовать для добавления функциональности в ваше приложение.
Для получения полной справки посетите наш справочник по директивам AngularJS .
Кроме того, вы можете использовать модуль для добавления собственных директив в ваши приложения:
Пример
<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>
Вы узнаете больше о директивах позже в этом руководстве.
Модули и контроллеры в файлах
В приложениях AngularJS принято помещать модуль и контроллеры в файлы JavaScript.
В этом примере «myApp.js» содержит определение модуля приложения, а «myCtrl.js» содержит контроллер:
Пример
<!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>
myApp.js
var app = angular.module("myApp", []);
Параметр [] в определении модуля может использоваться для определения зависимых модулей.
Без параметра [] вы не создаете новый модуль, а извлекаете существующий.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
Функции могут загрязнять глобальное пространство имен
В JavaScript следует избегать глобальных функций. Они могут быть легко перезаписаны или уничтожены другими скриптами.
Модули AngularJS уменьшают эту проблему, сохраняя все функции локальными для модуля.
Когда загружать библиотеку
Хотя в приложениях HTML принято размещать скрипты в конце
<body>элемента, рекомендуется загружать библиотеку AngularJS либо в <head>файле <body>.
Это связано с тем, что вызовы angular.moduleмогут быть скомпилированы только после загрузки библиотеки.
Пример
<!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>