Premiers pas avec AngularJS

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] (http://jsfiddle.net/U3pVM/26397/)

Lorsque vous ouvrez le fichier avec un navigateur, vous verrez un champ de saisie suivi du texte “Hello, World!”. La modification de la valeur dans l’entrée mettra à jour le texte en temps réel, sans qu’il soit nécessaire d’actualiser toute la page.

Explication:

Chargez le framework Angular à partir d’un réseau de diffusion de contenu.
```
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
```
Définissez le document HTML comme une application angulaire avec la directive ng-app
```
<html ng-app>
```
Initialisez la variable name en 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.

Liez les données du modèle à la vue sur les contrôles HTML. Liez un <input> à la propriété name avec ng-model
```
<input ng-model="name" />
```
Affichez le contenu du modèle à l’aide de doubles accolades {{ }}
```
<span>Hello, {{ name }}</span>
```
Une autre façon de lier la propriété name consiste à utiliser ng-bind au lieu de handlebars"{{ }}"
```
 <span ng-bind="name"></span>
```

Les trois dernières étapes établissent la [liaison de données bidirectionnelle][1]. Les modifications apportées à l’entrée mettent à jour le model, qui est reflété dans la view.

Il y a une différence entre l’utilisation du guidon et ng-bind. Si vous utilisez des poignées, vous verrez peut-être le véritable Hello, {{name}} lorsque la page se charge avant que l’expression ne soit résolue (avant que les données ne soient chargées) alors que si vous utilisez ng-bind, il n’affichera que le données lorsque le nom est résolu. Comme alternative, la directive ng-cloak peut être utilisée pour empêcher le guidon de s’afficher avant qu’il ne soit compilé.

[1] : https://docs.angularjs.org/guide/databinding

Présentant toutes les constructions angulaires courantes

L’exemple suivant montre des 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][1]

ng-app="myDemoApp", [la directive ngApp][2] qui démarre 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 de [l’amorçage de la bibliothèque AngularJS][3] ;

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

[angular.module(...)][4] utilisé avec un tableau comme deuxième argument crée un nouveau module. Ce tableau est utilisé pour fournir une liste de dépendances de module. Dans cet exemple, nous enchaînons les appels sur le résultat de la fonction module(...) ;
.service(...) crée un [Service angulaire] [5] et renvoie le module pour le chaînage ;
.controller(...) crée un [Angular Controller][6] et renvoie le module pour le chaînage ;
.config(...) Utilisez cette méthode pour enregistrer le travail qui doit être effectué lors du chargement du module.
.run(...) s’assure que le code est [exécuté au démarrage][7] et prend un tableau d’éléments comme paramètre. Utilisez cette méthode pour enregistrer le travail qui doit être effectué lorsque l’injecteur a fini de charger tous les modules.
- the first item is letting Angular know that the startup function requires [the built-in $rootScope service][8] to be injected as an argument;
- the second item is letting Angular know that the startup function requires [the built-in $window service][9] to be injected as an argument;
- the last item in the array, startup, is the actual function to run on startup;
ng-class est [la directive ngClass][10] pour définir une classe dynamique, et dans cet exemple utilise hasStarted sur le $rootScope dynamiquement
ng-cloak est [une directive][11] pour empêcher le modèle html Angular non rendu (par exemple “{{ msg }}”) d’être brièvement affiché avant qu’Angular ait complètement chargé l’application.
ng-controller est [la directive][12] qui demande à Angular d’instancier un nouveau contrôleur de nom spécifique pour orchestrer cette partie du DOM ;
ng-repeat est [la directive][13] pour faire itérer Angular sur une collection et cloner un modèle DOM pour chaque élément ;
{{ msg }} met en valeur [interpolation] [14] : rendu sur place d’une partie de la portée ou du contrôleur ;

[1] : https://jsfiddle.net/15vspt5t/ [2] : https://docs.angularjs.org/api/ng/directive/ngApp [3] : https://docs.angularjs.org/guide/bootstrap#angular-script-tag [4] : https://docs.angularjs.org/api/ng/function/angular.module [5] : https://docs.angularjs.org/guide/services [6] : https://docs.angularjs.org/guide/controller [7] : http://stackoverflow.com/q/19276095/419956 [8] : https://docs.angularjs.org/api/ng/service/$rootScope [9] : https://docs.angularjs.org/api/ng/service/$window [10] : https://docs.angularjs.org/api/ng/directive/ngClass [11] : https://docs.angularjs.org/api/ng/directive/ngCloak [12] : https://docs.angularjs.org/api/ng/directive/ngController [13] : https://docs.angularjs.org/api/ng/directive/ngRepeat [14] : https://docs.angularjs.org/guide/interpolation

