Application AngularJS

Il est maintenant temps de créer une véritable application Web (SPA) monopage AngularJS.

Exemple d'application AngularJS

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

Explication de l'application

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//cdn.bootcss.com/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="myNoteApp" ng-controller="myNoteCtrl">

<h2>我的笔记</h2>


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

<p>
<button ng-click="save()">保存</button>
<button ng-click="clear()">清除</button>
</p>

<p>剩余字数: <span ng-bind="left()"></span></p>

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

</body>
</html>

Exemple d'exécution »

Cliquez le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Fichier d'application "myNoteApp.js":

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

Fichier du contrôleur "myNoteCtrl.js":

app.controller("myNoteCtrl", function($scope) {
$scope.message = "";
$scope.left = function() {retour 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":

<div> controller="< Portée de 🎜>myNoteCtrl":

ng-model lie <textarea> à la variable du contrôleur message :

Les deux événements ng-click appellent les fonctions du contrôleur clear() et save() :

<bouton ng-click="save()">Enregistrer</bouton>
<bouton ng-click=" effacer ()">Effacer</bouton>

< Le L'instruction 🎜>ng-bind lie la fonction du contrôleur left() à <span> pour afficher les caractères restants :

Nombre de caractères restants :

Le fichier de la bibliothèque d'application doit être chargé dans AngularJs avant de pouvoir être exécuté :

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

Architecture d'application AngularJS

L'exemple ci-dessus est une application Web (SPA) monopage 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 d'application.

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

Résumé – Comment ça marche ? La directive

ng-app est située sous l'élément racine de l'application.

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

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

AngularJS démarre automatiquement dans l'événement HTML DOMContentLoaded. si trouvé Directive ng-app, AngularJS charge le module dans la directive et compile ng-app en tant que racine de l'application.

La racine de l'application peut être la page entière, ou une petite partie de la page, si c'est une petite partie, elle sera compilée et exécutée plus rapidement.

← Routage AngularJS