Micro-Application 1 avec Angular.js

Introduction


Voici une première micro application d’enregistrement d’objets, avec une liste qui s’alimente automatiquement et une div d’infos.

Le fait d’avoir un contrôleur qui gère tout est très agréable, $scope est facile d’utilisation, la vue qui se met à jour automatiquement est fantastique. La gestion MVC est très cool, de plus cela simplifie également la consultation et l’analyse de forums comme StackOverflow .

La durée de réalisation et la simplicité d’Angular est excellente.Angular mettant les vues à jour automatiquement, cela simplifie énormément le code.

Cliquez ici pour tester

app1

Description


Technologie : Angular.js

Temps de réalisation : 1H30

Explication


Il n’y a pas de contrôle d’inputs HTML ce n’est pas l’objet de l’appli, je n’ai pas poussé le truc, exprès.

Le but est seulement de voir le tableau[] s’incrémenter et $scope mettre à jour la vue, en fonction des données entrées, ce qui est tripant.

Tout tient dans un simple fichier Html!

Les css de la liste des objets ont été générés à l’aide d’un générateur de css sur internet.

La suite logique de cette micro application sera un enregistrement en couche de persistance(BDD) Mysql ou Oracle ou non relationelle MongoDb (->Objet Json) avec Java ou Php ou node.js.  Que je n’ai pas fait là. C’est super simple, car toutes les données sont déjà dans un tableau, il ne reste plus qu’à picorer, dedans …

Le code


<html lang="fr" ng-app="achat">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=iso-8859-15" />
        <!-- -----------------------------------------------DEBUT DU CHARGEMENT DES LIBRAIRIES------------------------ -->
        
        <!--    APPEL LIB ANGULAR -->
        <script    type="text/javascript"     src="angular-1.3.13/angular.min.js"></script>
        
        <!-- -----------------------------------------------FIN DU CHARGEMENT DES LIBRAIRIES------------------------ ----->
        <script>
            var myApp = angular.module('achat',[]);
                
            myApp.controller('NameCtrl', function($scope) {
                var date = new Date();
                $scope.nom        ='';
                $scope.marque     ='';
                $scope.prix       ='';
                $scope.email      ='';
                $scope.date       = date;
                $scope.alert      ='Rien à signaler';
                $scope.tableau    = [];
                
                $scope.enregistrer    =    function(){
    
                    if ($scope.nom == ''){
                        $scope.alert='Champs nom Vide';
                    }
                    
                    else {
                    // Ajoute le nom et le prix de l'objet au tableau
                      $scope.tableau.push({
                      nom: $scope.nom,
                      prix:$scope.prix,
                      });
                
                    
                    $scope.alert='élément ajouté';
                    
                    // Supprime le contenu des champs après un push de variables dans le tableau
                    $scope.nom  = "";
                    $scope.prix = "";
                    console.log($scope.tableau);
                    }
                }
                
                $scope.getTotalItems = function () {
                    // retourne combien il y a de lignes dans le tableau
                    return $scope.tableau.length;
                };
                
                $scope.getTotal = function(){
                    var total = 0;
                    for(var i = 0; i < $scope.tableau.length; i++){
                        
                        total += $scope.tableau[i].prix;
                    }
                    return total;
                }
                
                   $scope.supprimeClique = function (index) {
                        $scope.tableau.splice(index, 1);
                    };
            
            
            
            
            });
            
        </script>
        

    </head>

<body ng-controller="NameCtrl" class="body">

<div class="infos"><h1>Informations:</h1>
<p>
{{alert}}
</p>
</div>    

<div class="formulaire" ><h1>Enregistrer un Objet</h1>
    <form    ng-submit="enregistrer()">
    Nom de l'objet<br>        <input ng-model="nom"          type="text"     class ="champs" /><br>
    Marque<br>                <input ng-model="marque"       type="text"     class ="champs"    /><br>
    Prix<br>                  <input ng-model="prix"         type="number"     class ="champs" step="0.01"    /><br>
    Email Constructeur<br>    <input ng-model="email"        type="email"     class ="champs" /><br>
    Date yyyy-mm-dd<br>       <input ng-model="date"         type="date"     class ="champs" /><br>
    <input type="submit" value="Ajouter l'objet ">
    </form>
</div>    
    
<div class="vision" > <h1>Description</h1>
    <p>Votre objet s'appelle <b>{{nom}}</b><br>
    Sa Marque est <b>{{marque}}</b><br>
    Son prix est de  <b>{{prix }}</b> Euros<br>
    Son email constructeur est <b>{{email}}</b><br>
    Nous sommes le <b>{{date}}</b><br></p>
</div>
    
<div class="liste"><h1>Liste({{getTotalItems()}})</h1>
    <p>Total: {{getTotal()}} Euros</p>
    <table class="CSSTableGenerator ">
            <tr ng-repeat="truc in tableau" >
                <td><b>Nom:</b> {{truc.nom}} </td>
                <td><b>Prix €:</b> {{truc.prix}} €  </td>
                <td>
            <button ng-click="supprimeClique($index)">Supprimer</button>
            </td>
        </tr>
    </table>    

</div>    
    
