Ceci est une ancienne révision du document !
TD n°0
AngularJS est un framework côté client atypique, permettant de construire des applications client riche avec une véritable séparation entre les couches (métier/interface/contrôle).
Il introduit de nouveaux concepts (directives, services, modules…) avec lesquels il faut se familiariser dans un premier temps.
Pour vous permettre une prise en main plus rapide du Framework, nous avons choisi d'utiliser le cours réalisé par Code school mis à disposition du public.
- Créer un compte gratuit sur Code school
- Suivre en ligne le cours Shaping up with Angular.js
Exemple de sensibilisation...
Pas toujours évident de voir l'intérêt d'utiliser un framework ; Surtout si on a jamais eu, auparavant, l'occasion de travailler sur les mêmes sujets, mais sans framework…
Voici un exemple minimaliste permettant de se rendre compte de l'intérêt d'AngularJS :
Il s'agit de synchroniser un texte contenu dans la page avec une saisie effectuée dans une zone de texte : tout simple !
-- Javascript sans framework
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript</title>
</head>
<body>
<h1>Javascript</h1>
<div>
Message : <input id="txtMessage" type="text"><br>
<br> Message : <span id="message"></span>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
var setTextContent=function(element, text) {
while (element.firstChild!==null)
element.removeChild(element.firstChild); // remove all existing content
element.appendChild(document.createTextNode(text));
};
var changeFunction=function(event){
var target = event.target || event.srcElement;
setTextContent(document.getElementById("message"),target.value);
};
var addEvent=function(event,element,handler){
if (document.addEventListener) {// For all major browsers, except IE 8 and earlier
element.addEventListener(event, handler);
} else if (document.attachEvent) {// For IE 8 and earlier versions
element.attachEvent(event, handler);
}
};
addEvent("keyup",document.getElementById("txtMessage"),changeFunction);
addEvent("paste",document.getElementById("txtMessage"),function(event){
setTimeout(function(){changeFunction(event);}, 20);
});
});
</script>
</body>
</html>
-- JQuery
<!DOCTYPE html>
<html data-ng-app>
<head>
<meta charset="UTF-8">
<title>JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<h1>JQuery</h1>
<div>
Message : <input id="txtMessage" type="text"><br>
<br> Message : <span id="message"></span>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$("#txtMessage").on("keyup",function(){
$("#message").text($(this).val());
});
$.fn.pasteEvents = function( delay ) {
if (delay == undefined) delay = 20;
return $(this).each(function() {
var $el = $(this);
$el.on("paste", function() {
$el.trigger("prepaste");
setTimeout(function() { $el.trigger("postpaste"); }, delay);
});
});
};
$("#txtMessage").on("postpaste", function() {
$("#message").text($(this).val());
}).pasteEvents();
});
</script>
</body>
</html>
-- AngularJS
<!DOCTYPE html>
<html data-ng-app>
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<h1>AngularJS</h1>
<div>
Message : <input type="text" data-ng-model="message"><br>
<br> Message : {{message}}
</div>
</body>
</html>