Truc 13 : Exécuter une instruction sur évènement avec $watch

Introduction


On peut actionner des instructions en fonction d’actions utilisateurs avec une fonction $watch

Le code :



<html ng-app="trucs">
	<head>
		<title> Fonction watch qui exécute quqchose sous condition</title>
		<meta charset="utf8" >
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->

		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<script src="librairies/angular-locale_fr-fr.js"></script>

		<!--	APPEL LIB BOOTSTRAP -->
		<script src="librairies/ui-bootstrap.min.js"></script>
			<link rel="stylesheet" href="librairies/bootstrap/css/bootstrap.min.css">

		<script>
		angular.module('trucs',['ui.bootstrap']).controller("Controleur", function ($scope) {
			$scope.nom = "";
			$scope.$watch("nom", function(newValue, oldValue) {
			if ($scope.nom.length > 0) {
				$scope.bienvenue = "Bienvenue " + $scope.nom;
				}
			});
		});
		</script>

	</head>	

	<body >
<div ng-controller="Controleur">
		<input type="text" ng-model="nom" placeholder="Entrez votre Nom">{{bienvenue}}

</body>
 </html>

Publicités

Truc 14 : Partager un modèle entre plusieurs Controleurs à l’aide de $parent.

Introduction:


PArfois, on doit partager un modèle entre plusieurs controleurs Angular.

Comment faire ?


Soit avec sune factory, soit avec $parent, ici nous voyons le cas avec $parent .

Le code:


<html ng-app="trucs">
	<head>
		<title> partager un modèle pour plusieurs controleurs grâce à $parent</title>
		<meta charset="utf8" >
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->

		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<script src="librairies/angular-locale_fr-fr.js"></script>

		<!--	APPEL LIB BOOTSTRAP -->
		<script src="librairies/ui-bootstrap.min.js"></script>
		<link rel="stylesheet" href="librairies/bootstrap/css/bootstrap.min.css">

		<script>
		var app = angular.module('trucs',['ui.bootstrap']);

		app.controller("MyCtrl", function ($scope) { 

			$scope.name = "Peter";
			$scope.user = {
			name: "Parker"
			};
		});

			app.controller("MyNestedCtrl", function($scope) { });
		</script>
	</head>

	<body >
		<div ng-controller="MyCtrl">
			<label>Primitive</label>
			<input type="text" ng-model="name">

			<label>Object</label>
			<input type="text" ng-model="user.name">

			<div class="nested" ng-controller="MyNestedCtrl">
				<label>Primitive</label>
				<input type="text" ng-model="name">

				<label>Primitive with explicit $parent reference</label>
				<input type="text" ng-model="$parent.name">
				<label>Object</label>
				<input type="text" ng-model="user.name">
			</div>
		</div>

Truc 15 : Partager un modèle entre plusieurs contrôleurs à l’aide d’un service(Factory)

Introduction


Parfois, on a besoin de partager une seul modèle entre plusieurs contrôleurs.

Comment faire :


Il faut créer une factory, qui distribue les données du modèles à tous les controleurs.

Le code :


Voici le code exemple :


<html ng-app="monApp">
	<head>
		<title> Partager un modèle pour plusieurs controleurs grâce à un service(factory)</title>
		<meta charset="utf8" >
		<!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->

		<!--	APPEL LIB ANGULAR -->
		<script	type="text/javascript" 	src="angular-1.3.13/angular.min.js"></script>
		<script src="librairies/angular-locale_fr-fr.js"></script>

		<!--	APPEL LIB BOOTSTRAP -->
		<script src="librairies/ui-bootstrap.min.js"></script>
			<link rel="stylesheet" href="librairies/bootstrap/css/bootstrap.min.css">

		<script>

		var app = angular.module("monApp", []);

		<!-- CI DESSOUS, LA FACTORY QUI DISTRIBUE LES DONNEES AUX CONTROLEURS, SUR DEMANDE -->
		app.factory("ServiceUtilisateurs", function() {
			var utilisateurs = ["Patrice", "Daniel", "Aziz"]; <!-- Le modèle -->
				return {
					tous: function() {
						return utilisateurs;
					},
					premier: function() {
						return utilisateurs[0];
					},
					dernier: function() {
						return utilisateurs[2];
					}
				};
			});

		<!-- CI DESSOUS, LES 3 CONTROLEURS DIFFERENTS DE LA MEME APPLICATION, QUI PARTAGENT UN MEME MODELE GRACE  A LA FACTORY AU DESSUS -->
		app.controller("PremierControleur", function($scope, ServiceUtilisateurs) {
			$scope.utilisateurs = ServiceUtilisateurs.tous();
		});

		app.controller("SecondControleur", function($scope, ServiceUtilisateurs) {
			$scope.premierUtilisateur = ServiceUtilisateurs.premier();
		});

		<!-- CE TROISIEME CONTROLEUR DISPOSE DUNE NOTATION QUI PERMET LA MINIFACTION GRUNT-->
		app.controller("TroisiemeControleur", ["$scope", "ServiceUtilisateurs", function($scope, ServiceUtilisateurs) {
			$scope.dernierUtilisateur = ServiceUtilisateurs.dernier();
			}]);

		</script>
	</head>

	<!-- LA VUE -->
	<body >