</body>
        



        
        
        
<style>
        .body{
            font-family:arial;
        }    
         
        h1{
        
        font-size:1.2em;
        text-align: center;
        background-color:lightgrey;
        -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow:inset 2px 2px 2px 2px #635453;
        box-shadow:inset 2px 2px 2px 2px #635453;
        }
        
        p{
        margin-left:15px;
        }
        
        .formulaire{
        
        height:330px;
        width:400px;
        background-color:ivory;
        float:center;
        margin-left: auto ;
        margin-right: auto ;
        text-align:center;
        -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow:inset 2px 2px 2px 2px #635453;
        box-shadow:inset 2px 2px 2px 2px #635453;
        }
        
        
        .vision{
        margin-top:30px;
        height:200px;
        width:400px;
        background-color:ivory;
        float:center;
        margin-left: auto ;
        margin-right: auto ;
        -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow:inset 2px 2px 2px 2px #635453;
        box-shadow:inset 2px 2px 2px 2px #635453;
        }
        
        
        .liste{
        margin-top:100px;
        min-height:20px;
        height:auto;
        width:280px;
        background-color:ivory;
        -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow:inset 2px 2px 2px 2px #635453;
        box-shadow:inset 2px 2px 2px 2px #635453;$
        position:absolute;
        margin-top:-500px;

        }
        
        .infos{
        <!-- margin-top:100px; -->
        min-height:20px;
        height:auto;
        width:500px;
        background-color:ivory;
        -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;
        -webkit-box-shadow:inset 2px 2px 2px 2px #635453;
        box-shadow:inset 2px 2px 2px 2px #635453;$

        margin-top:auto;
        margin-left:auto;
        margin-right:auto;
        }
        
        
        .champs{
        margin-top:5px;
        width:200px;
        align: center ;
        margin-left: auto ;
        margin-right: auto ;    
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;

        }
        
        .CSSTableGenerator {
            margin:0px;padding:0px;
            width:100%;
            box-shadow: 10px 10px 5px #888888;
            border:1px solid #000000;
            
            -moz-border-radius-bottomleft:0px;
            -webkit-border-bottom-left-radius:0px;
            border-bottom-left-radius:0px;
            
            -moz-border-radius-bottomright:0px;
            -webkit-border-bottom-right-radius:0px;
            border-bottom-right-radius:0px;
            
            -moz-border-radius-topright:0px;
            -webkit-border-top-right-radius:0px;
            border-top-right-radius:0px;
            
            -moz-border-radius-topleft:0px;
            -webkit-border-top-left-radius:0px;
            border-top-left-radius:0px;
        }.CSSTableGenerator table{
            border-collapse: collapse;
                border-spacing: 0;
            width:100%;
            height:100%;
            margin:0px;padding:0px;
        }.CSSTableGenerator tr:last-child td:last-child {
            -moz-border-radius-bottomright:0px;
            -webkit-border-bottom-right-radius:0px;
            border-bottom-right-radius:0px;
        }
        .CSSTableGenerator table tr:first-child td:first-child {
            -moz-border-radius-topleft:0px;
            -webkit-border-top-left-radius:0px;
            border-top-left-radius:0px;
        }
        .CSSTableGenerator table tr:first-child td:last-child {
            -moz-border-radius-topright:0px;
            -webkit-border-top-right-radius:0px;
            border-top-right-radius:0px;
        }.CSSTableGenerator tr:last-child td:first-child{
            -moz-border-radius-bottomleft:0px;
            -webkit-border-bottom-left-radius:0px;
            border-bottom-left-radius:0px;
        }.CSSTableGenerator tr:hover td{
            
        }
        .CSSTableGenerator tr:nth-child(odd){ background-color:#ffaa56; }
        .CSSTableGenerator tr:nth-child(even)    { background-color:#ffffff; }.CSSTableGenerator td{
            vertical-align:middle;
            
            
            border:1px solid #000000;
            border-width:0px 1px 1px 0px;
            text-align:left;
            padding:7px;
            font-size:10px;
            font-family:Arial;
            font-weight:normal;
            color:#000000;
        }.CSSTableGenerator tr:last-child td{
            border-width:0px 1px 0px 0px;
        }.CSSTableGenerator tr td:last-child{
            border-width:0px 0px 1px 0px;
        }.CSSTableGenerator tr:last-child td:last-child{
            border-width:0px 0px 0px 0px;
        }
        .CSSTableGenerator tr:first-child td{
                background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
            background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00");    background: -o-linear-gradient(top,#ff7f00,bf5f00);

            background-color:#ff7f00;
            border:0px solid #000000;
            text-align:center;
            border-width:0px 0px 1px 1px;
            font-size:14px;
            font-family:Arial;
            font-weight:bold;
            color:#ffffff;
        }
        .CSSTableGenerator tr:first-child:hover td{
            background:-o-linear-gradient(bottom, #ff7f00 5%, #bf5f00 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
            background:-moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff7f00", endColorstr="#bf5f00");    background: -o-linear-gradient(top,#ff7f00,bf5f00);

            background-color:#ff7f00;
        }
        .CSSTableGenerator tr:first-child td:first-child{
            border-width:0px 0px 1px 0px;
        }
        .CSSTableGenerator tr:first-child td:last-child{
            border-width:0px 0px 1px 1px;
        }
        
</style>

</html>

Publicités