AngularJS Tutoriel => Démarrer avec AngularJS

Remarques

AngularJS est un framework d’application Web conçu pour simplifier le développement d’applications côté client. Cette documentation concerne Angular 1.x , le prédécesseur de Angular 2, plus moderne, ou la documentation de Stack Overflow pour Angular 2 .

Versions

Version	Date de sortie
1.6.5	2017-07-03
1.6.4	2017-03-31
1.6.3	2017-03-08
1.6.2	2017-02-07
1.5.11	2017-01-13
1.6.1	2016-12-23
1.5.10	2016-12-15
1.6.0	2016-12-08
1.6.0-rc.2	2016-11-24
1.5.9	2016-11-24
1.6.0-rc.1	2016-11-21
1.6.0-rc.0	2016-10-26
1.2.32	2016-10-11
1.4.13	2016-10-10
1.2.31	2016-10-10
1.5.8	2016-07-22
1.2.30	2016-07-21
1.5.7	2016-06-15
1.4.12	2016-06-15
1.5.6	2016-05-27
1.4.11	2016-05-27
1.5.5	2016-04-18
1.5.4	2016-04-14
1.5.3	2016-03-25
1.5.2	2016-03-19
1.4.10	2016-03-16
1.5.1	2016-03-16
1.5.0	2016-02-05
1.5.0-rc.2	2016-01-28
1.4.9	2016-01-21
1.5.0-rc.1	2016-01-16
1.5.0-rc.0	2015-12-09
1.4.8	2015-11-20
1.5.0-beta.2	2015-11-18
1.4.7	2015-09-30
1.3.20	2015-09-30
1.2.29	2015-09-30
1.5.0-beta.1	2015-09-30
1.5.0-beta.0	2015-09-17
1.4.6	2015-09-17
1.3.19	2015-09-17
1.4.5	2015-08-28
1.3.18	2015-08-19
1.4.4	2015-08-13
1.4.3	2015-07-15
1.3.17	2015-07-07
1.4.2	2015-07-07
1.4.1	2015-06-16
1.3.16	2015-06-06
1.4.0	2015-05-27
1.4.0-rc.2	2015-05-12
1.4.0-rc.1	2015-04-24
1.4.0-rc.0	2015-04-10
1.3.15	2015-03-17
1.4.0-beta.6	2015-03-17
1.4.0-beta.5	2015-02-24
1.3.14	2015-02-24
1.4.0-beta.4	2015-02-09
1.3.13	2015-02-09
1.3.12	2015-02-03
1.4.0-beta.3	2015-02-03
1.3.11	2015-01-27
1.4.0-beta.2	2015-01-27
1.4.0-beta.1	2015-01-20
1.3.10	2015-01-20
1.3.9	2015-01-15
1.4.0-beta.0	2015-01-14
1.3.8	2014-12-19
1.2.28	2014-12-16
1.3.7	2014-12-15
1,3.6	2014-12-09
1.3.5	2014-12-02
1.3.4	2014-11-25
1.2.27	2014-11-21
1.3.3	2014-11-18
1.3.2	2014-11-07
1.3.1	2014-10-31
1.3.0	2014-10-14
1,3.0-rc.5	2014-10-09
1.2.26	2014-10-03
1.3.0-rc.4	2014-10-02
1.3.0-rc.3	2014-09-24
1.2.25	2014-09-17
1.3.0-rc.2	2014-09-17
1.2.24	2014-09-10
1.3.0-rc.1	2014-09-10
1.3.0-rc.0	2014-08-30
1.2.23	2014-08-23
1.3.0-beta.19	2014-08-23
1.2.22	2014-08-12
1.3.0-beta.18	2014-08-12
1.2.21	2014-07-25
1.3.0-beta.17	2014-07-25
1.3.0-beta.16	2014-07-18
1.2.20	2014-07-11
1.3.0-beta.15	2014-07-11
1.2.19	2014-07-01
1.3.0-beta.14	2014-07-01
1.3.0-beta.13	2014-06-16
1.3.0-beta.12	2014-06-14
1.2.18	2014-06-14
1.3.0-beta.11	2014-06-06
1.2.17	2014-06-06
1.3.0-beta.10	2014-05-24
1.3.0-beta.9	2014-05-17
1.3.0-beta.8	2014-05-09
1.3.0-beta.7	2014-04-26
1.3.0-beta.6	2014-04-22
1.2.16	2014-04-04
1.3.0-beta.5	2014-04-04
1.3.0-beta.4	2014-03-28
1.2.15	2014-03-22
1.3.0-beta.3	2014-03-21
1.3.0-beta.2	2014-03-16
1.3.0-beta.1	2014-03-08
1.2.14	2014-03-01
1.2.13	2014-02-15
1.2.12	2014-02-08
1.2.11	2014-02-03
1.2.10	2014-01-25
1.2.9	2014-01-15
1.2.8	2014-01-10
1.2.7	2014-01-03
1.2.6	2013-12-20
1.2.5	2013-12-13
1.2.4	2013-12-06
1.2.3	2013-11-27
1.2.2	2013-11-22
1.2.1	2013-11-15
1.2.0	2013-11-08
1.2.0-rc.3	2013-10-14
1.2.0-rc.2	2013-09-04
1.0.8	2013-08-22
1.2.0rc1	2013-08-13
1.0.7	2013-05-22
1.1.5	2013-05-22
1.0.6	2013-04-04
1.1.4	2013-04-04
1.0.5	2013-02-20
1.1.3	2013-02-20
1.0.4	2013-01-23
1.1.2	2013-01-23
1.1.1	2012-11-27
1.0.3	2012-11-27
1.1.0	2012-09-04
1.0.2	2012-09-04
1.0.1	2012-06-25
1.0.0	2012-06-14
v1.0.0rc12	2012-06-12
v1.0.0rc11	2012-06-11
v1.0.0rc10	2012-05-24
v1.0.0rc9	2012-05-15
v1.0.0rc8	2012-05-07
v1.0.0rc7	2012-05-01
v1.0.0rc6	2012-04-21
v1.0.0rc5	2012-04-12
v1.0.0rc4	2012-04-05
v1.0.0rc3	2012-03-30
v1.0.0rc2	2012-03-21
g3-v1.0.0rc1	2012-03-14
g3-v1.0.0-rc2	2012-03-16
1.0.0rc1	2012-03-14
0,10,6	2012-01-17
0,10,5	2011-11-08
0,10,4	2011-10-23
0.10.3	2011-10-14
0,10,2	2011-10-08
0,10,1	2011-09-09
0.10.0	2011-09-02
0.9.19	2011-08-21
0.9.18	2011-07-30
0.9.17	2011-06-30
0.9.16	2011-06-08
0.9.15	2011-04-12
0.9.14	2011-04-01
0.9.13	2011-03-14
0.9.12	2011-03-04
0.9.11	2011-02-09
0.9.10	2011-01-27
0.9.9	2011-01-14
0.9.7	2010-12-11
0.9.6	2010-12-07
0.9.5	2010-11-25
0.9.4	2010-11-19
0.9.3	2010-11-11
0.9.2	2010-11-03
0.9.1	2010-10-27
0.9.0	2010-10-21

