Les applications AngularJS sont un mélange de HTML et de JavaScript. La première chose dont vous avez besoin est une page HTML.
<!DOCTYPE html> <html> <head> . . </head> <body> . . </body> </html>
Deuxièmement, vous devez inclure le fichier JavaScript AngularJS dans la page HTML afin que nous puissions utiliser AngularJS:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> </head> <body> . . </body> </html>
Remarque: vous devez toujours utiliser la dernière version d’AngularJS. Il n’est donc pas nécessaire d’utiliser la même version que dans l’exemple ci-dessus.
AngularJS Premier exemple
Voici un exemple simple « Hello Word » réalisé avec AngularJS. Il spécifie la partie modèle, vue et contrôleur d’une application AngularJS.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>Hello {{helloTo.title}} !</h2>
</div>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "World, AngularJS";
} );
</script>
</body>
</html>
Résultat :
Hello World, AngularJS !
Vue :
<div ng-controller="HelloController" >
<h2>Hello {{helloTo.title}} !</h2>
</div>
Contrôleur:
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "World, AngularJS";
});
</script>