AngularJS Application

Il est maintenant temps de créer une véritable application web AngularJS à page unique (SPA).

Exemple d'application AngularJS

Vous avez suffisamment appris sur AngularJS, et vous pouvez maintenant commencer à créer votre première application AngularJS :

Mes notes



Caractères restants :100


Explication de l'application

Exemples AngularJS

<html ng-app="myNoteApp">
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-controller="myNoteCtrl">

<h2>Mes notes</h2>

<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>

<p>
<button ng-click="save()">Enregistrer</button>
<button ng-click="clear()">Effacer</button>
</p>

<p>Nombre de caractères restants : <span ng-bind="left()"></span></p>

</div>

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

</body>
</html>

Essayez-le vous-même »

Le fichier d'application "myNoteApp.js" :

var app = angular.module("myNoteApp", []);

Le fichier du contrôleur "myNoteCtrl.js" :

app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left = function() {return 100 - $scope.message.length;};
    $scope.clear = function() {$scope.message = "";};
    $scope.save = function() {alert("Note Saved");};
});

L'élément <html> est le conteneur de l'application AngularJS : ng-app="myNoteApp" :

<html ng-app="myNoteApp">

L'élément <div> est la portée du contrôleur dans la page HTML : ng-controller="myNoteCtrl" :

<div ng-controller="myNoteCtrl">

ng-modelLa directive lie le <textarea> à la variable du contrôleur message:

<textarea ng-model="message" cols="40" rows="10"></textarea>

Deuxng-clickévénements invoquent les fonctions du contrôleurclear()etsave():

<button ng-click="save()">Enregistrer</button>
<button ng-click="clear()">Effacer</button>

ng-bindLes directives lient les fonctions du contrôleurleft()à <span>, servant à afficher les caractères restants :

Nombre de caractères restants : <span ng-bind="left()"></span>

Le fichier de bibliothèque de l'application doit être exécuté après le chargement d'AngularJS :

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

Architecture de l'application AngularJS

L'exemple ci-dessus est une application web monopage (SPA) AngularJS complète.

L'élément <html> contient l'application AngularJS (ng-app=).

L'élément <div> définit la portée du contrôleur AngularJS (ng-controller=).

Une application peut avoir plusieurs contrôleurs.

Le fichier d'application(my...App.js) définit le code du modèle de l'application.

Un ou plusieurs fichiers de contrôleur (my...Ctrl.js) définissent le code du contrôleur.

Résumé - Comment cela fonctionne-t-il ?

La directive ng-app est placée sur l'élément racine de l'application.

Pour une application web monopage (SPA), la racine de l'application est généralement l'élément <html>.

Une ou plusieurs directives ng-controller définissent les contrôleurs de l'application. Chaque contrôleur a sa propre portée : : l'élément HTML défini.

AngularJS démarre automatiquement sur l'événement HTML DOMContentLoaded. Si la directive ng-app est trouvée, AngularJS charge le module spécifié dans la directive et compile l'application avec ng-app comme racine.

La racine d'une application peut être la page entière, ou une petite partie de la page ; si c'est une petite partie, elle se compilera et s'exécutera plus rapidement.

autres extensions