Truc 19 : Gestion de Contact Angular Avancé avec du routing de vue.

angularjsIntroduction


Jusqu’à présent, je n’ai volontairement pas utilisé le routing de vue Angular et les templates.

Cependant, j’ai constaté après analyse de cette micro app que le routing semblait peut être rendre plus performante l’application. De plus je suis constamment en train d’utiliser le dialog de Jquery alors que dorénavant, je ne ferais plus que du routing, et ne chargerais plus ni Jquery ni Jquery Ui.

Une autre piste est le Lazy Loading de modules que j’expérimenterais plus tard.

Cette App est donc une app de gestion de contacts trouvée sur un plunker et sommairement traduite en Français  à Tester ICI.

Le code :



<!DOCTYPE html>
<html ng-app="myApp">
  <head>
   <meta charset="utf8" >
    <title>Gestion de Contacts</title>
		<!-- APPEL LIB ANGULAR -->
		<script type="text/javascript" src="angular-1.3.13/angular.min.js"></script>
		<script src="angular-filter.min.js"></script>
		<script src="librairies/angular-locale_fr-fr.js"></script>
		
		<script src="angular-route.min.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 myApp = angular.module('myApp', ['ngRoute'])

//ng-route config
.config(function ($routeProvider, $locationProvider){
  $routeProvider
    .when('/accueil', {
      templateUrl: 'default.html',
    })
    .when('/contact-info/:contact_index', {
      templateUrl: 'contact_info.html',
      controller: 'contactInfoCtrl'
    })
    .when('/ajouter', {
      templateUrl: 'contact_form.html',
      controller: 'addContactCtrl'
    })
    .when('/edit/:contact_index', {
      templateUrl: 'contact_form.html',
      controller: 'editContactCtrl'
    })
    .otherwise({redirectTo: '/accueil'});
})

// controllers
.controller('navCtrl', function ($scope) {
  $scope.nav = {
    navItems: ['accueil', 'ajouter'],
    selectedIndex: 0,
    navClick: function ($index) {
      $scope.nav.selectedIndex = $index;
    }
  };
})

.controller('accueilCtrl', function ($scope, ContactService){
  $scope.contacts = ContactService.getContacts();

  $scope.removeContact = function (item) {
    var index = $scope.contacts.indexOf(item);
    $scope.contacts.splice(index, 1);
    $scope.removed = 'Contact supprimé avec succès.';
  };

})

.controller('contactInfoCtrl', function ($scope, $routeParams){
  var index = $routeParams.contact_index;
  $scope.currentContact = $scope.contacts[index];
})

.controller('addContactCtrl', function ($scope, $location) {
  //Avais besoin de monter le button correct sur le formulaire
  $scope.path = $location.path();

  $scope.addContact = function () {
    var contact = $scope.currentContact;
    contact.id = $scope.contacts.length;
    $scope.contacts.push(contact);
  };

})

.controller('editContactCtrl', function ($scope, $routeParams){
  $scope.index = $routeParams.contact_index;
  $scope.currentContact = $scope.contacts[$scope.index];
})

// directives
.directive('contact', function () {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'contact.html'
  }
})

// services
.factory('ContactService', [function () {
  var factory = {};

  factory.getContacts = function () {
    return contactList;
  }

  // contact list, usually would be a separate database
  var contactList = [
    {id: 0, name: 'Henri Stan', email: 'henri@peugeot.com', telephone: '123-456-7890', url: 'www.google.com', 			notes: 'note diverses'},
    {id: 1,name: 'David Charvet', email: 'dcharvet@thales.fr', telephone: '123-456-7890', url: 'www.google.com', 		notes: 'Ne veux pas payer.'},
    {id: 2,name: 'Samwell Tarly', email: 'starly@thales.com', telephone: '123-456-7890', url: 'www.google.com', 		notes: 'Aime le dieu Shiva.'},
    {id: 3,name: 'Pierre Durand', email: 'pierrDurand@renault.com', telephone: '123-456-7890', url: 'www.google.com', 	notes: 'ne comprends rien.'},
    {id: 4, name: 'Mohammed Aziz', email: 'waterdancer@psa.fr', telephone: '123-456-7890', url: 'www.google.com', 		notes: ''},
    {id: 5, name: 'Thierry Lefranc', email: 'khaleesifan100@gmail.com', telephone: '123-456-7890', url: 'www.google.com', notes: 'Perdu une fois arrivé.'},
    {id: 6, name: 'Sylvie Dupont', email: 'tyrion@paris.com', telephone: '123-456-7890', url: 'www.google.com', 		notes: 'Alcolique.'},
    {id: 7, name: 'Cinthia Lavert', email: 'onetrueking@edf.fr', telephone: '123-456-7890', url: 'www.google.com', 		notes: 'Fan de la guerre des étoiles, crétin dans sa tête.'},
    {id: 8, name: 'José Chavez', email: 'hodor@gdf.fr', telephone: '123-456-7890', url: 'www.google.com', 				notes: 'Ennuyeux.'},
    {id: 9, name: 'Margaery Tyrell', email: 'mtyrell@edf.com', telephone: '123-456-7890', url: 'www.google.com', 		notes: 'Aime les marques Française comme Alcatel, ce qui augmente le pib français.'},
    {id: 10, name: 'Idrina Ladru', email: 'oathkeeper@gmail.com', telephone: '123-456-7890', url: 'www.google.com', 	notes: 'Ne pas croire.'},
    {id: 11, name: 'Nathalie Flaubert', email: 'petyr@hutchinson.com', telephone: '123-456-7890', url: 'www.google.com', notes: 'Sympa.'},
  ];
  
  return factory;
}]);


		
		</script>
