| Пятница, 2 августа, 2013
Метки: AngularJS, Javascript Комментарии: 0
В Angular контроллер – это функция Javascript, которая служит для управления экземплярами объектов $scope, кроме корневого.
В основном контроллеры используются для двух целей:
Обычно в начале создания приложения нужно задать первоначальные значения для моделей объекта $scope.
Angular прикрепляет функцию конструктора контроллера к новому Angular объекту $scope (аналогично действию Javascript функции apply). Это значит, что Angular никогда не создает экземпляры контроллеров (например с помощью оператора new для контроллера). Конструкторы всегда прикрепляются к уже существующему объекту $scope.
Так задаются модели-свойства объекта $scope:
function GreetingCtrl($scope) {
$scope.greeting = 'Hola!';
}
В контроллере GreetingCtrl создается модель greeting, которая может быть доступна в шаблоне.
Стоит отметить. Большинство приведенных здесь примеров показывают создание функций для глобального объекта $scope. Это только демонстрация! В реальных приложениях нужно использовать метод .controller для вашего модуля Angular для вашего приложения, например так:
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingCtrl', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
Обратите внимание также, что используется запись в виде массива для явного определения зависимости контроллера от объекта $scope, предоставленным Angular.
Поведение объекта $scope – это методы, которые доступны в шаблонах и представлениях. Поведение взаимодействует и изменяет значения модели приложения.
Как уже было описано ранее любой Javascript объект или примитив присоединенный к объекту $scope является моделью. Также любые функции/методы объекта $scope доступны в шаблонах и представлениях, и они могут быть вызваны через выражения Angular через ng обработчиков событий, типа ngClick.
В общем, контроллер не должен пытаться выполнять слишком много работы. Он должен содержать только логику, необходимую для одного представления.
Самый распространенный способ держать контроллеры не перегруженными кодом – это делегировать работу, которая не нужна в контроллере, в сервисы. А затем использовать эти сервисы в контроллерах через паттерн внедрение зависимости.
Как не нужно использовать контроллеры:
<body ng-controller="SpicyCtrl">
<button ng-click="chiliSpicy()">Chili</button>
<button ng-click="jalapenoSpicy()">Jalapeño</button>
<p>The food is {{spice}} spicy!</p>
</body>
function SpicyCtrl($scope) {
$scope.spice = 'very';
$scope.chiliSpicy = function() {
$scope.spice = 'chili';
}
$scope.jalapenoSpicy = function() {
$scope.spice = 'jalapeño';
}
}
Отметим некоторые моменты в примере выше:
Copyright © CodeHint.ru 2013-2024 (v2.4.7 - работает на Angular Universal)Калькулятор инвест-портфеля