L’importance de la portée

Comme Angular utilise HTML pour étendre une page Web et du Javascript simple pour ajouter de la logique, il est facile de créer une page Web à l’aide de [ng-app][1], *[ng-controller][2] * et certaines directives intégrées telles que [ng-if][3], [ng-repeat][4], etc. Avec la nouvelle syntaxe controllerAs, les nouveaux venus dans Angular les utilisateurs peuvent attacher des fonctions et des données à leur contrôleur au lieu d’utiliser $scope.

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

La bonne nouvelle est qu’il s’agit d’un concept simple mais puissant.

Lorsque vous créez ce qui suit :

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

Où habite nom ?

La réponse est qu’Angular crée un objet $rootScope. Il s’agit simplement d’un objet Javascript normal et donc name est une propriété sur l’objet $rootScope :

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

Et tout comme avec la portée globale en Javascript, ce n’est généralement pas une si 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. C’est ce qu’on appelle parfois la portée locale.

Donc, création du 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 tout simplement ne pas en avoir besoin pour une raison quelconque. Mais il est important de réaliser 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 manière 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 l’attacher à la portée du contrôleur parent en tant que $scope.model.

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

Rien de tout cela n’est évident au départ, car c’est juste Angular qui fait sa magie en arrière-plan. Mais comprendre $scope est une étape importante pour comprendre le fonctionnement d’Angular.

[1] : https://docs.angularjs.org/api/ng/directive/ngApp [2] : https://docs.angularjs.org/api/ng/directive/ngController [3] : https://docs.angularjs.org/api/ng/directive/ngIf [4] : https://docs.angularjs.org/api/ng/directive/ngRepeat

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 modifier sa fonctionnalité.

Syntaxe normale

Si nous utilisons une syntaxe angulaire normale pour écrire un contrôleur, après avoir minimisé 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. Ainsi, lorsque nous utilisons ce code minifié, il n’affichera rien à la vue. Parce que $scope est une partie cruciale entre le contrôleur et la vue, qui est maintenant remplacée par la petite variable ’e’. Ainsi, lorsque vous exécutez l’application, l’erreur de dépendance ’e’ du fournisseur inconnu s’affiche.

Il existe deux façons d’annoter votre code avec des informations de nom de service qui sont sécurisées pour la 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 comme ‘Hello World !’.

Tutoriels vidéo de démarrage d’AngularJS

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

[![entrez la description de l’image ici][2]][2]

https://egghead.io/courses/angularjs-app-from-scratch-getting-started
https://egghead.io/courses/angularjs-application-architecture
https://egghead.io/courses/angular-material-introduction
https://egghead.io/courses/building-an-angular-1-x-ionic-application
https://egghead.io/courses/angular-and-webpack-for-modular-applications
https://egghead.io/courses/angularjs-authentication-with-jwt
https://egghead.io/courses/angularjs-data-modeling
https://egghead.io/courses/angular-automation-with-gulp
https://egghead.io/courses/learn-protractor-testing-for-angularjs
https://egghead.io/courses/ionic-quickstart-for-windows
https://egghead.io/courses/build-angular-1-x-apps-with-redux
https://egghead.io/courses/using-angular-2-patterns-in-angular-1-x-apps

[1] : https://egghead.io [2] : https://i.stack.imgur.com/JxQ0P.png

Le Hello World angulaire le plus simple possible.

Angular 1 est avant tout un compilateur DOM. Nous pouvons lui transmettre du code HTML, soit en tant que modèle, soit simplement en tant que page Web normale, puis lui faire compiler une application.

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

{{ 'Hello' + 'World' }}

Cela affichera :

HelloWorld

de-application

Nous indiquons à Angular quelle 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 dit à l’élément body d’être le modèle racine. Tout ce qu’il contient sera compilé.

Directives

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

“Ce qu’aurait été un navigateur Web s’il avait été conçu pour les applications Web.

Nous créons littéralement de nouveaux attributs et éléments HTML, et Angular les compile dans une application. ng-app est une directive qui active simplement le compilateur. D’autres directives comprennent:

ng-click, qui ajoute un gestionnaire de clic,
ng-hide, qui masque 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, câblées avec HTML.

Premiers pas avec AngularJS

Commencer #

Présentant toutes les constructions angulaires courantes #

L’importance de la portée #

Minification en angulaire #

Tutoriels vidéo de démarrage d’AngularJS #

Le Hello World angulaire le plus simple possible. #

de-application #

Directives #