AngularJS

L'essentiel

ng-app

Toutes les applications angularJS doivent contenir la mention ng-app avec le nom de l'application. Si votre application est l'ensemble de votre développement, je vous conseille d'ajouter le ng-app directement sur le body. Sinon, ajoutez le sur l'élément contenant votre application.

  1. <body ng-app='myApp'>

Ensuite, nous allons créer l'application dans un fichier javascript externe (N'oubliez pas d'appeler ce fichier javascript dans votre fichier html).

  1. var myApp = angular.module('myApp',[]);
  2. myApp.config(function(){});

Controller

Le controller est un regroupement de fonctions javascript que vous pourrez utiliser dans une partie de votre application angularJS.
Cette partie de votre application devra comporter la mention ng-controller et le nom du controller.

  1. <section ng-controller='monController'>

La création du controller peut s'effectuer à la suite du fichier javascript de configuration de l'application, mais je vous conseille de créer un nouveau fichier javascript.

  1. angular.module('myApp').controller('monController',['$scope',function($scope){
  2. }]);

$scope

Le scope est la passerelle entre votre vue et votre controller. C'est-à-dire que vous pouvez y ajouter des variables ou des fonctions depuis les controllers et les utiliser ensuite dans votre vue.

Côté controller

  1. angular.module('myApp').controller('monController',['$scope',function($scope){
  2. $scope.text = "Hello World";
  3. $scope.array = [1,2,3,4,5];
  4. }]);

Côté vue

  1. <section ng-controller='monController'>
  2. <p>texte du scope : {{text}}</p>
  3. <ul>
  4. <li ng-repeat="element in array">{{element}}</li>
  5. </ul>
  6. </section>

Exemple

Affichage du contenu inscrit dans le $scope

texte du scope : Hello World

  • 1
  • 2
  • 3
  • 4
  • 5