AngularJS 控制器

AngularJS应用程序主要依靠控制器来控制应用程序中的数据流。控制器是使用ng-controller指令定义的。控制器是一个JavaScript对象，其中包含属性/属性和函数。每个控制器都接受$scope作为参数，它表示控制器需要处理的应用程序/模块。

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

Ici, nous utilisons ng-l'instruction controller déclare un contrôleur nomméstudentControllerdu contrôleur. Nous le définissons comme suit-

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

studentController est défini comme un objet JavaScript et est passé en paramètre à $scope.
$scope fait référence à l'application utilisant l'objet studentController.
$scope.student est une propriété de l'objet studentController.
firstName et lastName sont deux attributs de l'objet $scope.student. Nous leur passons des valeurs par défaut.
L'attribut fullName est une fonction de l'objet $scope.student, qui retourne le nom combiné.
Dans la fonction fullName, nous obtenons l'objet Student, puis nous retournons le nom combiné.
Notez également que nous pouvons définir l'objet contrôleur dans un fichier JS séparé et l'ajouter à la page HTML.

Maintenant, nous pouvons utiliser ng-model ou l'expression suivante utilise l'attribut student du studentController:

Saisissez le prénom: <input type="text" ng-model="student.firstName"><br>
Saisissez le nom de famille: <input type="text" ng-model="student.lastName"><br><br>
您正在输入:　{{student.fullName()}}

Nous lions student.firstName et student.lastname aux deux champs de saisie.
Nous lions student.fullName() à HTML.
Maintenant, peu importe quand vous tapez quelque chose dans les champs de saisie du nom et du prénom, vous pouvez voir que le nom complet est automatiquement mis à jour.

Exemple en ligne

Le suivant est un exemple d'utilisation du contrôleur-

testAngularJS.htm

Exemple

<html>
　　　<head>
　　　　　　<title>Contrôleur AngularJS </title>
　　　　　　<script src="https://cdn.staticfile.org/angular.js/1.3.14/angular.min.js">.
　　　　　　</script>
　　　</head>
　　　
　　　<body>
　　　　　　<h2>Exemple de contrôleur AngularJS </h2>
　　　　　　
　　　　　　<div ng-app="mainApp" ng-controller="studentController">
　　　　　　　　　Saisissez le prénom: <input type="text" ng-model="student.firstName"><br>
　　　　　　　　　<br>
　　　　　　　　　Saisissez le nom de famille: <input type="text" ng-model　=　"student.lastName"><br>
　　　　　　　　　<br>
　　　　　　　　　您正在输入:　{{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并查看结果。

AngularJS 过滤器 AngularJS 表达式

AngularJS 基础教程

AngularJS 控制器

Exemple en ligne

testAngularJS.htm