Commencer

Créez un nouveau fichier HTML et collez le contenu suivant:

<!DOCTYPE html>
<html ng-app>
<head>
  <title>Hello, Angular</title>
  <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
</head>
<body ng-init="name='World'">
  <label>Name</label>
  <input ng-model="name" />
  <span>Hello, {{ name }}!</span>
  <p ng-bind="name"></p>
</body>
</html>

Démo en direct

Lorsque vous ouvrez le fichier avec un navigateur, vous verrez un champ de saisie suivi du texte Hello, World! . L'édition de la valeur dans l'entrée mettra à jour le texte en temps réel, sans avoir besoin de rafraîchir la page entière.

Explication:

Chargez la structure angulaire à partir d'un réseau de distribution de contenu.
```
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
```
Définir le document HTML en tant qu'application angulaire avec la directive ng-app
```
<html ng-app>
```
Initialiser la variable de name utilisant ng-init
```
<body ng-init=" name = 'World' ">
```
Notez que ng-init doit être utilisé à des fins de démonstration et de test uniquement. Lors de la création d'une application réelle, les contrôleurs doivent initialiser les données.
Lier les données du modèle à la vue des contrôles HTML. Lier un <input> à la propriété name avec ng-model
```
<input ng-model="name" />
```
Afficher le contenu du modèle en utilisant des accolades doubles {{ }}
```
<span>Hello, {{ name }}</span>
```
Une autre manière de lier la propriété name consiste à utiliser ng-bind au lieu du guidon "{{ }}"
```
 <span ng-bind="name"></span>
```

