New Python Resources
New Python ressources for intermediate levels...
Read More
Angular (previously called Angular.Js) is a client-side, cross-platform, open framework source. It allows the creation of App. Web, especially Single Page Applications, which gain much faster and smoother loading times.
BEGINNER
⇒ Code Examples
→ You must be bilingual (Fr/En). Code examples are in English.
→ Let's start with very simple codes. The more you progress, page after page, the more sophisticated the scripts will be. However, you must go over 30 to 40 pages per level, before moving on to the next step...
→ In order to evaluate your codes, click on the icon on the left at the bottom of the page (gears), then choose a compiler from the list that will be open in another tab. Finally, test your work.
NOW REPRODUCE AND IMMERSE YOURSELF!
C 0001 - Hello World !
Reproduce this code (do not copy and paste!).
<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 - Form Fields
Reproduce this code (do not copy and paste!).
<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
Reproduce this code (do not copy and paste!).
<!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
Reproduce this code (do not copy and paste!).
<!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 - Controllers
Reproduce this code (do not copy and paste!).
<!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 - Form Fields
Reproduce this code (do not copy and paste!).
<!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
Reproduce this code (do not copy and paste!).
<!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
Reproduce this code (do not copy and paste!).
<!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>
CHOOSE YOUR COMPILER
Reproduce this code, choosing one of the compilers below (don't copy and paste! It would be too easy). They all have the same function, just choose one according to your preferences.
When copying your code, replace the existing (default) code already in the compiler with your own.
Warning! For some of these compilers, you must choose the programming language yourself from the menu that is then offered. Of course, don't forget to click on RUN!
Code
Recent versions
Tools/Methodologies
Test
Info+
» Creation date : 2016
* Created by Google
* Developed by Angular Community
* Written in TypeScript
* Multiplateform
* MIT License
News
The comments you leave us are systematically subject to rigorous moderation. Incivility and slander, threats, intimidation of all kinds, more generally all gratuitous verbal violence, or the dissemination of unverified information... are not tolerated. We also reserve the right to publish only comments which effectively advance the debate and allow a better understanding of the subject covered by the article presented on this page (as well as all its ramifications) and this, whatever its overall content.
