Angular JS PDF

Preview

Summary

Prise de note détaillé sur angularJS...

Description

AngularJS

Les modules https://docs.angularjs.org/api/ng/function/angular.module

Ça sert à quoi ? Les modules représentent les différentes parties d’une application AngularJS, c’est-àdire les contrôleurs, les services, les directives ou encore les filtres.

Créer une nouvelle application (function() { var app = angular.module('name', [/* dépendances de l’app */]); })();

Exécuter le module au chargement de la page

...

Les expressions https://docs.angularjs.org/guide/expression

Ça sert à quoi ? Les expressions permettent d’insérer des valeurs dynamiques dans le HTML

Insérer une expression dans du HTML {{ mon expression }}

Il peut s’agir d’un calcul :

{{ 4 + 5 }} Valeur affichée : 9

Ou encore d’une chaîne de caractère qui peut comprendre des valeurs variables :

{{ 'Bonjour' + user.name }} Valeur affichée : Bonjour Steven

Les contrôleurs https://docs.angularjs.org/guide/controller

Ça sert à quoi ? Les contrôleurs permettent de définir le comportement de l’application (sa logique) à l’aide de méthode et de propriétés qu’on va leur attacher.

Créer un nouveau contrôleur pour une application app.controller('NameController', function($scope) {

});

Assigner le contrôleur à une partie de la page HTML

...

Les services https://docs.angularjs.org/guide/services

Ça sert à quoi ? Les services apportent des outils à votre application pour lui permettre d’effectuer des actions plus facilement. Il vous suffit d’injecter le service par exemple au sein d’un contrôleur ou d’un service pour pouvoir profiter des fonctionnalités qu’il met à votre disposition.

Utiliser un service Les 3 services de base les plus utiles sont : -

$scope : Permet de faire le lien entre la Vue et le Modèle $http : Permet de réaliser des requêtes asynchrones $filter : Permet d’utiliser les filtres

Par exemple, pour injecter les services $scope et $http au sein d’un controller MainController :

app.controller('MainController', ['$scope', '$http', function ($scope, $http) { // Je peux maintenant utiliser $scope et $http au sein du contrôleur }]);

Créer un service app.factory('MonService', function() { return { maMethode : // ... }; });

Les filtres https://docs.angularjs.org/guide/filter

Ça sert à quoi ? Les filtres permettent de formater des valeurs dynamiques en fonction du filtre renseigné.

Utiliser les filtres Soit directement dans le template :

{{ valeur | filtre : option1 : option2 : … }}

Soit dans le contrôleur :

-

On injecte $filter dans le contrôleur

-

Et on peut utiliser les filtres : valeur = $filter('filtre')(valeur, option1, option2, ...);

Les types de filtres filter : Permet de faire des sélections sur des tableaux.

$scope.membres = $filter('filter')($scope.membres, 's', strict); // 's' est l’élement de comparaison avec les items du tableau // pour un tableau d’objets : {name: 's', phone: '06'} // strict est optionnel (désactivé par défaut) et permet de ne demander que les résultats qui correspondent exactement à la recherche

currency : Permet de formater une valeur en prix.

$scope.price = $filter('currency')($scope.price, '€', 2); // Les 2 options ne sont pas obligatoires

date : Permet de formater une date. $scope.date = $filter('date')($scope.date, 'dd/MM/yyyy à HH:mm:ss', '+02'); // Les 2 options ne sont pas obligatoires (la deuxième option correspond au fuseau horaire, ici UTC+02))

limitTo : Permet de limiter le nombre de caractères quand c’est une chaîne et le nombre d’éléments quand c’est un tableau.

$scope.body = $filter('limitTo')($scope.body, 150, 6); // La dernière option n’est pas obligatoire // Puisque c’est une chaîne, le deuxième paramètre indique le nombre de caractère que l’on va garder (ici 150 caractères) et le troisième indique l’offset à partir duquel on va commencer à récupérer nos 150 caractères (ici après le sixième caractère)

orderBy : Permet de trier un tableau.

$scope.membres = $filter('orderBy')($scope.membres, '+'); // L’option vous permet d’indiquer comment vous souhaitez trier votre tableau (+ : croissant / - : décroissant) et vous pouvez faire suivre le symbole par le nom d’une propriété s’il s’agit d’un tableau d’objets (+name)

Directives personnalisées https://docs.angularjs.org/guide/directive

Ça sert à quoi ? Les directives personnalisées vont vous permettre de rendre plus compréhensible votre code, ce sera donc d’une aide importante pour les UI complexes.

Créer ses propres directives app.directive('commentaire', function() { return { restrict: 'E' ou 'A', templateUrl : 'Url du template', }; };

Lier un contrôleur à sa directive personnalisée Il suffit de rajouter une propriété dans le return :

controller: function() { // contenu de mon contrôleur }

Gérer les requêtes asynchrones https://docs.angularjs.org/api/ng/service/$http

Comment ça marche ? -

Injecter le service $http dans le contrôleur qui doit communiquer avec le serveur et utiliser les méthodes à notre disposition pour faire des requêtes.

$http.methode('/url').then(function(response) { // fonction de callback en cas de succès de la requête }, function(response) { // fonction de callback en cas d’échec de la requête });

L’objet response contient plusieurs propriétés dont 3 très utiles : -

data : Données récupérées status : Code associé au statut de la réponse http statusText : Texte associé au statut de la réponse http

Liste des méthodes utilisables : -

get : A utiliser quand on souhaite utiliser la méthode HTTP GET post : A utiliser quand on souhaite utiliser la méthode HTTP POST put/patch : A utiliser quand on souhaite mettre à jour des données delete : A utiliser quand on souhaite supprimer des données

Un exemple $http.get('articles.php').then(function(response) { $scope.articles = response.data; }, function(response) { $scope.erreur = 'Erreur ' + response.status + ': ' + response.statusText;

});

Gérer les formulaires https://docs.angularjs.org/guide/forms

Structurer le formulaire -

Il faut mettre un ng-model sur tous les champs que l’on souhaite récupérer. Il faut mettre un attribut name sur le formulaire pour qu’Angular créé un objet qui contiendra des données importantes sur celui-ci. Il faut également mettre l’attribut novalidate pour désactiver la vérification par défaut des navigateurs et indiquer un ng-submit sur le formulaire qui doit vérifier que le formulaire ne contient pas d’erreur puis appeler la fonction de traitement nécessaire.

-



Gérer l’envoi des données à un script PHP $scope.submit = function() { $http.post('traitement.php', $scope.data).then(function(response){ $scope.data = response.data; }, function(response) { $scope.data = response.data || 'La requête a échoué'; $scope.status = response.status; }); };

Pour pouvoir exploiter les données du formulaire dans le script PHP, il faut utiliser les fonctions suivantes : $_POST = json_decode(file_get_contents('php://input'), true);...