<div ng-controller="PremierControleur">
<ul ng-repeat="utilisateur in utilisateurs">
	<li>{{utilisateur}}</li>
</ul>
<div class="nested" ng-controller="SecondControleur">
				Premier utilisateur: {{premierUtilisateur}}</div>
<div ng-controller="TroisiemeControleur">
				Dernier utilisateur: {{dernierUtilisateur}}</div>
</div>
</body>
</html>

Micro App Angular numéro 8 : GestEmployés

Introduction:gest


 Jour 1 : 2h30 de code

Une micro appli Angular d’entrainement, pour travailler le filtrage en AngularJs.

Il s’agit d’une application de gestion de personnel, tout en temps réel.

On voit les statistiques se modifier en temps réel.

J’avais un peu assez des 2 autres applications parcequ’il y avait des maladresses dedans, alors je fais celle là un peu.

Cliquer ici pour la tester.

Plus du tout de Sql ni d’accès Bdd, c’est comme du Big Data, là je sauvegarde le modèle dans le navigateur avec WebStorage, mais je pourrais stocker le modèle sur mongoDb. Faut avouer que c’est assez simple. à ce stade.

Jour 2 : 3h30 de code

Finalement, j’ai bien re-travaillé le fonctionnement des filtres et en fait, c’est assez simple à la base de faire un filtre :

ETAPE  1 :Dans la vue, créer un Select qui va contenir le critère du filtre, exemple :


<select class="selectionner" data-ng-model="filtreCsp" ng-options="opt.csp as opt.csp for opt in personnes| unique:'csp'" >
 <option value="">Catégorie ...</option>
 </select>

Dans ce cas, je parcours le modèle personnes, à la recherche de toutes les CSP(catégories socio-professionelles), et j’ajoute un UNIQUE pour spécifier qu’il ne faut pas de doublons (un peu comme en sql)

ETAPE 2 :Ensuite, dans le ng-repeat, j’ajoute tout simplement ceci: filter:filtreCsp comme cela :


<tr ng-repeat="personne in personnes |filter:filtreCsp " >

Du coup, le filtre fonctionne automatiquement ! Il y a d’autres types de filtres que l’on peut faire autrement , lorsque le filtre est compliqué du style choisir le personnel entre 20 et 40 ans, il faut alors créer une fonction qui retourne le résultat., j’expliquerais plus tard comment faire.

pas eu le temps de mettre la fenêtre modale Bootstrap pour le picking de photos

Lire la suite

Gérer 2 vues avec $routeProvider d’Angular

Introduction :


On peut gérer plusieurs vues à l’aide de $routeProvider. Le code suivant montre comment afficher 2 onglets, qui affichent chacun une vue différente. Il existe un controleur différent par vue.

. Dans le code suivant, on voit que 2 controleurs vides attendent d’être emplis de données. Le routing de vue fonctionne déjà.

Le Code ( A tester Ici) :



<!DOCTYPE html>
<html>
<head>
    <title>2 Vues avec Angular</title>
    <!--styles -->
    	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

    <!--scripts-->
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="angular-route.min.js"></script>
    <script type="text/javascript" src="ui-bootstrap.min.js"></script>
    <script type="text/javascript" src="ui-bootstrap-tpls.min.js"></script>
	<script>

