Objectif général : Prendre en main Express js, le mini-framework de Node js le plus utilisé
objectifs spécifiques :
Installer Node js et Express js
Créer une application Express js
Router les requêtes
Recevoir des données à partir de l’URL d’une requête
Recevoir des données à partir du corps d’une requête
Traiter des fichiers uploadés
Utiliser un moteur de template
Utiliser une base de données
Utiliser des middlewares
Objectif général : Prendre en main Express js, le mini-framework de Node js le plus utilisé
objectifs spécifiques :
Installer Node js et Express js
Créer une application Express js
Router les requêtes
Recevoir des données à partir de l’URL d’une requête
Recevoir des données à partir du corps d’une requête
Traiter des fichiers uploadés
Utiliser un moteur de template
Utiliser une base de données
Utiliser des middlewares
Objectif général : Prendre en main l’un des Frameworks JavaScript les plus utilisés pour développer efficacement des applications Web
Objectifs spécifiques
Structurer l’application avec les composants
Gérer les données dynamiques avec le Data binding
Enrichir le HTML avec des directives prédéfinies
Interagir avec un utilisateur par le biais des formulaires
Organiser et partager le code métier avec les services
Communiquer avec un serveur via le service HttpClient
Afficher des vues en fonction de l’URL avec le routage
Ce support de cours contient les concepts fondamentaux de la sécurité des applications Web Statless avec Json Web Token. Des applications de mise en oeuvre de JWT et Spring Security pour les applications basées sur les Micro-services sont publiées ma chaîne vidéo Youtube :
https://www.youtube.com/user/mohamedYoussfi
Le code source des applications est publié sur mon compte GitHUB:
https://github.com/mohamedYoussfi/
Bon apprentissage
Chapitre 11: Expression Lambda et Référence de méthode en JavaAziz Darouichi
Voici le chapitre 11 sur les expressions lambda et les références de méthodes en Java.
Si vous avez des remarques ou suggestions afin de le parfaire.
N’hésitez pas à me contacter via mon email:
pr.azizdarouichi@gmail.com.
Bonne lecture.
Ce Support explique quelques concepts de base de NodeJS et montre comment mettre en oeuvre la technologie NodeJS pour développer la partie Backend d'une application.
Les vidéos des démonstrations sont publiées sur les adresse suivantes :
- https://www.youtube.com/watch?v=-X_C1tS5-9Y
- https://www.youtube.com/watch?v=rE-xRH28m0s
- https://www.youtube.com/watch?v=tnxjkTvWoKA
Cette série explique les éléments suivants :
- Architecture Web
- Modèles Multi-Threads avec les entrées sorties bloquantes
- Modèles Single Thread avec les entrées sortie non bloquantes
-Technologie Node JS
- Comment créer une simple application Node JS avec java Script
- Architecture du Framwork Express
- Comment créer une application NodeJS avec Type Script
- Comment écrire des tests unitaires avec Jest
- Quelques concepts sur MongoDb
- Comment Créer une API Rest avec NodeJS, Express et MongoDb
- Comment tester l'API Rest
- Comment Créer la partie FrontEnd avec Angular.
Même si la qualité audio n'est pas bonne, ses vidéos peuvent aider ceux qui débutent dans NodeJS en attendant d'autres vidéos avec plus qualité audio et de contenu.
Bonne lecture
Talk given at DevTeach Montreal on RxJS - The Basics & The Future.
Example repo: https://github.com/ladyleet/rxjs-test
Have questions? Find me on twitter http://twitter.com/ladyleet
Objectif général : Prendre en main l’un des Frameworks JavaScript les plus utilisés pour développer efficacement des applications Web
Objectifs spécifiques
Structurer l’application avec les composants
Gérer les données dynamiques avec le Data binding
Enrichir le HTML avec des directives prédéfinies
Interagir avec un utilisateur par le biais des formulaires
Organiser et partager le code métier avec les services
Communiquer avec un serveur via le service HttpClient
Afficher des vues en fonction de l’URL avec le routage
Ce support de cours contient les concepts fondamentaux de la sécurité des applications Web Statless avec Json Web Token. Des applications de mise en oeuvre de JWT et Spring Security pour les applications basées sur les Micro-services sont publiées ma chaîne vidéo Youtube :
https://www.youtube.com/user/mohamedYoussfi
Le code source des applications est publié sur mon compte GitHUB:
https://github.com/mohamedYoussfi/
Bon apprentissage
Chapitre 11: Expression Lambda et Référence de méthode en JavaAziz Darouichi
Voici le chapitre 11 sur les expressions lambda et les références de méthodes en Java.
Si vous avez des remarques ou suggestions afin de le parfaire.
N’hésitez pas à me contacter via mon email:
pr.azizdarouichi@gmail.com.
Bonne lecture.
Ce Support explique quelques concepts de base de NodeJS et montre comment mettre en oeuvre la technologie NodeJS pour développer la partie Backend d'une application.
Les vidéos des démonstrations sont publiées sur les adresse suivantes :
- https://www.youtube.com/watch?v=-X_C1tS5-9Y
- https://www.youtube.com/watch?v=rE-xRH28m0s
- https://www.youtube.com/watch?v=tnxjkTvWoKA
Cette série explique les éléments suivants :
- Architecture Web
- Modèles Multi-Threads avec les entrées sorties bloquantes
- Modèles Single Thread avec les entrées sortie non bloquantes
-Technologie Node JS
- Comment créer une simple application Node JS avec java Script
- Architecture du Framwork Express
- Comment créer une application NodeJS avec Type Script
- Comment écrire des tests unitaires avec Jest
- Quelques concepts sur MongoDb
- Comment Créer une API Rest avec NodeJS, Express et MongoDb
- Comment tester l'API Rest
- Comment Créer la partie FrontEnd avec Angular.
Même si la qualité audio n'est pas bonne, ses vidéos peuvent aider ceux qui débutent dans NodeJS en attendant d'autres vidéos avec plus qualité audio et de contenu.
Bonne lecture
Talk given at DevTeach Montreal on RxJS - The Basics & The Future.
Example repo: https://github.com/ladyleet/rxjs-test
Have questions? Find me on twitter http://twitter.com/ladyleet
Objectif général : Prendre en main l’un des frameworks PHP les plus utilisés
Objectifs spécifiques
Faire correspondre une URL donnée à un traitement précis grâce au routage
Regrouper des traitements connexes grâce aux contrôleurs
Récupérer les données d’une requête http grâce à Request
Retourner des contenus aux formats texte, HTML, JSON, etc. grâce à Response
Intégrer des données dans des templates grâce à Blade
Interagir avec l’utilisateur grâce aux formulaires
Créer, mettre à jour et suivre les évolutions d’un schéma de base de données grâce aux migrations
Faciliter la communication avec une base de données grâce à Eloquent
Agenda :
Les enjeux de la performance d'un site Web
Les différents éléments de performance d'un site Web
Infrastructure, architecture technique, tuning, architecture applicative, WebPerf
L'obsession de la mesure
Les outils
Les quickwins
Caches, upscaling, outscaling, sharding
La démarche de test de charge
Méthodologie, outils, types de test, données de test
La démarche PDCA
Intégrer les tests de charge au cycle de développement
Environnement éphémère
Oxalide MorningTech #2 - Démarche de performance
2ème MorningTech @Oxalide, animé par Adrien Le Priol (@Priolix) et Ludovic Piot (@lpiot), le 28 février 2017.
Une vue d'ensemble sur la démarche et les outils pour aborder et maîtriser la performance de son site Web.
En 2012, Amazon publiait une étude indiquant que chaque seconde de performance perdue sur son site de commerce lui coûtait $1.6 milliards de chiffre d'affaire.
Par delà ce chiffre colossal avancé par le géant du Web, il est une réalité business : plus un site est lent, et moins les utilisateurs sont enclin à naviguer dessus. Les smartphones et le SoLoMo exacerbent cette réalité avec encore plus depuis 10 ans maintenant.
Sur le terrain, l'architecture technique des sites Web, de plus en plus complexe, rendent ses performances impossibles à prédire : complexité des développements applicatifs, multitude des composants impliqués dans l'architecture technique, recours à des services tiers (issus du SI de votre entreprise, ou de services tiers), big data, machine learning…
Une seule façon de prédire les performances : tester… en situation réelle.
A travers les différentes étapes d'une démarche d'optimisation des performances d'un site Web, les enjeux et les écueils d'une telle démarche vous seront détaillés.
Subject: Oxalide's MorningTech talk about an overview of how to deal with performance in a Web site.
Date: 28-feb-2017
Speakers: Adrien Le Priol (@Priolix, @Oxalide) and Ludovic Piot (@lpiot, @Oxalide)
Language: french
Lien SpeakerDeck : https://speakerdeck.com/lpiot/oxalide-morning-tech-number-2-demarche-performance
Lien SlideShare : https://www.slideshare.net/LudovicPiot/morning-tech-2-demarche-performance-slides
YouTube Video capture: https://youtu.be/a8jSbvyBzYU
Main topics:
* Les enjeux de la performance d'un site Web
* Les différents éléments de performance d'un site Web
** Infrastructure, architecture technique, tuning, architecture applicative, WebPerf
* L'obsession de la mesure
* Les outils
* Les quickwins
** Caches, upscaling, outscaling, sharding
* La démarche de test de charge
** Méthodologie, outils, types de test, données de test
* La démarche PDCA
** Intégrer les tests de charge au cycle de développement
** Environnement éphémère
* Questions / Réponses
Spring MVC est un framwork qui permet d’implémenter des applications selon le design pattern MVC.
Ce n'est pas un framework événementiel comme pourraient l'être jsf, wicket, tapestry ou struts 2. Mais il possède de nombreux points
d'extensions et utilisé avec Spring Web Flow il devient un framework très puissant.
Objectif général
Prendre en main l’un des frameworks PHP les plus utilisés
Objectifs opérationnels :
Faire correspondre une URL donnée à un traitement précis grâce au routage
Traiter les requêtes grâce aux contrôleurs
Intégrer des données dans des templates grâce à TWIG
Faciliter la communication avec une base de données grâce à Doctrine
Permettre à un utilisateur d’initialiser ou de modifier les attributs d'un objet métier grâce aux formulaires
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
Le web, nouvelle définition : les possibilités étendues de HTML5 marquent un tournant dans le développement de sites et d'applications web riches. Lors de cette soirée, nous ferons une revue des possibilités offertes par HTML5, CSS3 et Javascript, des applications mobiles aux jeux vidéo en passant par la diffusion de médias audio et vidéo.
Présenté par Benjamin Anseaume de Sushee.fr et Erwan Hesry
Dans cette présentation, je vais mettre l'accent sur les fondamentaux du fameux Framework Javascript AngularJs. Ainsi partager avec vous, certaines de mes expériences avec AngularJs .Enfin j'espère que ça vous plaît.
Radhouene Rouached
https://www.linkedin.com/in/radrouached
Plan :
* Introduction
* Architecture
* Démonstration
* Notions AngularJS
* Directives
* Services
* Routage
* Avantages & Limites
* Outils utiles
* Documentation
Construire une application sur l'architecture modèle-vue-contrôleur en PHP à partir d'un exemple simple : une liste de choses à faire, avec deux pages types : liste et détails.
La conception d'application Web complexe se reposant sur un socle JavaScript devient monnaie courante.
De ce fait, nous nous devons de nous outiller, ainsi que d'utiliser des frameworks adéquats.
Cette présentation a pour but de vous faire découvrir l'un de ces frameworks: RequireJS.
Nous verrons alors que nous pouvons produire des applications modulaires avec gestion de dépendances simplement, permettant ainsi d'avoir des applications qui se chargent rapidement alors que nous avons un découpage complexe, mais aussi des applications maintenables et testables facilement.
Voir: http://humantalks.com/talks/26-apercu-de-requirejs
Learn how to develop under Salesforce with the new Lightning Web Components technology launched earlier this year.
Lightning Web Components is a Web technology that complies with Web standards and will allow you to add features that meet your own needs on the Salesforce platform.
Finally, the presentation focus on the migration of Lightning components to LWC.
Présentation du Bordeaux Salesforce Developer Group.
Apprenez à développer vos premiers Lightning Web Components.
Appréhendez la migration de vos composants Lightning Aura vers LWC.
Objectif général :
Prendre en main l’une des bibliothèques JavaScript les plus utilisés pour créer des interfaces utilisateurs
Objectifs spécifiques :
Découper l’interface utilisateur avec les composants
Passer des informations (données ou instructions) d’un composant à son composant fils avec « props »
Gérer l’état local d’un composant avec « state »
Afficher une listes de composants avec map()
Afficher un composant en fonction de l’état de l’application
Interagir avec un utilisateur grâce à la gestion des événements
Interagir avec un utilisateur par le biais des formulaires
Communiquer avec un serveur HTTP avec AJAX
Afficher des vues en fonction de l’URL avec le routage
Mettre en forme un composant
Objectif général :
Améliorer le positionnement des pages d’un site Web dans les SERP (Search Engine Result Pages)
Objectifs opérationnels :
Sélectionner, dans un site Web, les pages à optimiser
Trouver des mots clés pour une page à optimiser
Optimiser le référencement naturel du contenu d’une page
Faciliter l’exploration, l’indexation et la consultation de l’ensemble des pages
Obtenir du trafic à partir de backlinks
Objectifs
Connaître les principales technologies utilisées pour développer des applications mobiles
Savoir quelle technologie est la mieux adaptée pour un projet
Objectif général : Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
Objectif général : Connaître les fondamentaux d’une API REST
Objectifs spécifiques :
Savoir définir une API
Connaître l’architecture REST
Connaître les contraintes du REST
Connaître la structure d’une requêtes HTTP
Connaître les caractéristiques d’une ressources
Se servir des méthodes HTTP
Connaître la structure d’une réponses HTTP
Connaître les codes HTTP
Objectif général : Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur
Objectifs opérationnels
- Stocker des données à l’aide des variables
- Traiter des données à l’aide des opérateurs.
- Communiquer avec l’internaute à l’aide des E/S de base
- Contrôler le flux d’exécution des instructions.
- Réutiliser et organiser le code en créant des fonctions
- Créer l’interactivité grâce à la gestion des évènements
- Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets
- Gérer les propriétés de la fenêtre avec l’objet window
- Manipuler le contenu de la page Web grâce à l’objet document
- Contrôler la saisie d’un formulaire avec l’objet form
Objectif général : Développer en orienté objet avec Python
Objectifs opérationnels :
- Organiser le code grâce aux classes
- Sécuriser une classe avec l’encapsulation
- Réutiliser et factoriser du code avec l’héritage
- Invoquer des méthodes de même nom, quel que soit le type d'objet sur lequel elles opèrent, sans avoir à effectuer au préalable une vérification de type grâce au polymorphisme
Objectif général : Acquérir les connaissances nécessaires à la programmation avec le langage Python
Objectifs opérationnels :
- Mémoriser des données primitives
- Traiter des données
- Communiquer avec l’extérieur
- Contrôler le flux d’exécution des instructions
- Mémoriser des données composites
- Découper et réutiliser du code
Objectif général : Prendre en main l’une des bibliothèques JavaScript les plus utilisés pour créer des interfaces utilisateurs
Objectifs spécifiques :
Découper l’interface utilisateur avec les composants;
Configurer les composants avec « props »;
Gérer l’état local d’un composant avec « state »;
Afficher une listes de composants avec map();
Afficher un composant en fonction de l’état de l’application;
Interagir avec un utilisateur grâce à la gestion des événements;
Interagir avec un utilisateur par le biais des formulaires;
Communiquer avec un serveur HTTP avec AJAX;
Afficher des vues en fonction de l’URL avec le routage;
Mettre en forme un composant;
Objectif général : Acquérir les bases méthodologiques de la résolution d'un problème conduisant à la réalisation d'un programme informatique
Objectifs opérationnels :
- Connaître les étapes de résolution d’un problème
- Stocker et traiter des données simples
- Permettre à un programme de communiquer avec l’extérieur
- Contrôler le flux d’exécution des instructions
- Traiter des données composites
- Définir et utiliser des procédures et des fonctions
Objectif général
Prendre en main l’un des framework PHP les plus utilisés
Objectifs opérationnels
Structurer les fonctionnalités grâce aux bundles
Faire correspondre une URL donnée à un traitement précis grâce au routage
Traiter les requêtes grâce aux contrôleurs
Intégrer des données dans des templates grâce à TWIG
Faciliter la communication avec une base de données grâce à Doctrine
Permettre à un utilisateur d’initialiser ou de modifier les attributs d'un objet métier grâce aux formulaires
Objectif général
Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Créer un fil d’Ariane
Mettre en forme des listes
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
Créer une page d’atterrissage
Objectifs généraux :
Savoir effectuer une requête HTTP synchrone ou asynchrone
Savoir effectuer des requêtes RESTful avec les méthodes GET, POST, PUT, PATCH et DELETE
Objectifs opérationnels :
Comprendre une requête synchrone
Effectuer une requête synchrone
Lire, d’une manière synchrone, le contenu d’un fichier local
Comprendre une requête asynchrone
Effectuer une requête asynchrone
Récupérer des données à partir d’un serveur avec une requête asynchrone
Comprendre les méthodes de requête RESTful
Effectuer des requêtes RESTful avec les méthodes GET, POST, PUT, PATCH et DELETE
Objectif général : Prendre en main la bibliothèque JavaScript la plus utilisée
Objectifs spécifiques :
Inclure la bibliothèque
Sélectionner du contenu
Manipuler des éléments
Mettre en forme du contenu
Gérer des évènements
Utiliser des effets
Effectuer des requêtes AJAX
Objectif général : Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur
Objectifs opérationnels :
Stocker des données à l’aide des variables
Traiter des données à l’aide des opérateurs.
Communiquer avec l’internaute à l’aide des E/S de base
Contrôler le flux d’exécution des instructions.
Réutiliser et organiser le code en créant des fonctions
Créer l’interactivité grâce à la gestion des évènements
Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets
Traiter des chaînes de caractères avec l’objet String
Gérer les propriétés de la fenêtre avec l’objet Window
Manipuler le contenu de la page Web grâce à l’objet Document
Contrôler la saisie d’un formulaire avec l’objet Form
Objectif général : Acquérir les bases méthodologiques de la résolution d'un problème conduisant à la réalisation d'un programme informatique
Objectifs spécifiques :
Connaître les étapes de résolution d’un problème
Stocker et traiter des données simples
Permettre à un programme de communiquer avec l’extérieur
Contrôler le flux d’exécution des instructions
Traiter des données composites
Définir et utiliser des procédures et des fonctions
Objectif général : Découvrir quelques nouveautés du HTML5
Objectifs opérationnels :
Connaître les avantages du HTML5
Utiliser les nouveaux éléments de structuration
Utiliser les nouveaux éléments conteneurs
Utiliser les nouveaux éléments de contenu incorporé
Utiliser les nouveaux éléments et attributs de formulaire
Objectif général : Découvrir l'un des SGBDs noSQL les plus utilisés
Objectifs spécifiques :
Installer et démarrer un serveur et un client mongo
Créer une base de données dans un serveur mongo
Créer une collection dans une base de données mongo
Connaître les principaux types de données
Insérer des données
Consulter des données
Modifier des données
Supprimer des données
Cours référencement naturel supdeco techonologie avril-15Abdoulaye Dieng
Objectif général : Savoir positionner un site Web sur les premiers résultats des moteurs de recherche
Objectifs opérationnels :
• Connaître le fonctionnement basique d’un moteur de recherche
• Trouver des mots clés pertinents
• Savoir rédiger les parties qui optimisent le positionnement d’une page Web
• Choisir un hébergement et un nom de domaine qui optimisent le positionnement du site
• Partager judicieusement le « link juice » ou popularité des pages du site
Bien écrire l’URL (ou adresses) d’une page Web et de toute ressource (image, video, …)
• Editer les fichiers robots.txt et sitemap.xml utiles aux robots des moteurs
• Inscrire un site Web au niveau des moteurs et annuaires
• Trouver des backlinks (liens vers une page Web provenant d’un site extérieur)
• Enregistrer l’entreprise propriétaire du site Web sur Google Map
• Optimiser la visibilité d’un site Web sur les réseaux sociaux (Facebook, Twitter, Google+, …)
2. Objectif général
Prendre en main l’un des frameworks MVC JavaScript les plus utilisés pour
développer rapidement et efficacement des applications Web
interactives sans trop solliciter le serveur et le réseau.
3. Objectifs spécifiques
• Définir le module principal et l’attacher à la vue
• Afficher des données sur la vue avec les expressions
• Gérer la logique de l’application avec les contrôleurs
• Fournir les contextes d’exécution de la logique avec les scopes
• Enrichir le HTML avec des directives prédéfinies
• Faciliter l’affichage des données avec les filtres
• Créer et valider des formulaires
• Organiser et partager le code métier avec les services
• Afficher des vues en fonction de l’URL via ngRoute et ngView
• Communiquer avec un serveur via $http
4. Sommaire
1) Présentation d’Angular JS
2) Inclusion de la librairie
3) Module principal
4) Expressions
5) Contrôleurs
6) Scope
7) Directives natives
8) Filtres
9) Formulaires
10) Services
11) Routage
12) Communiquer avec un serveur
5. Présentation
• Problématiques
– Comment bien utiliser le HTML dans une application Web ?
– Comment faciliter le codage d’une application JavaScript ?
• Solution : Framework JavaScript qui étend le HTML
• AngularJS est un framework JavaScript, créé en octobre 2010
par des développeurs de chez Google
• AngularJS repose sur cinq principes architecturaux :
– MVC : Modèle (données), Vue (pages HTML) et Contrôleur
(logique)
– Injection de dépendance : modularité d’une application
– Templating : définition déclarative de la vue
– Two-way data binding : quand le modèle change, la vue
reflète automatiquement le changement et vice et versa.
– Usage de composants natifs ou personnalisés
6. Inclusion de la librairie
• En local (dans le site)
– Télécharger la bibliothèque (fichier .js) à partir de
https://angularjs.org/
– Inclure la biblio dans toute page :
<script src="chemin/vers/angular.js"></script>
• En ligne via CDN (Content Delivery Networks) avec l’élément
script et l’attribut src valant par exmple l’URL :
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/
angular.min.js
tp1
7. Module principal
• Module principal = contient les composants (contrôleurs,
directives, filtres, services, …) d’une application
• Syntaxe de définition dans un fichier .js (app.js par exemple)
var nom = angular.module('nom', [eventuelles dependances]);
Ex : var myApp = angular.module('myApp', [ ]);
• Inclusion du module dans la vue (fichier .html)
– Ajouter l’attribut ng-app="nom" à l’élément html
Ex : <html ng-app="myApp">
– avec l’élément script et l’attribut src valant le chemin du
fichier app.js.
Ex : <script src="chemin/vers/app.js"></script>
L’inclusion doit se faire après celle d’angularJS
tp2
8. Expressions
• Expression = combinaison de littéraux, de variables et/ou
d'opérateurs
Exemples : 4; notes[2]; 'Bonjour '+nom
• Syntaxe :
{{ expression }}
• Objectif : insérer des données dynamiques dans le HTML
• Données affichées exactement à la position des accolades
• Remplacer les expressions complexes par des appels à des
fonctions d'un contrôleur
tp3
9. Contrôleurs
• Contrôleur = contient une partie de la logique de l’application
• Objectifs pour la zone (une partie de la page Web) gérée :
– initialiser le modèle (les données) ;
– exposer le modèle et les actions ;
– réagir aux changements du modèle et de la vue.
• Syntaxe de définition:
app.controller('NomCtrl', function(…){
// Données et actions du module
});
app représente le module auquel le contrôleur est rattaché
• Lier le contrôleur à la zone :
– <eltHTML ng-controller="NomCtrl">
– eltHTML délimite la zone (portée ou scope) du contrôleur
tp4
10. Scope
• Scope = objet JS référençant le modèle et les méthodes à
exposer à une portion de la vue
• Objectif : Fournir un contexte d’exécution d’un contrôleur ou
de certaines directives (ngRepeat, ngView, … )
• Syntaxe générale : Propriétaire des données et des actions du
contrôleur qui le reçoit en paramètre
app.controller('NomCtrl', function($scope){
$scope.prop1=…
$scope.prop2=function(){…}
});
• La racine de tous les scopes est le $rootScope instancié
lorsque AngularJS voit la directive ng-app
• L’objet $rootScope permet d'accéder à l'ensemble des
contextes présents dans la vuetp5
11. Directives natives
présentation
• Directive = marqueur dans la vue sous la forme d’élément
HTML, d’attribut ou de classe CSS.
• Objectif : étendre les capacités du langage HTML
• Syntaxe : ng-nom
• Directives de structure
ngApp, ngController, ngView.
• Autres directives :
ngInit, ngClick, ngRepeat, ngHide, ngShow, ngHref, ngSrc
(cf : https://docs.angularjs.org/api/ng/directive )
12. Directives natives
ngRepeat
• ngRepeat : répète le codage d’un élément HTML pour chaque
élément d’une collection
• Syntaxe :
<eltHTML ng-repeat="repeat_expression" >
…
</eltHTML>
• Avec repeat_expression pouvant être sous la forme :
– variable in dataset
Ex : membre in membres
– (key, value) in dataset
Ex : (prenom, note) in {'Ali':18, 'Nafi‘:15}
• dataset est une collection du scope
tp6
13. Directives natives
ngInit, ngClick, ngShow & ngHide
• ngInit : Initialiser des variables du contrôleur depuis le
template
• Syntaxe :
<eltHTML ng-init="variable=valeur" > … </eltHTML>
• ngClick : déclencher une action lorsque l'on click sur
l'élément
• Syntaxe :
<eltHTML ng-click="action ou fonction(…)" > …
</eltHTML>
• ngShow/ngHide : masquer ou afficher du contenu
• Syntaxe :
<eltHTML ng-show="expression_bool" > … </eltHTML>
• Exemple : bouton masqué après 10 clics
<button ng-init="count=0" ng-click="count = count + 1"Tp7&8
14. Directives natives
ngSrc & ngHref
• ngSrc : charger dynamiquement ( {{ … }} ) une image
• Syntaxe :
<img ng-src="{{PathToImage}}" />
• ngHref : reçoit une cible dynamique d’un lien
• Syntaxe :
<a ng-href="#/{{PathVariable}}">Take Me Somewhere</a>
• Exemple :
<a ng-href="#/user/{{user._id}}">View user</a>
16. Filtres
filtre personnalisé
Syntaxe de définition
nomApp.filter('nomFiltre', function(){
return function(to_filter){
…
return filtered
}
});
Exemple
myApp.filter('reverse', function () {
return function (input) {
var out = '';
for (var i = 0; i < input.length; i++)
{
out = input.charAt(i) + out;
}
return out;
}Tp10
17. Formulaires
directives
• ngSubmit : lie une action à la soumission d’un formulaire
• ngDisabled : désactive un bouton
• ngModel : lie la valeur d’un champ (input, select, textarea) à
une donnée du scope
• ngValue : Lie la valeur d’une option sélectionnée ou d’un
bouton radio sélectionné à une donnée du scope
• ngTrueValue/ngFalseValue : lie une donnée du scope à la case
coché ou non
• Exemple
<form ng-submit="ajouter(newTaskName)" >
<input ng-model="newTaskName" >
<input type="submit" value="Ajouter">
</form>
Tp11
18. Formulaires
validation : concepts
• novalidate : attribut de form pour désactiver la validation
HTML5
• Propriétés de validation du formulaire ou d’un champ
– $valid : vraie si les règles de validation sont respectées
– $invalid : vraie si au moins une des règles est violée
– $pristine : vraie si l’élément n’a pas été modifié
– $dirty : vraie si l’élément a été modifié
– $error.<rule> : vraie si la règle de validation est violée
• Règles de validation : required, number, email, date, pattern,
max, min, ng-maxlength, ng-minlength, …
• Syntaxe d’accès
<nomFormulaire>.<propriété>
<nomFormulaire>.<nomChamp>.<propriété>
• Afficher les message d’erreur avec la directive ng-show
20. Services
présentation
• Service = objet qui incorpore des données et/ou du code métier
pour l'application.
• Objectifs :
– isoler certaines fonctionnalités réutilisables dans d’autres
composant de l'application par injection de dépendances
– Organiser et partager le code métier
• Un service est :
– lazy : instancié que lorsque l'application en a besoin
– singleton : instancié une seule fois et cette instance est
ensuite utilisée partout
• Quelques services natifs
– $http : crée et gère des requêtes AJAX
– $route: charge le contenu d’une vue en fonction d’une URL
21. Services
service personnalisé : méthode provider()
• Méthode générale qui contient une méthode $get() pour
retourner l’objet
• Syntaxe de définition
nomApp.provider('nomService', function(){
this.$get=function(){
return serviceObj;
}
});
• Le service peut être configuré avant l’instanciation comme suit
nomApp.config(function(nomServiceProvider){ … });
• Syntaxe d’utilisation
nomApp.controller(myCtrl, function($scope, nomService){
$scope.nomService=nomService;
});
22. Services
service personnalisé : exemple avec méthode provider()
myApp.provider('hello',function(){
this.name='Default‘;
this.$get=function(){
var name=this.name;
return {
sayHello : function() {return 'Hello '+ name +' !‘; }
}
};
this.setName=function(newName) {this.name=newName;}
});
myApp.config('helloProvider',function(helloProvider) {
helloProvider.setName('Abdoulaye');
});
myApp.controller('myCtrl',function($scope,hello) {
$scope.sayHello=hello.sayHello();
});
23. Services
service personnalisé : méthode factory()
• Raccourcie de provider sans méthode $get
• Retourne directement l’objet
• Syntaxe
app.factory('nomService',function(){
return serviceObj;
}) ;
• Exemple
myApp.factory('helloFactory',function(){
return {
name : 'Toto';
sayHello : function() {
return 'Hello ' + this.name + ' from factory'
}
}
});
24. Services
service personnalisé : méthode service()
• Raccourcie de provider qui crée directement l’objet dans la
fonction. Pas besoin de return
• Syntaxe
app.service('serviceName',function(){
this.prop = …;
this.methode = function(){…}
}) ;
• Exemple
myApp.service('helloService',function(){
this.name = 'Toto';
this.sayHello = function() {
return 'Hello ' + this.name + ' from service'
}
});
Tp13
25. Routage
principe
• Routage = faire correspondre une URL donnée à une page
précise.
• Éléments constructifs d’une page : un template, un contrôleur
et d’éventuelles variables (de session ou données par l'URL)
• ngRoute, module de base chargé du routage, est composé de :
– $route : service central du module qui lit l'URL, la parse et
la traite en fonction des informations de configuration.
– $routeProvider : provider qui définit la table de routage
lors de la configuration du service $route.
– $routeParams : service qui gère les paramètres passés via
l’URL
– ngView : directive qui permet d’insérer le template d’une
page dans le layout de l’application.
26. Routage
fonctionnement et installation de ngRoute
• SPA : Single-Page Application ou Application Web monopage
• Une seule page index.html contenant le layout de l’application
• Pb : comment modifier l’URL sans demander une autre page ?
• Sol : utiliser les ancres
• Format des URLs dans une application angularJS :
http://www.exemple.com/#/<nomAncre>
• Installer ngRoute en incluant, dans index.html, le script du
module angular-route.js (après celle d’AngularJS)
• Ajouter ngRoute dans les dépendances de l’application lors de
la définition de celle-ci :
var myApp = angular.module('myApp', ['ngRoute' ]);
27. Routage
directive ngView
• ngView précise l’emplacement d’un template dans le layout
• Exemple :
<html ng-app="butikApp">
<head>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<nav>
<a href="#/produits" >Nos produits</a>
<a href="#/contact" >Contactez-nous</a>
</nav>
<div ng-view> </div>
</body></html>
28. Routage
définition d’une table de routage
• La définition de la table de routage se fait par le provider
$routeProvider lors de la configuration du service $route
• Syntaxe basique de la définition
nomApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when(path, route)
… // autant d’appels de when() que nécessaire
.otherwise({ redirectTo: '/pageParDefaut' })
}]);
• Syntaxe basique du path : '/nomAncre'
• Syntaxe basique de la route :
{
templateUrl : 'chemin/du/template.html',
controller : 'nomContrôleur'
}
29. Routage
exemple d’une définition d’une table de routage
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/produits',
{
templateUrl : 'partials/produits.html',
controller : 'produitsCtrl'
})
.when('/produit/:idProduit?',
{
templateUrl : 'partials/detailsProduit.html',
controller : 'detailsProduitCtrl'
})
.otherwise({ redirectTo: '/' })
}]);
30. Routage
path dynamique
• Path dynamique = path avec portion(s) variable(s)
• La syntaxe d’une portion variable est :nomVariable[?]
Toute variable suffixée du ? est facultative
• Syntaxe d’accès à la variable dans le contrôleur
nomApp.controller('nomCtrl', function($scope, $routeParams){
$scope.nomVariable = $routeParams.nomVariable;
});
• Exemple
En considérant la 2ème entrée de la table de routage de
l’exemple précédent et l'URL : http://butik.com/#/produit/2 :
myApp.controller('detailsProduitCtrl', function($scope,
$routeParams){
// idProduit vaut 1 si elle absente
$scope.idProduit = $routeParams.idProduit || 1;
});Tp14
31. Communiquer avec un serveur
présentation du service $http
• $http est un service qui facilite la communication avec les
serveurs HTTP distants via l'objet XMLHttpRequest
• $http(config ) : envoie une requête et retourne une promesse
• Principales champs de l’objet de configuration de la requête :
– method:'GET|POST|PUT|DELETE|etc.', méthode HTTP
– url:string, URL de la ressource demandée
– data:{string|Object} , données à envoyer via POST ou PUT
– params : object, paramètres à ajouter à l’URL
• Exemple
var promise = $http({ method:'POST', url: 'http://example.com',
data: { test: 'Bonjour le backend !' }
})
32. Communiquer avec un serveur
méthodes de l’objet promesse de $http
• Promesse = objet représentant le résultat futur d’une action
exécutée de manière asynchrone.
• Deux méthodes alternatives : success() et error()
• Chacune prend en paramètre une fonction de rappel
• Principaux paramètres des fonctions de rappel
– data {string|Object} : données reçues du serveur
– status {number} : code de statut HTTP de la réponse
• Exemple
$http({method:'GET', url: 'http://example.com'})
.success(function(data, status) {
$scope.status = status; $scope.data = data;
})
.error(function(data, status) {
$scope.data = data || "Request failed"; $scope.status = status;
});
33. Communiquer avec un serveur
méthodes raccourcies de $http
• $http.get(url, config)
• $http.post(url, data, config)
• $http.put(url, data, config)
• $http.delete(url, config)
Tp15