Une brève introduction à l'utilisation des contrôleurs AngularJS

Une brève introduction à l'utilisation des contrôleurs AngularJS_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Libérer： 2016-05-16 15:54:39

original

1036 Les gens l'ont consulté

Les applications AngularJS s'appuient principalement sur des contrôleurs pour contrôler le flux de données au sein de l'application. Les contrôleurs sont définis à l'aide de la directive ng-controller. Un contrôleur est une fonction qui contient des propriétés/propriétés et des objets JavaScript. Chaque contrôleur accepte le paramètre $scope pour spécifier l'application/le module contrôlé par le contrôleur.

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

Copier après la connexion

Ici, nous avons déclaré le contrôleur studentController à l'aide de la directive ng-controller. Comme prochaine étape, nous définirons studentController comme suit

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

Copier après la connexion

studentController définit $scope comme paramètre d'objet JavaScript.
$scope représente l'application, en utilisant l'objet studentController.
$scope.student est une propriété de l'objet studentController.
FirstName et lastName sont deux propriétés de l'objet $scope.student. Nous leur avons transmis des valeurs par défaut.
fullName est une fonction de l'objet $scope.student, sa tâche est de renvoyer le nom fusionné.
Dans la fonction fullName, nous voulons maintenant que l'objet étudiant renvoie le nom combiné.
Pour note, vous pouvez également définir l'objet contrôleur dans un fichier JS séparé et placer le fichier correspondant dans la page HTML.

Vous pouvez maintenant utiliser l'attribut studentController en utilisant ng-model ou en utilisant les expressions comme suit.

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()}}

Copier après la connexion

Il y a maintenant deux zones de saisie : student.firstName et student.lastname.
La méthode student.fullName() est désormais ajoutée au HTML.
Désormais, tant que vous saisissez ce que vous saisissez dans les zones de saisie du prénom et du nom, vous pouvez voir les deux noms se mettre à jour automatiquement.

Exemple

L'exemple suivant démontrera l'utilisation d'un contrôleur.
Le contenu du fichier testAngularJS.html est le suivant :

<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" 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>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Copier après la connexion

Sortie

Ouvrez textAngularJS.html dans un navigateur Web et voyez les résultats suivants :

2015616120726250.png (679×365)