Nouvelles ressources en React
Nouvelles ressources pour les niveaux intermédiaires.
Lire la suite...
Angular (anciennement Angular.Js) est un framework open source côté client, multiplateforme. Il permet la création d'applications web, notamment d'applications monopages, qui bénéficient de temps de chargement beaucoup plus rapides et fluides.
DÉBUTANT(E)
⇒ Exemples de codes
→ Vous devez être bilingue (Fr/En). Les exemples de code sont en Anglais.
→ Commençons par des codes très simples. Plus vous progresserez, page après page, plus les scripts seront sophistiqués. Vous devrez cependant parcourir 30 à 40 pages par niveau, avant de passer à l'étape suivante…
→ Pour évaluer vos codes, cliquez sur l'icône en bas à gauche de la page (roues dentées), puis choisissez un compilateur dans la liste qui s'ouvrira dans un autre onglet. Pour finir, testez votre travail.
À VOUS DE REPRODUIRE ET DE VOUS IMMERGER !
C 0001 - Hello World !
Reproduisez ce code (ne pas copier-coller !).
<html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <h1>Hello World !</h1> </div> </body> </html>
C 0002 - Champs de formulaire
Reproduisez ce code (ne pas copier-coller !).
<html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>Enter a name in the field below :</p> <p>Nom : <input type="text" ng-model="name" placeholder="Enter name here"></p> <h1>Hello {{name}}. How are you ?</h1> </div> </body> </html>
C 0003 - Directives
Reproduisez ce code (ne pas copier-coller !).
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=['Ludivine','Suzie','Jacques']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html>
C 0004 - Directives
Reproduisez ce code (ne pas copier-coller !).
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="" ng-init="names=['Ludivine','Suzie','Lili','Jupiter','Hector','Jacques']">
<ul>
<li ng-repeat="x in names">
{{ x }}
</li>
</ul>
</div>
</body>
</html>
C 0005 - Contrôleurs
Reproduisez ce code (ne pas copier-coller !).
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="clientC">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('clientC', function($scope) {
$scope.firstName = "Malthus";
$scope.lastName = "Smith";
$scope.fullName = function() {
return $scope.firstName + " " + $scope.lastName;
};
});
</script>
</body>
</html>
C 0006 - Champs de formulaire
Reproduisez ce code (ne pas copier-coller !).
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {firstName:"Esteban", lastName:"Dimitrius"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
</body>
</html>
C 0007 - Animation
Reproduisez ce code (ne pas copier-coller !).
<!DOCTYPE html>
<html>
<style>
div {
transition: all linear 0.8s;
background-color: orange;
height: 200px;
}
.ng-hide {
height: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<body ng-app="myAppOrange">
<h1>Delete orange DIV: <input type="checkbox" ng-model="myCheckOrange"></h1>
<div ng-hide="myCheckOrange"></div>
<script>
var app = angular.module('myAppOrange', ['ngAnimate']);
</script>
</body>
</html>
C 0008 - Animation
Reproduisez ce code (ne pas copier-coller !).
<!DOCTYPE html>
<html>
<style>
div {
transition: all linear 0.2s;
background-color: red;
height: 400px;
}
.ng-hide {
height: 0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-animate.js"></script>
<body ng-app="myAppRed">
<h1>Delete orange DIV: <input type="checkbox" ng-model="myCheckRed"></h1>
<div ng-hide="myCheckRed"></div>
<script>
var app = angular.module('myAppRed', ['ngAnimate']);
</script>
</body>
</html>
CHOISISSEZ VOTRE COMPILATEUR
Reproduisez ce code, en choisissant l'un des compilateurs ci-dessous (ne copiez-collez pas ! Ce serait trop facile). Tous ont la même fonction, choisissez-en un en tenant simplement compte de vos préférences.
Lorsque vous copiez votre code, remplacez le code existant (par défaut) figurant déjà dans le compilateur, par le vôtre.
Attention ! Pour certains de ces compilateurs, vous devez vous-même choisir le langage de programmation, dans le menu qui vous est alors proposé. Bien évidemment, n'oubliez pas de cliquer sur RUN !
Code
Versions récentes
Outils/Méthodologies
Test
Info/Outils+
» Date de création : 2016
* Créé par Google
* Développé par la communauté Angular
* Écrit en TypeScript
* Multiplateforme
* Licence MIT
* Créé par Google
* Développé par la communauté Angular
* Écrit en TypeScript
* Multiplateforme
* Licence MIT
Actualité
Les commentaires que vous nous laissez sont systématiquement soumis à une modération rigoureuse. Les incivilités et calomnies, les menaces, les intimidations de toutes sortes, plus globalement toutes les violences verbales gratuites, ou bien la diffusion d’informations non vérifiées… ne sont pas tolérées. Nous nous réservons en outre le droit de ne publier que les commentaires qui font effectivement avancer le débat et permettent une meilleure compréhension du sujet traité par l'article présenté sur cette page (ainsi que toutes ses ramifications) et ce, quelle qu’en soit la teneur globale.
