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="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
Попробуй сам "