SUPPORT COURS AngularJS PART 1 MASTER1 IPD

SUPPORT DE COURS FRAMEWORK
ANGULAR JS
Présenté par
Moustapha DER
Enseignant – Chercheur – Chef de projet – CEO
AUTEUR DU LIVRE : « LE GUIDE DU GENIE LOGICIEL »
TOME 1 ET 2
Contacts : 77 656 84 51 / 77 836 12 12 Email : djamilder@gmail.com
Présenté par Moustapha

FORMATEUR M.DER Enseignant – Chercheur
MOUSTAPHA DER–TÉL Chef de
77projet
656 –84CEO
51 -EMAIL
AUTEUR DU LIVRE : « LE GUIDE DU GENIE
:djamilder@gmail.com
LOGICIEL » Contacts : 77 656 84 51 / 77 836 12 12 Email : djamilder@gmail.com
77projet
656 –84CEO
51 -EMAIL
❑ Node JS vous permets de créer des applications puissantes avec un
code simple. Node JS est parfait pour créer des micro services. Node
JS peut être utilisé pour d'autres choses que le développement
web. Node JS est robuste et il va rester dans la programmation.
❑ NodeJS est un environnement d'exécution permettant d’utiliser le

JavaScript côté serveur. Grâce à son fonctionnement non bloquant, il
permet de concevoir des applications en réseau performantes, telles
qu'un serveur web, une API ou un job CRON.
❑ Créé en 2009 par Ryan Dahl, ce runtime JavaScript open source et

cross-platform avait pour but premier de remédier aux limites de la
programmation séquentielle et des serveurs web (tels qu'Apache HTTP
Server). Ces technologies atteignaient effectivement leurs limites
lorsqu’elles devaient gérer de très nombreuses connexions
simultanées.
77projet
656 –84CEO
51 -EMAIL
Node.js est une plateforme logicielle libre en JavaScript, orientée vers les
applications réseau événementielles hautement concurrentes qui doivent
pouvoir monter en charge.
Elle utilise la machine virtuelle V8, la librairie libuv pour sa boucle
d'évènements, et implémente sous licence MIT les
spécifications CommonJS.
Parmi les modules natifs de Node.js, on retrouve http qui permet le
développement de serveur HTTP. Il est donc possible de se passer de
serveurs web tels que Nginx ou Apache lors du déploiement de sites et
d'applications web développés avec Node.js.
Concrètement, Node.js est un environnement bas niveau permettant
l’exécution de JavaScript côté serveur.
Node.js est utilisé notamment comme plateforme de serveur Web, elle est
utilisée
par Groupon, Vivaldi, SAP, LinkedIn, Microsoft, Yahoo!, Walmart, Rakuten,
Sage et PayPal.
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
ANGULAR JS
Présenté par
Moustapha DER
TOME 1 ET 2

77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
77projet
656 –84CEO
51 -EMAIL
ANGULAR JS
Présenté par
Moustapha DER
TOME 1 ET 2

77projet
656 –84CEO
51 -EMAIL
Introduction
Angular est un cadre de
conception d'applications et
une plate-forme de
développement permettant de
créer des applications d'une
seule page efficaces et
sophistiquées.
77projet
656 –84CEO
51 -EMAIL
Introduction
AngularJS est un framework
JavaScript . Il peut être ajouté à une
page HTML avec une balise
<script>.
AngularJS étend les attributs HTML
avec des directives et lie les données
au HTML avec des expressions .
77projet
656 –84CEO
51 -EMAIL
Introduction
 AngularJS est un framework JavaScript
 AngularJS est un framework JavaScript écrit en
JavaScript.
 AngularJS est distribué sous forme de fichier JavaScript

et peut être ajouté à une page Web avec une balise de
script :
 <script
src="https://ajax.googleapis.com/ajax/libs/angularjs/
1.6.9/angular.min.js"></script>

77projet
656 –84CEO
51 -EMAIL
Introduction
 AngularJS étend HTML
 AngularJS étend HTML avec ng-directives .
 La directive ng-app définit une application AngularJS.
 La directive ng-model lie la valeur des contrôles HTML

(input, select, textarea) aux données de l'application.
 La directive ng-bind lie les données d'application à la vue

