AngularJS Модуль

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

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

Модули — это контейнеры для контроллеров приложения.

Контроллеры обычно принадлежат модулю.

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

Вы можете использовать функциюangular.moduleиз AngularJS для создания модуля:

<div ng-app="myApp">...</div>

<script>

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

</script>

Параметр "myApp" соответствует HTML-элементу, который запускает приложение.

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

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

Вы можете использовать директивуng-controller, чтобы добавить контроллер в приложение:

Пример AngularJS

<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 Controllersузнать больше о контроллерах.

Добавить директиву

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

Для полного справочного руководства см.AngularJS Reference Manual。

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

Пример AngularJS

<div ng-app="myApp" example-directive></div>

<script>

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

app.directive("exampleDirective", function() {
    return {
        template : "Я был создан в конструкторе директивы!"
    };
});
</script>

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

Вы можете узнать больше о директивах в главеДирективы AngularJS.

Модули и контроллеры включаются в JS-файлы

Обычно приложения AngularJS включают модули и контроллеры в JavaScript-файлы.

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

Пример AngularJS

<!DOCTYPE html>
<html>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/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", []);

Note В определении модуля параметр [] используется для определения зависимостей модуля.
Квадратные скобки [] указывают, что у модуля нет зависимостей; если есть зависимости, имена зависимых модулей пишутся в скобках.

myCtrl.js

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

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

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

Модули AngularJS помещают все функции в область видимости модуля, что позволяет избежать этой проблемы.

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

Note В наших примерах все библиотеки AngularJS загружаются в head HTML-документа.

Для HTML-приложений обычно рекомендуется размещать все скрипты в нижней части элемента <body>.

Это повышает скорость загрузки страницы, потому что загрузка HTML не ограничивается загрузкой скриптов.

Во многих наших примерах AngularJS вы увидите, что библиотека AngularJS загружается в разделе <head> документа.

В наших примерах AngularJS загружается в элементе <head>, потому что вызовы angular.module можно выполнять только после завершения загрузки библиотеки.

Другое решение — загрузить библиотеку AngularJS в элементе <body>, но она должна быть размещена перед вашими скриптами AngularJS:

Пример AngularJS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

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

Попробуйте сами »
Другие расширения