Cadoles/formations
20
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Angular, première partie

Browse Source
This commit is contained in:
William Petit 2015-04-08 23:22:53 +02:00
parent de745ba6df
commit 16a28eb88b
32 changed files with 585 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
javascript/angular/angular.md
View File

@ -2,7 +2,7 @@
.cadoles-list[
- Framework applicatif côté client en Javascript
- Framework applicatif côté client en Javascript
- Initialement présenté par Google en 2009
- Licence MIT
- Dernière version stable 1.3.15 (version 2 en alpha)

2
javascript/angular/controleurs.md
View File

@ -3,7 +3,7 @@
.cadoles-small[
- Les contrôleurs permettent de gérer la logique métier dans votre application Angular.
- La définition du périmètre d'action d'un contrôleur est lié à un élément du DOM et se fait via l'utilisation de la directive `ng-controller`
- Le périmètre d'action d'un contrôleur est lié à un élément du DOM et sa définition s'effectue via l'utilisation de la directive `ng-controller`
]

35
javascript/angular/directives-1.md Normal file
View File

@ -0,0 +1,35 @@
# .cadoles-slide-title[Les directives de base (1/)]
**Itération avec ng-repeat: sur un tableau**
```html
<html>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
<ul>
<li ng-repeat="i in items">
<!--
Des variables spéciales permettent d'accéder aux informations
de contexte de l'itération courante: $index, $first, $middle, $last, $even, $odd
-->
<span>{{ $index }}</span>
<!-- On peut accéder directement au propriétés de i à l'intérieur de la boucle -->
<span>{{ i.label }}</span>
</li>
</ul>
</div>
<script src="angular.js"></script>
<script>
angular.module('myApp', [])
.controller('MainCtrl', ['$scope', function($scope) {
$scope.items = [
{ label: 'Item 1' },
{ label: 'Item 2' },
{ label: 'Item 3' },
];
}]);
</script>
</body>
</html>
```

29
javascript/angular/directives-2.md Normal file
View File

@ -0,0 +1,29 @@
# .cadoles-slide-title[Les directives de base (2/)]
**Itération avec ng-repeat: sur un objet**
```html
<html>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
<ul>
<li ng-repeat="(key, val) in myObj">
<span>Clé: {{ key }}</span><span>Valeur: {{ value }}</span>
</li>
</ul>
</div>
<script src="angular.js"></script>
<script>
angular.module('myApp', [])
.controller('MainCtrl', ['$scope', function($scope) {
$scope.myObj = [
'prop1': 'Foo',
'prop2': 'Bar'
'prop3': 'Baz'
];
}]);
</script>
</body>
</html>
```

29
javascript/angular/directives-3.md Normal file
View File

@ -0,0 +1,29 @@
# .cadoles-slide-title[Les directives de base (3/)]
**Itération avec ng-repeat: sur un objet**
```html
<html>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
<ul>
<li ng-repeat="(key, val) in myObj">
<span>Clé: {{ key }}</span><span>Valeur: {{ value }}</span>
</li>
</ul>
</div>
<script src="angular.js"></script>
<script>
angular.module('myApp', [])
.controller('MainCtrl', ['$scope', function($scope) {
$scope.myObj = [
'prop1': 'Foo',
'prop2': 'Bar'
'prop3': 'Baz'
];
}]);
</script>
</body>
</html>
```

22
javascript/angular/directives-4.md Normal file
View File

@ -0,0 +1,22 @@
# .cadoles-slide-title[Les directives de base (4/)]
**Conditions dans les templates: `ng-show`, `ng-hide`, `ng-switch`**
```html
<html>
<body ng-app="myApp">
<div ng-controller="MainCtrl" ng-init="myTest = true; myVal = 'foo'">
<span ng-hide="myTest === true">Caché !</span>
<span ng-show="myTest === true">Affiché !</span>
<div ng-switch="myTest === true">
<span ng-switch-when="foo">Affiché !</span>
<span ng-switch-when="bar">Caché !</span>
<span ng-switch-default="baz">Caché !</span>
</div>
</div>
<script src="angular.js"></script>
</body>
</html>
```

23
javascript/angular/directives-5.md Normal file
View File

@ -0,0 +1,23 @@
# .cadoles-slide-title[Les directives de base (5/)]
**Modification dynamique du style: `ng-class`**
```html
<html>
<body ng-app="myApp">
<style>
.red { color: red; }
.blue { color: blue; }
.xxl { font-size: 50px; font-weight: bold; }
</style>
<div ng-controller="MainCtrl" ng-init="iLoveBlue=true; iLoveRed=false; myClasses=['red', 'xxl']">
<span ng-class="myClasses">Rouge et large</span>
<span ng-class="{'red': iLoveRed, 'blue': iLoveBlue}">Bleu</span>
</div>
<script src="angular.js"></script>
</body>
</html>
```

26
javascript/angular/directives-6.md Normal file
View File

@ -0,0 +1,26 @@
# .cadoles-slide-title[Les directives de base (6/)]
**Inclusion de template avec la directive `ng-include`**
```html
<!-- Fichier index.html -->
<html>
<body ng-app>
<ng-include="'template1.html'"></ng-include>
<script src="angular.js"></script>
</body>
</html>
<!-- Fichier template1.html -->
<div>
<div ng-controller="MyCtrl">
<!-- ... -->
</div>
</div>
```
- Les templates sont chargés à la volée, en AJAX
- Il est possible de les précompiler et de les inclures sous leur forme Javascript lors de la mise en production

16
javascript/angular/exercices/conditions/.solution/app.js Normal file
View File

@ -0,0 +1,16 @@
/*
* Énoncé:
* Implémenter les conditions dans la directive "ng-class" afin d'afficher un assemblage de cellules.
*
* Le rectangle résultant doit présenter une alternance de couleur rouge & bleu sur ses colonnes, et
* avoir un côté horizontale de longueur "edge"
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.range = new Array(100);
$scope.edge = 10;
}]);

28
javascript/angular/exercices/conditions/.solution/index.html Normal file
View File

@ -0,0 +1,28 @@
<html>
<head>
<meta charset="utf8">
<title>Exercice: conditions</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app="Exo">
<style>
.pixel { display: inline-block; width: 50px; height: 50px; background: #ccc; float: left; text-align: center; line-height: 50px;}
.pixel.last { clear: both; }
.red { background: rgba(255, 0, 0, 0.5); }
.blue { background: rgba(0, 0, 255, 0.5); }
</style>
<div ng-controller="MainCtrl">
<div class="pixel"
ng-class="{ 'red': $odd, 'blue': $even, 'last': ($index)%edge === 0 }"
ng-repeat="i in range track by $index">
{{$index}}
</div>
</div>
<!-- Import de du framework Angular -->
<script src="../../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

16
javascript/angular/exercices/conditions/app.js vendored Normal file
View File

@ -0,0 +1,16 @@
/*
* Énoncé:
* Implémenter les conditions dans la directive "ng-class" afin d'afficher un assemblage de cellules.
*
* Le rectangle résultant doit présenter une alternance de couleur rouge & bleu sur ses colonnes, et
* avoir un côté horizontale de longueur "edge"
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.range = new Array(100);
$scope.edge = 10;
}]);

28
javascript/angular/exercices/conditions/index.html Normal file
View File

@ -0,0 +1,28 @@
<html>
<head>
<meta charset="utf8">
<title>Exercice: conditions</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app="Exo">
<style>
.pixel { display: inline-block; width: 50px; height: 50px; background: #ccc; float: left; text-align: center; line-height: 50px;}
.pixel.last { clear: both; }
.red { background: rgba(255, 0, 0, 0.5); }
.blue { background: rgba(0, 0, 255, 0.5); }
</style>
<div ng-controller="MainCtrl">
<div class="pixel"
ng-class=""
ng-repeat="i in range track by $index">
{{$index}}
</div>
</div>
<!-- Import de du framework Angular -->
<script src="../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

47
javascript/angular/exercices/iteration/.solution/app.js Normal file
View File

@ -0,0 +1,47 @@
/*
* Énoncé:
* Via la directive ng-repeat, afficher dans la page sous la forme d'un tableau, la liste des licences
* disponibles sur Github lors de la création d'un nouveau dépôt.
*
* Le tableau comprendra 2 colonnes: le nom de la licence et une colonne avec un bouton "Afficher la description".
* Lors d'un clic sur ce bouton, l'application devra afficher la description de la licence en utilisant la méthode
* showLicenseDesc(licenceURL) déjà implémentée dans le contrôleur.
*
* Aide:
* Voir l'élément <a /> pour l'affichage du lien et la directive ng-href sur la
* documentation Angular https://code.angularjs.org/1.3.15/docs/api/ng/directive/ngHref
*
* Liens:
* - API Github https://developer.github.com/v3/licenses
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', '$http', '$window', function($scope, $http, $window) {
$scope.licences = [];
$http({
method: 'GET',
url: 'https://api.github.com/licenses',
headers: { Accept: 'application/vnd.github.drax-preview+json' }
})
.then(function(res) {
$scope.licences = res.data;
})
;
$scope.showLicenseDesc = function(licenceUrl) {
$http({
method: 'GET',
url: licenceUrl,
headers: { Accept: 'application/vnd.github.drax-preview+json' }
})
.then(function(res) {
$window.alert(res.data.description);
})
.catch(console.error.bind(console))
;
};
}]);

32
javascript/angular/exercices/iteration/.solution/index.html Normal file
View File

@ -0,0 +1,32 @@
<html>
<head>
<meta charset="utf8">
<title>Exercice: itération</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app="Exo">
<div ng-controller="MainCtrl">
<h1>Github Licenses</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="l in licences">
<td>{{l.name}}</td>
<td><button ng-click="showLicenseDesc(l.url)">Show description</button></td>
</tr>
</tbody>
</table>
</div>
<!-- Import de du framework Angular -->
<script src="../../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

47
javascript/angular/exercices/iteration/app.js vendored Normal file
View File

@ -0,0 +1,47 @@
/*
* Énoncé:
* Via la directive ng-repeat, afficher dans la page sous la forme d'un tableau, la liste des licences
* disponibles sur Github lors de la création d'un nouveau dépôt.
*
* Le tableau comprendra 2 colonnes: le nom de la licence et une colonne avec un bouton "Afficher la description".
* Lors d'un clic sur ce bouton, l'application devra afficher la description de la licence en utilisant la méthode
* showLicenseDesc(licenceURL) déjà implémentée dans le contrôleur.
*
* Aide:
* Voir l'élément <a /> pour l'affichage du lien et la directive ng-href sur la
* documentation Angular https://code.angularjs.org/1.3.15/docs/api/ng/directive/ngHref
*
* Liens:
* - API Github https://developer.github.com/v3/licenses
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', '$http', '$window', function($scope, $http, $window) {
$scope.licences = [];
$http({
method: 'GET',
url: 'https://api.github.com/licenses',
headers: { Accept: 'application/vnd.github.drax-preview+json' }
})
.then(function(res) {
$scope.licences = res.data;
})
;
$scope.showLicenseDesc = function(licenceUrl) {
$http({
method: 'GET',
url: licenceUrl,
headers: { Accept: 'application/vnd.github.drax-preview+json' }
})
.then(function(res) {
$window.alert(res.data.description);
})
.catch(console.error.bind(console))
;
};
}]);

29
javascript/angular/exercices/iteration/index.html Normal file
View File

@ -0,0 +1,29 @@
<html>
<head>
<meta charset="utf8">
<title>Exercice: itération</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app="Exo">
<div ng-controller="MainCtrl">
<h1>Github Licenses</h1>
<table>
<thead>
<tr>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- Compléter ici le template -->
</tbody>
</table>
</div>
<!-- Import de du framework Angular -->
<script src="../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

4
javascript/angular/exercices/scope-2/app.js → javascript/angular/exercices/scope-1/.solution/app.js
View File

@ -18,8 +18,8 @@ Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.prenom = null;
$scope.age = null;
$scope.direBonjour = function() {
// alert('...');
$scope.sayHello = function() {
alert('Bonjour '+$scope.nom+' '+$scope.prenom+'. Votre âge est '+$scope.age);
};
}]);

10
javascript/angular/exercices/scope-2/index.html → javascript/angular/exercices/scope-1/.solution/index.html
View File

@ -9,22 +9,22 @@
<div ng-controller="MainCtrl">
<label>Nom</label>
<input type="text" />
<input type="text" ng-model="nom"/>
<br />
<label>Prénom</label>
<input type="text" />
<input type="text" ng-model="prenom"/>
<br />
<label>Age</label>
<input type="number" />
<input type="number" ng-model="age"/>
<br />
<button>Dire bonjour</button>
<button ng-click="sayHello()">Dire bonjour</button>
</div>
<!-- Import de du framework Angular -->
<script src="../node_modules/angular/angular.js"></script>
<script src="../../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>

2
javascript/angular/exercices/scope-1/app.js vendored
View File

@ -18,7 +18,7 @@ Exo.controller('MainCtrl', ['$scope', function($scope) {
$scope.prenom = null;
$scope.age = null;
$scope.direBonjour = function() {
$scope.sayHello = function() {
// alert('...');
};

36
javascript/angular/exercices/services-1/.solution/app.js Normal file
View File

@ -0,0 +1,36 @@
/*
* Énoncé:
* Récupérer les données du formulaire et envoyer celles-ci via un clic sur le bouton "Envoyer".
* Les données devront être transmises sous la forme JSON au serveur NodeJS fourni avec l'exercice
* via la méthode HTTP POST avec le service $http.
*
* Documentation service $http: https://code.angularjs.org/1.3.15/docs/api/ng/service/$http
*
* Partie serveur:
* - Se placer dans le répertoire de l'exercice avec un terminal
* - Lancer "node server.js"
*
*/
var ENDPOINT = 'http://localhost:3000/';
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
$scope.data = {
nom: '',
prenom: '',
age: 0
};
$scope.sendData = function() {
$http.post(ENDPOINT, $scope.data)
.then(function(res) {
console.log(res);
alert(res.data.message);
})
;
};
}]);

