Débutant(e)
Image

Angular (précédemment appelé Angular.Js) est un framework côté client, multiplateforme et open source.

Il permet la création d’App. Web, notamment les Single Page Applications, dont le temps de chargement est beaucoup plus rapide et fluide.

Exemples de codes

→ Commençons par des codes très simples. Plus vous progresserez, page après page, plus les scripts seront sophistiqués. Vous devez néanmoins passer le cap de 30 à 40 pages par niveau, avant de passer à la prochaine étape...

→ Afin d'évaluer vos codes, cliquez sur l'icône à gauche en bas de page (rouages), puis choisissez un compilateur dans la liste qui s'ouvrira dans un autre onglet. Finalement, testez votre travail.

MAINTENANT, RECOPIEZ ET IMPRÉGNEZ-VOUS !

C 0001 - Bonjour tout le monde !

Reproduisez ce code (ne le copier-coller pas!)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<h1>Bonjour tout le monde !</h1>
</div>
</body>
</html>

C 0002 - Champ de formulaire

Reproduisez ce code (ne le copier-coller pas!)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Entrez un prénom dans le champ ci-dessus :</p>
<p>Nom : <input type="text" ng-model="name" placeholder="Écrivez votre nom ici"></p>
<h1>Bonjour {{name}}. Comment allez-vous ?</h1>
</div>
</body>
</html>

C 0003 - Les chiffres

Reproduisez ce code (ne le copier-coller pas!)
<!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="quantity=1;cost=10">
<p>Total en dollars : {{ quantity * cost }}
</p>
</div>
</body>
</html>

C 0004 - Liste de prénoms

Reproduisez ce code (ne le copier-coller pas!)
<!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="myCtrl">
<ul>  
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>var app=angular.module('myApp',[]);app.controller('myCtrl', function($scope) {$scope.names = ["John", "Paul", "Marcus", "Theo"];});
</script>
</body>
</html>

C 0005 - Liste de couleurs

Reproduisez ce code (ne le copier-coller pas!)
<!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="myCtrl">
<ul>  
<li ng-repeat="x in colors">{{x}}</li>
</ul>
</div>
<script>var app=angular.module('myApp',[]);app.controller('myCtrl', function($scope) {$scope.colors = ["Vert", "Rouge", "Noir", "Rose"];});
</script>
</body>
</html>

C 0006 - Champs de formulaire

Reproduisez ce code (ne le copier-coller pas!)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<p>Changez les noms...</p>
<div ng-app="myApp" ng-controller="myCtrl">
Nom de famille : <input type="text" ng-model="firstName"><br>
Prénom : <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= "Felix";
$scope.lastName= "TheCat";
});
</script>
</body>
</html>

C 0007 - Champ de formulaire et variables

Reproduisez ce code (ne le copier-coller pas!)
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>Tapez quelque chose dans le champ :</p>
<p>Prénom : <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
</body>
</html>

C 0008 - Expression

Reproduisez ce code (ne le copier-coller pas!)
<!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="quantity=1;cost=24">
<p>Montant total en dollars américains : {{ quantity * cost }}</p>
</div>
</body>
</html>
Icon

CHOISISSEZ VOTRE COMPILATEUR

Reproduisez ce code, en choisissant  ci-dessous l'un des compilateurs (→ VOIR DÉFINITION).

Ne copier-coller pas ou bien alors, vous n'apprendrez rien.

Tous ont la même fonction, choisissez-en un, en tenant simplement compte de vos préférencesLorsque 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 !

Spécifications Angular

Versions récentes

Outils / Méthodologies

Tests

Info+ Angular

Origine
» Date de création : 2016
* Créé par Google
* Développé par la Communauté Angular
* Écrit en TypeScript
* Multiplateforme
* Licence MIT

Outils+ Angular

Logiciels et environnements

Cas pratiques

Afin de vous entraîner, nous ajoutons chaque semaine dans cette section des petits programmes pour vous maintenir à niveau.

CAS 1

NIVEAU BASE

Créer un formulaire de contact

Ce petit programme vous permettra d'établir les champs de saisie nécessaires à la rédaction d'un formulaire de contact, pour le visiteur d'un site ou d'une App. Web.

⇒ ESSAYEZ

CAS 2

NIVEAU INTERMÉDIAIRE

Utiliser PHP MySql avec Angular

Ce petit kit vous permettra de récupérer et traiter les données MySql puis de les exploiter dans le cadre d'une App. de gestion clientèle.

⇒ ESSAYEZ

CAS 3

NIVEAU EXPERT

Développer une application mobile pour végan

Concevoir et développer une application répertoriant les restaurants vegan dans une petite ville.

⇒ ESSAYEZ

Actualité

À propos...

À propos...
Reflex001

Programmation
Développement
Web

Entreprise basée à
Nice - FRANCE / Montréal - CANADA
Uniquement sur RDV...
© 2022 - Tous droits réservés.
ISSN Demande d'enregistrement en cours...

Rappels

Rappels

Légal/Support

Légal/Support
Image
© Copyright 2022 Reflex001. Designed By Art and Earth Networks and Technology / Diego Piccini / Piccini da Todi G&D Studio