'use strict';

// Declare app level module which depends on other modules
angular.module('demoApp', ['ngRoute','ui.bootstrap']).
  config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', {templateUrl: 'views/vue1.html'});
    $routeProvider.when('/vue1', {templateUrl: 'views/vue1.html', controller: 'ControlleurVue1'});
    $routeProvider.when('/vue2', {templateUrl: 'views/vue2.html', controller: 'ControlleurVue2'});
    //$routeProvider.otherwise({redirectTo: '/'});
  }]).
  controller('demoController', ['$scope', '$location', function ($scope, $location) {
    $scope.isActive = function (viewLocation) {
      var active = false;
      if ($location.path().indexOf(viewLocation) !== -1) {
        active = true;
      }
      return active;
    };

  }]);

angular.module('demoApp').controller('ControlleurVue1', ['$scope', function ($scope) {

}]);

angular.module('demoApp').controller('ControlleurVue2', ['$scope', function ($scope) {

}]);

	</script>
</head>

<body ng-app="demoApp">
	<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="board-header">
<ul class="nav nav-tabs nav-justified">
	<li><a href="#/vue1" ng-class="{active: isActive('#/vue1')}">Vue 1</a></li>
	<li><a href="#/vue2" ng-class="{active: isActive('#/vue2')}">Vue 2</a></li>
</ul>
</div>
<div ng-view></div>
</nav>
</body>
</html>

Créer une Directive de base avec Angular

Introduction :


Code pour créer une directive de base avec Angular. Dans ce cas, la directive affiche une portion de code html, avec une variable du controleur. On constate donc qu’on peut créer ses propres balises Html.

Le Code:


1 Directive avec Angular

	<!--styles -->

    <!--scripts--><script src="angular.min.js" type="text/javascript"></script><script src="angular-route.min.js" type="text/javascript"></script><script src="ui-bootstrap.min.js" type="text/javascript"></script><script src="ui-bootstrap-tpls.min.js" type="text/javascript"></script><script>// <![CDATA[
	'use strict';

	angular.module('MonApp',[])
	.controller('MonControleur',function($scope){
		$scope.personne = {nom:"Durand"};
	})
	.directive('maDirective',function(){
		return{
			restrict:'E',
			template:"
Hello {{personne.nom}}
"
		}
	});

// ]]></script>

Comment gérer la latence du Live Binding avec Angular.

Introduction :


La liaison automatisée modèle-vue d’Angular est super. Seulement, j’ai pu constater qu’une latence se créait dans mes 2 derniers projets, mon petit stock et evalEntretien. Dans mon petit stock, c’est quand on change un prix dans la liste des objets, et dans evalEntretien, c’est quand on coche des étoiles. Il faut trouver une méthode, ou un moyen pour qu’il n’y ait pas de latence.

Mes pistes pour supprimer la latence:


  • Depuis la version 1.3, j’ai entendu parler qu’on peux désactiver le binding d’Angular en utilisant  2 fois 2 points :
    {{::message}}
  • En fait, ils appellent ça le one time binding, et cela ne binde qu’une seule fois :One-time bindingAn expression that starts with :: is considered a one-time expression. One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value (see value stabilization algorithm below).
  • A part ca, il faut trouver le moyen de ne pas faire de binding, quand il le faut, éventuellement en copiant un partie du modèle dans une variable objet JS, non bindée, puis à la fin, lors d’un clic sur bouton, on ré-injecte le tout dans le modèle.

Admettons que le binding d’Angular ralentisse l’application car il est relié à un graphique par exemple, qui s’anime en temps réel, alors il faut « délier » provisoirement le binding, tant pis si le graphe n’est pas rafraichi en temps réel, puis on le rafraichi sur bouton. Car finalement, le rafraichissement en temps réel n’a pas forcément d’intérêt quand on y pense.

Des liens :


https://www.exratione.com/2013/12/considering-speed-and-slowness-in-angularjs/ https://github.com/Pasvaz/bindonce https://www.binpress.com/tutorial/speeding-up-angular-js-with-simple-optimizations/135

https://hypedrivendev.wordpress.com/2014/06/24/nouveautes-angularjs-1_3/