</head>
<body>

<div class="global-wrapper" ng-app="myApp">

  <!-- nav section -->

<nav class="navbar navbar-default" ng-controller="navCtrl">

<div class="container-fluid">

<div class="nav-header">
        <a href="#" class="navbar-brand hidden-xs">Exercice de gestion de contacts Angular</a>

<ul class="nav navbar-nav">

<li ng-repeat="navLink in nav.navItems" ng-class="{active : $index === nav.selectedIndex}">
            <a class="text-center" ng-click="nav.navClick($index)" ng-href="#/{{navLink}}">{{navLink}}</a>
          </li>

        </ul>

    	</div>

    </div>

  </nav>

    

<div class="container">

<div class="row panel panel-primary" ng-controller="accueilCtrl">

<div class="panel-heading">

<h2 class="panel-title">Angular App de liste de contacts </h2>

      </div>

      

      <!-- contact list -->

<div class="col-xs-5 panel-body">

<ul class="list-group">

<li class="list-group-item">
<h4>Contacts:</h4>

            <input class="form-control" placeholder="Chercher dans vos Contacts" type="text" ng-model="searchText">
            <contact class="list-group-item" ng-repeat="contact in contacts | orderBy: 'name' | filter: searchText "></contact>
          </li>

        </ul>

 
      </div>

      
      <!-- ng-view Plus bas -->

<div class="col-xs-7">

<div class="list-group panel-body">

<div ng-view></div>

        </div>

      </div>

        
    </div>

  </div>


    <!-- Templates HTML utilisés par Angular, habituellement contenus dans des fichiers HMTL séparés-->
    <script type="text/ng-template" id="default.html">

<div class="alert alert-success text-center" ng-class="{hidden : !removed}"> {{removed}}</div>


<div class="list-group-item text-center">Sélectionnez un contact à visualiser</div>

    </script>

	  <!-- Template qui affiche les infos des contacts -->
    <script type="text/ng-template" id="contact_info.html">

<div class="list-group-item">

<h3 class="text-center">{{currentContact.name}}</h3>



email: <a ng-href="{{currentContact.email}}">{{currentContact.email}}</a>



telephone: {{currentContact.telephone}}



url: <a ng-href="{{currentContact.url}}">{{currentContact.url}}</a>



Notes:



{{currentContact.notes}}


        <a ng-href="#/edit/{{contacts.indexOf(currentContact)}}">
          <button class="btn btn-default">
            <span class="glyphicon glyphicon-pencil"></span><span> - Editer</span>
          </button>
        </a>

        <a href="#/"><button class="btn btn-default" ng-click="removeContact(currentContact)">
          <span class="glyphicon glyphicon-remove"></span><span> - Supprimer</span>
        </button></a>
      </div>

    </script>

<!-- Template utilisé à la fois pour créer un contact et pou éditer un contact -->
    <script type="text/ng-template" id="contact_form.html">

<div ng-controller="addContactCtrl">

<div class="list-group-item">


<div class="form-group">
  


<label for="name">Nom: </label> <input id="name" class="form-control" type="text" ng-model="currentContact.name"> 



<label for="email">Email:</label> <input id="email" class="form-control" type="text" ng-model="currentContact.email"> 



<label for="telephone">Téléphone:</label> <input id="telephone" class="form-control" type="text" ng-model="currentContact.telephone"> 



<label for="url">Url:</label> <input id="url" class="form-control" type="text" ng-model="currentContact.url"> 



<label for="notes">Notes:</label>

            <textarea class="form-control" id="notes" rows="3" ng-model="currentContact.notes"></textarea>
          </div>

        
          <a ng-if="path === '/ajouter' " ng-href="#/contact-info/{{ contacts.length - 1 }}" ng-click="addContact()">
            <button class="btn btn-default">
             <span class="glyphicon glyphicon-ok"></span>
             <span> Ajouter</span>
            </button>
          </a>

          <a ng-if="path !== '/ajouter'" ng-href="#/contact-info/{{index}}">
            <button class="btn btn-default">
             <span class="glyphicon glyphicon-ok"></span>
             <span> Sauver l'édition</span>
            </button>
          </a>

          <a href="#/">
            <button class="btn btn-default">
              <span class="glyphicon glyphicon-remove"></span><span>  Annuler</span>
            </button>
          </a>
        </div>

      </div>

    </script>

<!-- template utilisé par le ng-repeat dans la liste de contacts -->
    <script type="text/ng-template" id="contact.html">
      <a ng-href="#/contact-info/{{contacts.indexOf(contact)}}">
        {{contact.name}}
      </a>
    </script>
  </div>

</body>
Publicités