Maison >interface Web >js tutoriel >Une brève introduction à l'utilisation des contrôleurs AngularJS_AngularJS

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

WBOYoriginal: 2016-05-16 15:54:391016parcourir

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>

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>

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

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>

Sortie

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

2015616120726250.png (679×365)

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une brève introduction à la prise en charge par JavaScript du modèle objet de document traditionnel_Connaissances de baseArticle suivant：Une brève introduction à la prise en charge par JavaScript du modèle objet de document traditionnel_Connaissances de base

Articles Liés

Voir plus