[Css] Utiliser un templates Css d’Administration moderne et responsive pour créer une application(Partie 2 AngularJs).

IntroductionWB0P6NR1N


Finalement, suite au premier article, j’ai trouvé le meilleur template pour mon cas, je pense, avec sb admin 2.

C’est un pure template open source fait en ANGULARJS, avec du routing de vues, du lazy loading, des directives, mais très bien fait et structuré.

Pleins d’atouts : Le lazy loading de librairies Angular qui fait qu’on charge une grosse librairie annexe, seulement lors du click sur une vue qui impose cela dans le router. Si je clique sur le menu »Graphiques », alors la librairie Charts.JS est chargée. De ,ce fait, tout le site est plus rapide.

Les css sont hyper bien fait, et décris. Ca passe hyper bien sur mobile( Revérifié aujourd’hui, oui c’est le top sur un 5 pouces !).

Dorénavant, je créerais tous mes exercices la dessus,le look est trop bon.

 Description sommaire


Faut l’installer carrément avec NPM, qui installe ensuite les libs via BOWER, au final le tout pèse 8MO librairies annexes comprises.

Ensuite, on a un index.html classique, des vues, des directives et des controllers. Pour les css, il ne faut jamais créer les siens, mais toujours utiliser au maximum les css du template, il faut donc repérer leurs noms dans class= »laClasseDuCss » dans une vue HTML.

Dans le fichier scripts/app.js, on retrouve le routing avec le lazy loading des libriaires et chaque controleur dédié par vue, c’est simple une fois qu’on a compris.

La partie légèrement plus compliquée est les directives, mais une fois qu’on a compris, on peut y injecter des variables et aussi des fonctions personnalisées, qui peuvent se répéter à l’infini. Les directives sont comme un mini-template HTML que l’on peut répéter à loisir dans le HTML, entre des balises personnalisées.

Le testing :


Pour tester le template déja modifié sur mon serveur, cliquer sur ce lien.

Une autre version plus simple :

Quelqu’un a réalisé une version plus à tester :
https://github.com/rcaferraz/startbootstrap-sb-admin-2/tree/angularmod

Publicités

[Exercice 52] Déplacement des points sur click dans le graphique avec HighCharts

Introductionhighcharts21


Dans cet exercice, on peut bouger les points d’un graphique en cliquant dessus, puis le modèle de données JSON est enregistré quand on clique sur Sauvegarder.

Note : je commence à éviter à fond les $scope maintenant, je ne les utiliserais qu’en cas d’absolue nécessité (Par exemple pour les menus déroulants)

Je vais créer une micro App de gestion de ressources humaines utilisant ce système.

Le Code :


Je l’ai stocké sur JsFiddle ici :

http://jsfiddle.net/nicolas1000/efv0vvbp/

Le voici au cas ou :

Index.html


<!-- REF http://jsfiddle.net/highcharts/AyUbx/ draggable REF http://jsfiddle.net/pablojim/Cp73s/ highcharts-ng -->
<html >
	<head>
		<meta charset="utf-8" />
		<title>Statistiques .</title>

		<!-- LIbs -->
		<script src="librairies/angular.min.js"></script>
		<script src="librairies/highcharts.js"></script>
		<script src="librairies/highcharts-ng.js"></script>
		<script src="librairies/draggable-points.js"></script>

		<link rel="stylesheet" type="text/css" href="librairies/bootstrap.min.css">

		<script src="app.js"></script>

	</head>

<body>

<div ng-app="myapp">
    <div ng-controller="myctrl">
        <highchart id="container" config="highchartsNG" style="height: 300px"></highchart>
        <div class="well row">
            <div class="col-xs-3">
                <button ng-click="randomize()" class="btn">Randomizer la série</button>
                <button ng-click="randomize(true)" class="btn">Randomizer l'historique</button>
				<button ng-click="save()" class="btn">Sauvegarder</button>
            </div>
            <div ng-bind="drag" class="col-xs-3"></div>
            <div ng-bind="drop" class="col-xs-3"></div>
			<div id="text"></div>
        </div>
    </div>
</div>

</body>

Le fichier JS app.js :

var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {
    $scope.drag = 'drag feedback';
    $scope.drop = 'drop feedback';

    $scope.randomize = function (onlyHistory) {
        var seriesArray = $scope.highchartsNG.series
        for (i in seriesArray[0].data) {
            var random = Math.floor(Math.random() * 250);
            seriesArray[0].data[i] = random;
            if (!onlyHistory) seriesArray[1].data[i] = random;
        }
    };

	$scope.save= function(){
		 console.log(test);
		document.getElementById('text').innerHTML = "<br>MODELE DE DONNEE APRES SAUVEGARDE: "+test;
	}

	test  = [45, 200, 150];

    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'spline'
            },
            plotOptions: {
                series: {
                    cursor: 'ns-resize',
                    point: {
                        events: {
                            drag: function (e) {
                                $scope.drag = this.series.name + ' = ' + Highcharts.numberFormat(e.newY, 2);
                                $scope.$apply($scope.test);

                            },
                            drop: function () {
                                $scope.drop = this.series.name + ' = ' + Highcharts.numberFormat(this.y, 2);
                                $scope.$apply();
								var point = Highcharts.numberFormat(this.y, 2);
								test[this.index] = parseInt(point); 

                            }
                        }
                    },
                    stickyTracking: false
                },
                column: {
                    stacking: 'normal'
                }
            },

            tooltip: {
                yDecimals: 2
            },

        },

        xAxis: {
            categories: ['Puissance', 'Diplomes', 'Flexibilité']
        },

        series: [{
            data: [0, 71.5, 106.4],
            name: 'Historique',
            draggableY: false,
            dashStyle: 'dash'
        }, {
            data: test,
            name: 'Draggable',
            draggableY: true
        }],
        title: {
            text: 'Cliquez sur les points pour modifier les valeurs.'
        },
        loading: false
    }

});