30
javascript/angular/exercices/services-1/.solution/index.html Normal file
View File

@ -0,0 +1,30 @@
<html>
<head>
<meta charset="utf8">
<title>Exercice: utilisation de service</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app="Exo">
<div ng-controller="MainCtrl">
<label>Nom</label>
<input type="text" ng-model="data.nom" />
<br />
<label>Prénom</label>
<input type="text" ng-model="data.prenom" />
<br />
<label>Age</label>
<input type="number" ng-model="data.age" />
<br />
<button ng-click="sendData()">Envoyer</button>
</div>
<!-- Import de du framework Angular -->
<script src="../../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

32
javascript/angular/exercices/services-2/.solution/app.js Normal file
View File

@ -0,0 +1,32 @@
/*
* Énoncé:
* Implémenter le service "myPrompt" qui pose une question et retourne la réponse entrée par l'utilisateur.
* Le service devra lui même utiliser le service $window, service "alias" de l'objet Window fourni par Angular et sa méthode
* prompt().
*
* Documentation:
* - Service $window: https://code.angularjs.org/1.3.15/docs/api/ng/service/$window
* - window.prompt(): https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
*
*/
var Exo = angular.module('Exo', []);
Exo.controller('MainCtrl', ['$scope', 'myPrompt', function($scope, myPrompt) {
$scope.question = 'Quel est votre age ?';
$scope.response = '--';
$scope.poserQuestion = function() {
$scope.response = myPrompt.ask($scope.question);
};
}]);
Exo.service('myPrompt', ['$window', function($window) {
this.ask = function(question) {
return $window.prompt(question);
};
}]);