Les trois dernières étapes établissent la liaison de données bidirectionnelle . Les modifications apportées à l'entrée mettent à jour le modèle , ce qui se reflète dans la vue .

Il y a une différence entre l'utilisation de guidons et de ng-bind . Si vous utilisez des guidons, vous pouvez voir le bon Hello, {{name}} lors du chargement de la page avant que l'expression ne soit résolue (avant le chargement des données) alors que si vous utilisez ng-bind , seules les données seront affichées. est résolu. Comme alternative, la directive ng-cloak peut être utilisée pour empêcher l'affichage des guidons avant leur compilation.

Présentation de toutes les constructions angulaires courantes

L'exemple suivant montre les constructions AngularJS courantes dans un fichier:

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <style>.started { background: gold; }</style>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>
      function MyDataService() {
        return {
          getWorlds: function getWorlds() {
            return ["this world", "another world"];
          }
        };
      }

      function DemoController(worldsService) {
        var vm = this;
        vm.messages = worldsService.getWorlds().map(function(w) {
          return "Hello, " + w + "!";
        });
      }

      function startup($rootScope, $window) {
        $window.alert("Hello, user! Loading worlds...");
        $rootScope.hasStarted = true;
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .service("worldsService", [MyDataService])
        .controller("demoController", ["worldsService", DemoController])
        .config(function() {
          console.log('configuring application');
        })
        .run(["$rootScope", "$window", startup]);
    </script>
  </head>
  <body ng-class="{ 'started': hasStarted }" ng-cloak>
    <div ng-controller="demoController as vm">
      <ul>
        <li ng-repeat="msg in vm.messages">{{ msg }}</li>
      </ul>
    </div>
  </body>
</html>

Chaque ligne du fichier est expliquée ci-dessous:

Démo en direct

ng-app="myDemoApp" , la directive ngApp qui initialise l'application et indique à angular qu'un élément DOM est contrôlé par un angular.module spécifique nommé "myDemoApp" ;
<script src="angular.min.js"> est la première étape du démarrage de la bibliothèque AngularJS ;

Trois fonctions ( MyDataService , DemoController et startup ) sont déclarées, qui sont utilisées (et expliquées) ci-dessous.

angular.module(...) utilisé avec un tableau comme second argument crée un nouveau module. Ce tableau est utilisé pour fournir une liste des dépendances de module. Dans cet exemple, nous chaînons les appels sur le résultat de la fonction module(...) ;
.service(...) crée un service angulaire et renvoie le module pour le chaînage;
.controller(...) crée un contrôleur angulaire et renvoie le module pour le chaînage;
.config(...) Utilisez cette méthode pour enregistrer le travail à effectuer sur le chargement du module.
.run(...) que le code est exécuté au démarrage et prend un tableau d'éléments en tant que paramètre. Utilisez cette méthode pour enregistrer le travail qui doit être effectué lorsque l'injecteur a terminé de charger tous les modules.
- le premier élément permet à Angular de savoir que la fonction de startup nécessite l' $rootScope service $rootScope en tant qu'argument;
- le deuxième élément permet à Angular de savoir que la fonction de startup nécessite l' injection du service $window intégré en tant qu'argument;
- le dernier élément du tableau, startup , est la fonction réelle à exécuter au démarrage;
ng-class est la directive ngClass pour définir une class dynamique et, dans cet exemple, utilise hasStarted sur $rootScope manière dynamique
ng-cloak est une directive pour empêcher le modèle HTML angulaire non rendu (par exemple " {{ msg }} ") d'être montré brièvement avant qu'Angular ait complètement chargé l'application.
ng-controller est la directive qui demande à Angular d'instancier un nouveau contrôleur de nom spécifique pour orchestrer cette partie du DOM;
ng-repeat est la directive qui permet à Angular d'itérer une collection et de cloner un modèle DOM pour chaque élément.
{{ msg }} présente l' interpolation : rendu sur place d'une partie de la portée ou du contrôleur;

L'importance de la portée

Comme Angular utilise HTML pour étendre une page Web et du Javascript pour ajouter de la logique, il est facile de créer une page Web en utilisant ng-app , ng-controller et certaines directives intégrées telles que ng-if , ng-repeat , etc. Avec la nouvelle syntaxe controllerAs , les nouveaux utilisateurs Angular peuvent associer des fonctions et des données à leur contrôleur au lieu d'utiliser $scope .

Cependant, il est tôt ou tard important de comprendre ce qu'est exactement ce $scope chose est. Il continuera à apparaître dans les exemples, il est donc important d'avoir une certaine compréhension.

La bonne nouvelle est que c'est un concept simple mais puissant.

Lorsque vous créez ce qui suit:

<div ng-app="myApp">
 <h1>Hello {{ name }}</h1>
</div>

Où habite le nom ?

La réponse est que Angular crée un objet $rootScope . Ceci est simplement un objet Javascript régulier et name est une propriété de l'objet $rootScope :

angular.module("myApp", [])
  .run(function($rootScope) {
    $rootScope.name = "World!";
  });

Et comme pour la portée globale en Javascript, ce n'est généralement pas une bonne idée d'ajouter des éléments à la portée globale ou à $rootScope .

Bien sûr, la plupart du temps, nous créons un contrôleur et mettons nos fonctionnalités requises dans ce contrôleur. Mais lorsque nous créons un contrôleur, Angular fait de la magie et crée un objet $scope pour ce contrôleur. Ceci est parfois appelé la portée locale .

Donc, en créant le contrôleur suivant:

<div ng-app="myApp">
  <div ng-controller="MyController">
    <h1>Hello {{ name }}</h1>
  </div>
</div>

permettrait à la portée locale d'être accessible via le paramètre $scope .

angular.module("myApp", [])
  .controller("MyController", function($scope) {
    $scope.name = "Mr Local!";
  });

Un contrôleur sans paramètre $scope peut simplement pas en avoir besoin pour une raison quelconque. Mais il est important de comprendre que, même avec la syntaxe controllerAs , la portée locale existe.

Comme $scope est un objet JavaScript, Angular le configure comme par magie pour hériter de façon prototypique de $rootScope . Et comme vous pouvez l'imaginer, il peut y avoir une chaîne de portées. Par exemple, vous pouvez créer un modèle dans un contrôleur parent et lui associer la portée du contrôleur parent en tant que $scope.model .

Ensuite, via le prototype de chaîne, un contrôleur enfant peut accéder à ce même modèle localement avec $scope.model .

Rien de tout cela n'est évident au départ, car Angular fait juste sa magie en arrière-plan. Mais comprendre $scope est une étape importante pour apprendre comment Angular fonctionne.

Le plus simple possible Angular Hello World.

Angular 1 est à la base un compilateur DOM. Nous pouvons le transmettre au format HTML, soit en tant que modèle, soit en tant que page Web standard, puis le compiler.

Nous pouvons dire à Angular de traiter une région de la page comme une expression en utilisant la syntaxe du style de guidon {{ }} . Tout ce qui se trouve entre les accolades sera compilé, comme ceci:

{{ 'Hello' + 'World' }}

Cela va sortir:

HelloWorld

ng-app

Nous indiquons à Angular la partie de notre DOM à traiter comme modèle principal à l'aide de la directive ng-app . Une directive est un attribut ou un élément personnalisé que le compilateur de modèles angulaires sait gérer. Ajoutons maintenant une directive ng-app:

<html>
  <head>
    <script src="/angular.js"></script>
  </head>
  <body ng-app>
    {{ 'Hello' + 'World' }}
  </body>
</html>

J'ai maintenant demandé à l'élément body d'être le template racine. Tout ce qu'il contient sera compilé.

Directives

Les directives sont des directives de compilation. Ils étendent les capacités du compilateur Angular DOM. C'est pourquoi Misko , le créateur d'Angular, décrit Angular comme:

"Un navigateur Web aurait été conçu pour les applications Web.

Nous créons littéralement de nouveaux attributs et éléments HTML et les compilons dans une application. ng-app est une directive qui active simplement le compilateur. Les autres directives incluent:

ng-click , qui ajoute un gestionnaire de clic,
ng-hide , qui cache conditionnellement un élément, et
<form> , qui ajoute un comportement supplémentaire à un élément de formulaire HTML standard.

Angular est livré avec environ 100 directives intégrées qui vous permettent d'accomplir les tâches les plus courantes. Nous pouvons également écrire les nôtres, et ceux-ci seront traités de la même manière que les directives intégrées.

Nous construisons une application Angular à partir d'une série de directives, reliées par HTML.

Minification en angulaire

Qu'est-ce que la minification?

C'est le processus de suppression de tous les caractères inutiles du code source sans changer sa fonctionnalité.

Syntaxe normale

Si nous utilisons une syntaxe angulaire normale pour écrire un contrôleur, après avoir minifié nos fichiers, cela va casser notre fonctionnalité.

Contrôleur (avant minification):

var app = angular.module('mainApp', []);    
app.controller('FirstController', function($scope) {
    $scope.name= 'Hello World !';  
});

Après avoir utilisé l'outil de minification, il sera minifié comme ci-dessous.

var app=angular.module("mainApp",[]);app.controller("FirstController",function(e){e.name= 'Hello World !'})

Ici, la minification a supprimé les espaces inutiles et la variable $ scope du code. Donc, lorsque nous utilisons ce code minifié, il ne va rien imprimer. Parce que $ scope est un élément crucial entre le contrôleur et la vue, qui est maintenant remplacé par la petite variable "e". Donc, lorsque vous exécutez l'application, elle va donner une erreur de dépendance "e" au fournisseur inconnu.

Il y a deux manières d'annoter votre code avec des informations de nom de service qui sont sécurisées par minification:

Syntaxe d'annotation en ligne

var app = angular.module('mainApp', []);    
app.controller('FirstController', ['$scope', function($scope) {
    $scope.message = 'Hello World !'; 
}]);

Syntaxe d'annotation de propriété $ inject

FirstController.$inject = ['$scope'];
var FirstController = function($scope) {
    $scope.message = 'Hello World !'; 
}

var app = angular.module('mainApp', []);
app.controller('FirstController', FirstController);

Après minification, ce code sera

var app=angular.module("mainApp",[]);app.controller("FirstController",["$scope",function(a){a.message="Hello World !"}]);

Ici, angular considérera la variable 'a' comme étant $ scope, et affichera la sortie 'Hello World!'.

AngularJS Pour commencer Didacticiels vidéo

Il y a beaucoup de bons tutoriels vidéo pour le framework AngularJS sur egghead.io

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

AngularJS Tutoriel
Démarrer avec AngularJS

Recherche…