HTML.

77projet
656 –84CEO
51 -EMAIL
Exemple AngularJS
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"
> </script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
77projet
656 –84CEO
51 -EMAIL
Exemple AngularJS
Exemple expliqué :
AngularJS démarre automatiquement lorsque la page Web est

chargée.
La directive ng-app indique à AngularJS que l'élément <div> est le

"propriétaire" d'une application AngularJS .
La directive ng-model lie la valeur du champ de saisie au nom de la

variable d'application .
La directive ng-bind lie le contenu de l'élément <p> à la variable

d'application name .
77projet
656 –84CEO
51 -EMAIL
Directives AngularJS
Comme vous l'avez déjà vu, les directives
AngularJS sont des attributs HTML avec
un préfixe ng .
La directive ng-init initialise les variables
d'application AngularJS.
Exemple AngularJS
<div ng-app="" ng-init="firstName=‘JAMIL'">
<p>The name is <span ng-
bind="firstName"></span></p>
</div>

77projet
656 –84CEO
51 -EMAIL
Directives AngularJS
Alternativement avec du code HTML
valide :
Exemple AngularJS
<div data-ng-app="" data-ng-
init="firstName=‘Jamil'">
<p>The name is <span data-ng-

bind="firstName"></span></p>
</div>
77projet
656 –84CEO
51 -EMAIL
Expressions AngularJS
Présenté par
Moustapha DER
TOME 1 ET 2

77projet
656 –84CEO
51 -EMAIL
Expressions AngularJS
Les expressions AngularJS sont écrites à l'intérieur de doubles
accolades : {{ expression }} .
AngularJS "sortira" des données exactement là où l'expression est
écrite :
Exemple AngularJS
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/
angular.min.js"></script>
<body>
<div ng-app="">
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
Les expressions AngularJS lient les données AngularJS au
HTML de la même manière que la directive ng-bind

77projet
656 –84CEO
51 -EMAIL
Exemple AngularJS
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/an
gularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>

77projet
656 –84CEO
51 -EMAIL
Applications AngularJS
➢Les modules AngularJS définissent les
applications AngularJS.
➢AngularJS contrôleurs contrôlent les
applications AngularJS.
➢La directive ng-app définit l'application,
la directive ng-controller définit le
contrôleur.
77projet
656 –84CEO
51 -EMAIL
Exemple AngularJS
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}} </div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "Jamil";
$scope.lastName= "Der";
});
Présenté </script>
par
FORMATEURMoustapha
M.DER Enseignant – Chercheur
MOUSTAPHA DER–TÉL
Chef de
77projet
656 –84CEO
51 -EMAIL
Exemple AngularJS
Module AngularJS
var app = angular.module('myApp', []);
Les contrôleurs AngularJS contrôlent les applications :
Contrôleur AngularJS
app.controller('myCtrl', function($scope) {
$scope.firstName= "Jamil";
$scope.lastName= "Der";
});

77projet
656 –84CEO
51 -EMAIL

SUPPORT COURS AngularJS PART 1 MASTER1 IPD

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

SUPPORT COURS AngularJS PART 1 MASTER1 IPD

Transféré par

Droits d'auteur :

Formats disponibles

SUPPORT DE COURS FRAMEWORK

Présenté par Moustapha

❑ NodeJS est un environnement d'exécution permettant d’utiliser le

❑ Créé en 2009 par Ryan Dahl, ce runtime JavaScript open source et

Présenté par Moustapha

Présenté par Moustapha

 AngularJS est distribué sous forme de fichier JavaScript

Présenté par Moustapha

 La directive ng-app définit une application AngularJS.

 La directive ng-model lie la valeur des contrôles HTML

 La directive ng-bind lie les données d'application à la vue

Présenté par Moustapha

AngularJS démarre automatiquement lorsque la page Web est

La directive ng-app indique à AngularJS que l'élément <div> est le

La directive ng-model lie la valeur du champ de saisie au nom de la

La directive ng-bind lie le contenu de l'élément <p> à la variable

Présenté par Moustapha

<p>The name is <span data-ng-

Présenté par Moustapha

Présenté par Moustapha

Présenté par Moustapha

Présenté par Moustapha

Vous aimerez peut-être aussi