Contrôleur et modèle AngularJS

Quel est le rôle d’un contrôleur AgularJS

Dans AngularJS, le controleur est chargé de fournir les données et les actions avec lesquelles l’utilisateur interagira dans les vues. Le controleur doit :

Iinitialiser le modèle,
Exposer le modèle et les fonctions à la vue via l’objet $scope
Réagir aux changements du modèle.

Exemple de contrôleur :

function UserController($scope) { 
    $scope.users = localStorage.getItem("users") || []; 
      
    $scope.addUser = function(user) { ... } 
    $scope.removeUser = function(user) { ... } 
} 
 
angular.module("MyApplication", []).controller("UserController", UserController);

function UserController($scope) {

$scope.users = localStorage.getItem("users") || [];

$scope.addUser = function(user) { ... }

$scope.removeUser = function(user) { ... }

}

angular.module("MyApplication", []).controller("UserController", UserController);

Explication du code :

Dans l’exemple précédent, le contrôleur récupère une liste des utilisateurs dans le local storage HTML 5. Ensuite, il expose les utilisateurs via la propriété users de $scope ainsi que deux fonctions.

Qu’est ce que l’objet $scope dans AngularJS

L’objet $scope, c’est le lien(binding) entre la partie HTML(vue) et Javascript(controller); donc suite au principe MVC, si le code html joue le role de la vue, le code js le role du controlleur donc le scope joue le rôle du model.

Comment utiliser un scope :

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

<div ng-app="myApp" ng-controller="ctrl">

	<h3>mon site préferé est {{nom_site}}</h3>

</div>

<script>
	
	var app = angular.module('myApp',[]);
	app.controller('ctrl', function($scope){
		$scope.nom_site = "openTuto";
	});

</script>

</body>
</html>

<!DOCTYPE html>

<html>

<body>

<h3>mon site préferé est {{nom_site}}</h3>

</div>

var app = angular.module('myApp',[]);

app.controller('ctrl', function($scope){

$scope.nom_site = "openTuto";

});

</script>

</body>

</html>

quand on ajoute une propriété dans l’objet $scope dans la partie controlleur, la partie vue peut accéder facilement à cette propriété ou variable en écrivant juste son nom entre {{ }} ou via les directives qu’on va les voir dans un prochain chapitre(exemple ci-dessus).

Qu’est ce que l’objet $rootScope dans AngularJ

Toutes les applications ont un objet $rootScope, ce dernier est crée dans l’élement qui contient la directive ng-app, l’objet $rootScope est accessible dans toute l’application.

si deux variable ont le même nom dans l’objet $scope et $rootScope, l’application fait appel à la variable de l’objet $scope courant.

Exemple d’utilisation :

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body ng-app="myApp">

<h1>{{scope}}</h1>

<div ng-controller="ctrl">

	<h3>{{scope}}</h3>

</div>

<script>
	
	var app = angular.module('myApp',[]);
	app.controller('ctrl', function($scope){
		$scope.scope = "je suis un scope normal :D";
	});

	app.run(function($rootScope) {
    $rootScope.scope = 'je suis un super scope(rootScope)';
});

</script>

</body>
</html>

<!DOCTYPE html>

<html>

<h1>{{scope}}</h1>

<h3>{{scope}}</h3>

</div>

var app = angular.module('myApp',[]);

app.controller('ctrl', function($scope){

$scope.scope = "je suis un scope normal :D";

});

app.run(function($rootScope) {

$rootScope.scope = 'je suis un super scope(rootScope)';

});