Notes d'étude de base AngularJS Controller_AngularJS-js tutoriel-php.cn

Notes d'étude de base AngularJS Controller_AngularJS

WBOY

Libérer： 2016-05-16 15:59:53

original

1097 Les gens l'ont consulté

Le contrôleur AngularJS est utilisé pour contrôler les données des applications AngularJS.

Les contrôleurs AngularJS sont des objets JavaScript ordinaires.

Contrôleur AngularJS
Les applications AngularJS sont contrôlées via des contrôleurs.

La directive ng-controller définit un contrôleur d'application.

Un contrôleur est un objet JavaScript qui peut être créé via des constructeurs d'objets JavaScript standard.

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

Copier après la connexion

Explication du code :

L'application AngularJS est définie par ng-app="myApp". La portée effective de l'application se situe dans le

où se trouve ng-app.

　ng-controller="myCtrl" l'attribut est une directive AngularJS, qui définit un contrôleur.

La fonction myCtrl est une fonction JavaScript ordinaire.

AngularJS utilise l'objet $scope pour appeler les contrôleurs.

Dans AngularJS, $scope est un objet d'application (c'est-à-dire le propriétaire des variables et des fonctions d'application).

Le contrôleur contient deux propriétés (ou variables) : firstName et lastName. Ils sont attachés à l’objet $scope.

La directive ng-model lie la valeur de la balise d'entrée aux propriétés du contrôleur (firstName et lastName).

Méthodes du contrôleur
L'exemple ci-dessus montre que l'objet contrôleur contient deux propriétés : lastName et firstName.

Les contrôleurs peuvent également contenir des méthodes (attribuer des fonctions à des variables) :

<div ng-app="myApp" ng-controller="personCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $scope.fullName = function() {
    return $scope.firstName + " " + $scope.lastName;
  }
});
</script>

Copier après la connexion

Mettre le contrôleur dans un fichier externe
Dans les applications volumineuses, le code du contrôleur est souvent écrit dans des fichiers externes.

Copiez le code dans la balise

Derniers articles par auteur