Contrôleur AngularJS
Le contrôleur AngularJS contrôle les données des applications AngularJS.
Le contrôleur AngularJS est un objet JavaScript ordinaire.
Contrôleur AngularJS
L'application AngularJS est contrôlée par le contrôleur.
La directive NG-contrôleur définit le contrôleur d'application.
Un contrôleur est un objet JavaScript créé par le constructeur d'un objet JavaScript standard.
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "Personctrl"> Name: <Input Type = "Text" ng-Model = "FirstName"> <br> Name: {{fullName ()}} </div> <cript> var app = angular.module ('myApp', []); App.Controller ('Personctrl', function ($ SCOPE) {$ SCOPE.FIRSTNAME = ". $ scope.lastName = "Doe"; $ scope.fullName = fonction () {return $ scope.firstname + "" + $ scope.lastName;Résultats en cours:
nom:
nom de famille:
Nom: John Doe
Les applications AngularJS sont définies par NG-App. L'application s'exécute dans <v>.
La propriété NG-Controller = "MYCTRL" est une directive AngularJS. Utilisé pour définir un contrôleur.
La fonction MYCTRL est une fonction JavaScript.
AngularJS utilise l'objet $ Scope pour appeler le contrôleur.
Dans AngularJS, $ Scope est un objet d'application (appartient aux variables et fonctions d'application).
La portée $ du contrôleur (équivalent à la portée et à la portée de contrôle) est utilisée pour enregistrer l'objet modèle AngularJS.
Le contrôleur crée deux propriétés (FirstName et LastName) dans la portée.
La directive du modèle NG lie le domaine d'entrée aux propriétés du contrôleur (FirstName et LastName).
Méthode du contrôleur
L'exemple ci-dessus démontre un objet de contrôleur avec deux propriétés: LastName et FirstName.
Le contrôleur peut également avoir des méthodes (variables et fonctions):
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "Personctrl"> Name: <Input Type = "Text" ng-Model = "FirstName"> <br> Name: {{fullName ()}} </div> <cript> var app = angular.module ('myApp', []); App.Controller ('Personctrl', function ($ SCOPE) {$ SCOPE.FIRSTNAME = ". $ scope.lastName = "Doe"; $ scope.fullName = fonction () {return $ scope.firstname + "" + $ scope.lastName;Effet de course:
nom:
nom de famille:
Nom: John Doe
Contrôleurs dans des fichiers externes
Dans les grandes applications, le contrôleur est généralement stocké dans un fichier externe.
Copiez simplement le code dans la balise <cript> dans un fichier externe nommé PersonController.js:
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "Personctrl"> Name: <Input Type = "Text" ng-model = "FirstName"> <br> Name: <Input Type = "Text" ng-model = "LastName"> <br> <br> Name: {{FirstName + "" + LastName}} </ Div> <Script src = "PersonController.js"> </ script> </ body> </html>Résultats en cours:
nom:
nom de famille:
Nom: John Doe
Autres exemples
L'exemple suivant crée un nouveau fichier de contrôleur:
angular.module ('myApp', []). Controller ('namesctrl', function ($ scope) {$ scope.names = [{name: 'Jani', country: 'norway'}, {name: 'hege', country: 'sweden'}, {name: 'kai', country: 'denmark'}];});Enregistrez le fichier en tant que noms de nom
Ensuite, utilisez le fichier de contrôleur dans l'application:
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </-head> <body> <div ng-app = "MyAppr" ng-ConsrOr = "> <body> <ul> <li ng-repeat = "x in noms"> {{x.name + ',' + x.country}} </li> </ul> </div> <script src = "namesController.js"> </ script> </ body> </html>Effet de course:
Ce qui précède est la compilation des données du contrôleur AngularJS et sera complétée plus tard.