Une bonne façon de commencer à apprendre AngularJs est de créer l'application classique "Hello World!":
1. Créez un fichier HTML en utilisant votre éditeur de texte préféré, par exemple: helloworld.html.
2. Copiez le code source suivant dans votre fichier HTML.
3. Ouvrez ce fichier HTML dans un navigateur Web.
Code source:
La copie de code est la suivante:
<! doctype html>
<html ng-app>
<adal>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </ script>
</ head>
<body>
Bonjour le monde'}}!
</docy>
</html>
Veuillez exécuter le code ci-dessus dans votre navigateur pour voir l'effet.
Voyons maintenant de plus près le code et voyons ce qui se passe. Lorsque la page est chargée, la balise Ng-App dit à AngularJS de traiter l'intégralité de la page HTML et de bottiser l'application:
La copie de code est la suivante:
<html ng-app>
Cette ligne charge le script AngularJS:
La copie de code est la suivante:
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </ script>
(Pour plus de détails sur AngularJS gérant toute la page HTML, veuillez consulter Bootstrap.)
Enfin, le corps de la balise est le modèle de l'application, montrant nos salutations dans l'interface utilisateur:
La copie de code est la suivante:
Bonjour le monde'}}!
Notez que le contenu du {{}} tagué avec des accolades doubles est l'expression liée de la salutation, qui est une simple chaîne «monde».
Ci-dessous, regardons un exemple plus intéressant: lier une expression dynamique à notre texte de salutation à l'aide d'AngularJS.
Bonjour le monde angularjs!
Cet exemple démontre la liaison des données bidirectionnelles pour AngularJS:
1. Modifiez le document Helloworld.html créé plus tôt.
2. Copiez le code source suivant dans votre fichier HTML.
3. Actualisez la fenêtre du navigateur.
Code source:
La copie de code est la suivante:
<! doctype html>
<html ng-app>
<adal>
<script src = "http://code.angularjs.org/angular-1.0.1.min.js"> </ script>
</ head>
<body>
Votre nom: <entrée type = "text" ng-model = "yourname" placeholder = "world">
<hr>
Bonjour {{yourName || 'Monde'}}!
</docy>
</html>
Veuillez exécuter le code ci-dessus dans votre navigateur pour voir l'effet.
Cet exemple a les notes importantes suivantes:
1. Instruction d'entrée de texte <entrée ng-model = "yourname" /> est liée à une variable de modèle appelée votre nom.
2.
3. Vous n'avez pas besoin d'enregistrer un écouteur d'événements ou d'ajouter un gestionnaire d'événements pour l'application!
Essayez maintenant de taper votre nom dans la zone d'entrée et le nom que vous tapez sera mis à jour immédiatement et affiché dans la salutation. Il s'agit du concept de liaison des données bidirectionnelle AngularJS. Toute modification de la boîte d'entrée est immédiatement réfléchie à la variable du modèle (One Direction), et toutes les modifications de la variable du modèle sont immédiatement reflétées au texte de salutation (l'autre direction).
Analyse des applications AngularJS
Cette section décrit les trois composants des applications AngularJS et explique comment elles mappent au modèle de conception de contrôle-contrôle de modèle:
Modèles
Un modèle est un fichier que vous écrivez dans HTML et CSS pour présenter la vue de l'application. Vous pouvez ajouter de nouveaux élément et attribut des balises à HTML en tant que directives pour le compilateur AngularJS. Le compilateur AngularJS est entièrement extensible, ce qui signifie qu'avec AngularJS, vous pouvez créer vos propres balises HTML en HTML!
Logique et comportement d'application
La logique et le comportement de l'application sont les contrôleurs que vous définissez dans JavaScript. AngularJS est différent des applications AJAX standard, vous n'avez pas besoin d'écrire un auditeur ou un contrôleur DOM car ils sont déjà intégrés à AngularJS. Ces fonctionnalités rendent votre logique d'application facile à écrire, tester, maintenir et comprendre.
Données du modèle (données)
Le modèle est étendu à partir des propriétés des objets portée angularjs. Les données du modèle peuvent être un objet JavaScript, un tableau ou un type primitif, et peu importe, il est important qu'ils appartiennent tous à des objets à portée angularjs.
AngularJS maintient la synchronisation bidirectionnelle entre le modèle de données et l'interface d'interface de vue par portée. Une fois que l'état du modèle change, AngularJS actualisera immédiatement le reflété dans l'interface de vue et vice versa.
De plus, AngularJS offre également des fonctionnalités de service très utiles:
1. Les services sous-jacents comprennent l'injection de dépendance, les services XHR, le cache, le routage URL et les services abstraits du navigateur.
2. Vous pouvez également étendre et ajouter vos propres services d'application spécifiques.
3. Ces services peuvent vous permettre de rédiger des applications Web.