Les applications AngularJS reposent principalement sur les contrôleurs pour contrôler le flux de données dans l'application. Le contrôleur est défini à l'aide de l'instruction NG-contrôleur. 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 $ SPOPE pour spécifier l'application / module, qui est contrôlé par le contrôleur.
<div ng-app = "" ng-contrôleur = "StudentController"> ... </div>
Ici, nous avons déclaré un contrôleur Student Controller qui utilise la directive NG-contrôleur. En tant qu'étape suivante, nous définirons le Contrôleur étudiant 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 un 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 la valeur par défaut.
FullName est une fonction de l'objet $ Scope.Student, et sa tâche est de retourner le nom fusionné.
Dans la fonction FullName, nous voulons maintenant que l'objet étudiant renvoie le nom de la combinaison.
Comme illustration, il est également possible de définir l'objet contrôleur dans un fichier JS séparé et de mettre les pages HTML dans le fichier.
Vous pouvez désormais utiliser le modèle NG ou utiliser l'expression comme suit pour utiliser les propriétés de StudentController.
Entrez le prénom: <input type = "text" ng-model = "student.firstname"> <br> Entrez le nom de famille: <input type = "text" ng-model = "student.lastname"> <br> <br> Vous entrez: {{student.fullname ()}}Maintenant, il y a deux cases d'entrée: Student.FirstName et Student.lastName.
Maintenant, il y a la méthode Student.FullName () ajoutée à HTML.
Maintenant, entrez simplement le prénom et la zone d'entrée de LastName pour entrer quoi entrer, et vous pouvez voir que les deux noms sont automatiquement mis à jour.
exemple
L'exemple suivant montrera l'utilisation d'un contrôleur.
Le contenu du fichier testangularjs.html est le suivant:
<html> <éad- head> <ititle> Contrôleur JS angulaire </ title> </ head> <body> <h2> AngularJS Exemple d'application </h2> <div ng-app = "" ng-controller = "StudentController"> Entrez le prénom: <entrée type = "Text" ng-model = "Student.firstname"> <br> ng-model = "Student.lastName"> <br> <br> Vous entrez: {{Student.fullName ()}} </div> <cript> function StudentController ($ SCOPE) {$ SCOPE.STUDENT = {FirstName: "Mahesh", LastName: "Parashar", FullName: fonction () {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>Sortir
Ouvrez Textangularjs.html dans un navigateur Web et voyez les résultats suivants:
Ce qui précède est l'information triant le contrôleur AngularJS. Nous continuerons à régler les connaissances pertinentes à l'avenir. Merci pour votre soutien à ce site Web.