Controller AngularJS

L'applicazione AngularJS si affida principalmente ai controller per controllare il flusso dei dati nell'applicazione. I controller sono definiti utilizzandong-controllerL'istruzione definisce. Il controller è un oggetto JavaScript che contiene proprietà / proprietà e funzioni. Ogni controller accetta $scope come parametro, che rappresenta l'applicazione / modulo che il controller deve gestire.

<div　ng-app　=　""　ng-controller　=　"studentController">
　　　...</div>

qui, utilizziamo l'istruzione ng-controller per dichiarare un nomestudentControllerIl controllore. Definiamo come segue-

<script>
　　　function studentController($scope) {
　　　　　　$scope.student = {
　　　　　　　　　firstName: "Mahesh",
　　　　　　　　　lastName: "Parashar",
　　　　　　　　　
　　　　　　　　　fullName: function() {
　　　　　　　　　　　　var studentObject;
　　　　　　　　　　　　studentObject = $scope.student;
　　　　　　　　　　　　return studentObject.firstName + " " + studentObject.lastName;
　　　　　　　　　}
　　　　　　});
　　　}
</script>

studentController è definito come un oggetto JavaScript e viene passato come parametro $scope.
$scope fa riferimento all'applicazione che utilizza l'oggetto studentController.
$scope.student è un attributo dell'oggetto studentController.
firstName e lastName sono due attributi dell'oggetto $scope.student. Passiamo loro un valore predefinito.
L'attributo fullName è una funzione dell'oggetto $scope.student, che restituisce il nome combinato.
Nella funzione fullName, otteniamo l'oggetto Student e restituiamo il nome combinato.
Notare che possiamo anche definire l'oggetto controllore in un file JS separato e referenziarlo nella pagina HTML.

Ora possiamo utilizzare ng-model o l'espressione seguente per utilizzare l'attributo student dello studentController:

Inserisci il nome: <input type="text" ng-model="student.firstName"><br>
Inserisci il cognome: <input type="text" ng-model="student.lastName"><br><br>
Stai inserendo: {{student.fullName()}}

Abbiamo associato student.firstName e student.lastName ai due input.
Abbiamo associato student.fullName() all'HTML.
Ora, ogni volta che scrivi qualcosa negli input nome e cognome, puoi vedere che il nome completo viene aggiornato automaticamente.

Esempio online

Di seguito è mostrato un esempio di utilizzo del controllore-

testAngularJS.htm

Esempio

<html>
　　　<head>
　　　　　　<title>Controllore AngularJS</title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js"></script>
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Esempio di Controllore AngularJS</h2>
　　　　　　
　　　　　　<div ng-app="mainApp" ng-controller="studentController">
　　　　　　　　　Inserisci il nome: <input type="text" ng-model="student.firstName"><br>
　　　　　　　　　<br>
　　　　　　　　　Inserisci il cognome: <input type="text" ng-model="student.lastName"><br>
　　　　　　　　　<br>
　　　　　　　　　Stai inserendo: {{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>

Prova a vedere‹/›

Risultato dell'Output

Apri il file nel browser webtestAngularJS.htme visualizza i risultati.

Filtri AngularJS Espressioni AngularJS

AngularJS Tutorial di Base

Controller AngularJS

Esempio online

testAngularJS.htm