21
javascript/angular/exercices/services-2/.solution/index.html Normal file
View File

@ -0,0 +1,21 @@
<html>
<head>
<meta charset="utf8">
<title>Exercice: création de service</title>
</head>
<!-- Déclaration de l'application -->
<body ng-app="Exo">
<div ng-controller="MainCtrl">
<label>Question</label>
<input type="text" ng-model="question" />
<button ng-click="poserQuestion()">Poser la question</button>
<br /><br />
<b>Votre réponse:</b> <span>{{ response }}</span>
</div>
<!-- Import de du framework Angular -->
<script src="../../node_modules/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

5
javascript/angular/exercices/services-2/app.js vendored
View File

@ -8,7 +8,6 @@
* - Service $window: https://code.angularjs.org/1.3.15/docs/api/ng/service/$window
* - window.prompt(): https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt
*
*
*/
var Exo = angular.module('Exo', []);
@ -18,6 +17,8 @@ Exo.controller('MainCtrl', ['$scope', /*'myPrompt',*/ function($scope /*,myPromp
$scope.question = 'Quel est votre age ?';
$scope.response = '--';
// scope.response = myPrompt.ask($scope.question);
$scope.poserQuestion = function() {
// $scope.response = myPrompt.ask($scope.question);
};
}]);

3
javascript/angular/exercices/services-2/index.html
View File

@ -9,7 +9,8 @@
<div ng-controller="MainCtrl">
<label>Question</label>
<input type="text" ng-model="question" />
<br />
<button ng-click="poserQuestion()">Poser la question</button>
<br /><br />
<b>Votre réponse:</b> <span>{{ response }}</span>
</div>

7
javascript/angular/fin.md Normal file
View File

@ -0,0 +1,7 @@
# .cadoles-slide-title[Fin]
.cadoles-center[
# Fin de la première partie
]

7
javascript/angular/index.html
View File

@ -22,6 +22,13 @@
'scope-4',
'services-1',
'services-2',
'directives-1',
'directives-2',
'directives-3',
'directives-4',
'directives-5',
'directives-6',
'fin',
'licence'
];
</script>

28
javascript/angular/plan.md
View File

@ -7,10 +7,12 @@
- Modules
- Contrôleurs et scopes
- Services et injection de dépendances
- Templates et expressions
- Les directives de base
- Routage avec le module `ngRoute`
- Les filtres
- Directives
- Création de directives
- Animations
- Organisation du projet
- Tests unitaires
- Tests fonctionnels
@ -25,16 +27,20 @@
- Modules
- Contrôleurs et scopes
- Les contrôleurs
- L'objet `$scope`
- L'objet `$scope` (exercice scope-1)
- Services et injection de dépendances
- Utilisation de services
- Création de services personalisés
- Templates et expressions
- Itération sur des éléments avec ng-repeat
- Réaction aux changements des modèles avec `ng-show`, `ng-hide`, `ng-switch`, `ng-class`
- Inclusion de templates
- Les filtres
- Directives
- Utilisation de services (exercice services-1)
- Création de services personalisés (exercice services-2)
- Les directives de base
- Itération sur des éléments avec ng-repeat (exercice iteration)
- Réaction aux changements des modèles avec `ng-show`, `ng-hide`, `ng-switch`, `ng-class`, 'ng-if' (exercice conditions)
- Inclusion de templates (exercice include)
- Routage avec le module `ngRoute`
- Le routage côté client
- Utilisation du module (exercice routage)
- Les filtres (exercice filtres)
- Création de directives
- Animations
- Organisation du projet
- Tests unitaires
- Tests fonctionnels

10
javascript/angular/scope-1.md
View File

@ -14,8 +14,10 @@
<body ng-app="myApp">
<div ng-controller="MyAppCtrl">
<!-- Liaison de donnée avec la propriété "myValue" du $scope -->
<span>{{ myValue }}</span>
<!-- La directive "ng-click" associe la méthode exposée sur le $scope à l'évènement "onclick" -->
<button ng-click="buttonClickHandler()"></button>
<button ng-click="myButtonClickHandler()"></button>
</div>
<script src="angular.js"></script>
@ -24,9 +26,9 @@
myApp.controller('MyAppCtrl', ['$scope', function($scope) {
$scope.buttonClickHandler = function() {
alert('Click !');
};
$scope.myValue = 'Foo !'
$scope.myButtonClickHandler = function() { alert('Click !'); };
}]);
</script>

4
javascript/angular/scope-2.md
View File

@ -18,11 +18,11 @@
var myApp = angular.module('myApp', []);
myApp.controller('ParentCtrl', ['$scope', function($scope) {
* $scope.parentProp = "Foo";
$scope.parentProp = "Foo";
}]);
myApp.controller('ChildCtrl', ['$scope', function($scope) {
* $scope.childProp = "Bar";
$scope.childProp = "Bar";
}]);
</script>

8
javascript/angular/scope-3.md
View File

@ -16,15 +16,15 @@
myApp.controller('ParentCtrl', ['$scope', function($scope) {
* $scope.$on('child-event', function(evt) { console.log('Emitted event: ', evt); });
* $scope.$broadcast('parent-event', {data: 'Parent event !'});
$scope.$on('child-event', function(evt) { console.log('Emitted event: ', evt); });
$scope.$broadcast('parent-event', {data: 'Parent event !'});
}]);
myApp.controller('ChildCtrl', ['$scope', function($scope) {
* $scope.$emit('child-event', {data: 'Child event !'});
* $scope.$on('parent-event', function(evt) { console.log('Broadcasted event: ', evt); });
$scope.$emit('child-event', {data: 'Child event !'});
$scope.$on('parent-event', function(evt) { console.log('Broadcasted event: ', evt); });
}]);

2
javascript/cadoles-theme.css
View File

@ -82,7 +82,7 @@ ul > li {
.cadoles-xlarge { font-size: 1.5em; }
.cadoles-large { font-size: 1.2em; }
.cadoles-small { font-size: 0.8em; }
.cadoles-xs { font-size: 0.7em; }
.cadoles-xsmall { font-size: 0.7em; }
.cadoles-center { text-align: center; }
.cadoles-left-column {