Приложение AngularJS в основном опирается на контроллеры для управления потоком данных в приложении. Контроллер определяется с помощью директивы ng-controller . Контроллер — это объект JavaScript, который содержит атрибуты / свойства и функции. Каждый контроллер принимает $ scope в качестве параметра, который ссылается на приложение / модуль, который должен обрабатывать контроллер.
<div ng-app = "" ng-controller = "studentController"> ... </div>
Здесь мы объявляем контроллер с именем studentController , используя директиву ng-controller. Мы определяем это следующим образом —
<script> function studentController($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", 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 определяется как объект 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.
-
Теперь, когда вы вводите что-либо в поля ввода имени и фамилии, вы можете видеть, что полное имя обновляется автоматически.
Мы связали student.firstName и student.lastname с двумя полями ввода.
Мы привязали student.fullName () к HTML.
Теперь, когда вы вводите что-либо в поля ввода имени и фамилии, вы можете видеть, что полное имя обновляется автоматически.
пример
В следующем примере показано использование контроллера —
testAngularJS.htm
<html>
<head>
<title>Angular JS Controller</title>
<script src = "https://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: "Mahesh",
lastName: "Parashar",
fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</body>
</html>
Выход
Откройте файл testAngularJS.htm в веб-браузере и посмотрите результат.