Приложение AngularJS в основном полагается на контроллеры для управления потоком данных в приложении. Контроллер определяется с помощью директивы ng-controller. Контроллер - это объект JavaScript, содержащий атрибуты / свойства и функции. Каждый контроллер принимает $scope в качестве параметра, который относится к приложению / модулю, который контроллер должен контролировать.
Внимание!!!
Если примеры не отображаются на странице или искажены, проверьте не блокирует ли их браузер!
Opera
![Свободу АНГУЛЯРУ в Opera!!! )))]( "Свободу АНГУЛЯРУ в Opera!!! )))")
Google Chrome
![Свободу АНГУЛЯРУ в Google Chrome!!! )))]( "Свободу АНГУЛЯРУ в Google Chrome!!! )))")
Mozilla Firefox
![Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))]( "Свободу АНГУЛЯРУ в Mozilla Firefox!!! )))")
Yandex
![Свободу АНГУЛЯРУ в Yandex!!! )))]( "Свободу АНГУЛЯРУ в Yandex!!! )))")
<div ng-app = "" ng-controller = "studentController"> ... </div>
Здесь мы объявили контроллер studentController, используя директиву ng-controller. В качестве следующего шага мы определим studentController следующим образом:
<script>
function studentController($scope) {
$scope.student = {
firstName: "Иван",
lastName: "Тайга",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
}
</script>
- StudentController определяется как объект JavaScript с аргументом $scope в качестве аргумента.
- $Scope относится к приложению, которое должно использовать объект studentController.
- $Scope.student - свойство объекта studentController.
- FirstName и lastName - это два свойства объекта $scope.student. Мы передали им значения по умолчанию.
- FullName - это функция объекта $scope.student, задачей которого является возвращение комбинированного имени.
- В функции fullName мы получаем объект-ученик, а затем возвращаем комбинированное имя.
- В качестве примечания мы также можем определить объект контроллера в отдельном JS-файле и ссылаться на этот файл на странице html.
Теперь мы можем использовать свойство studentController для учащихся с использованием ng-модели или используя выражения следующим образом.
Enter first name: <input type = "text" ng-model = "student.firstName"><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
- Мы ограничили student.firstName и student.lastname двумя полями ввода.
- Мы ограничили student.fullName () в HTML.
- Теперь, когда вы вводите что-либо в поля ввода имени и фамилии, вы можете увидеть, как полное имя автоматически обновляется.
Пример
В следующем примере рассмотрено использование контроллера.
testAngularJS.htm
<html>
<head>
<title>Angular JS Controller</title>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "mainApp" ng-controller = "studentController">
Enter first name: <input type = "text" ng-model = "student.firstName"><br><br>
Enter last name: <input type = "text" ng-model = "student.lastName"><br>
<br>
You are entering: {{student.fullName()}}
</div>
<script>
var mainApp = angular.module("mainApp", []);
mainApp.controller('studentController', function($scope) {
$scope.student = {
firstName: "Иван",
lastName: "Тайга",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>
Enter last name:
You are entering: {{student.fullName()}}
