Cadoles/formations
21
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
Download Patch File Download Diff File Expand all files Collapse all files

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>