[MEAN] Créer une application MEAN

Introduction


Une bonne Méthode pour commencer avec MEAN.

(MongoDB, Express, Angular , Node).

https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular

C’est plus compliqué que de gérer Firebase , mais cela fonctionne.

Ce qui est génant avec  Firebase, c’est qu’on ne peut pas gérer son propre serveur pour faire du noSql, alors qu’avec MongoDb, on peut monter son propre serveur.

appppp

Comment faire ?



  • Installer MongoDb, s’assurer qu’il fonctionne avec le logiciel Mongovue :Sans titre 2.jpg
  • Installer la stack MEAN et suivre la méthode en Anglais.

Voici l’arborescence de l’application :

 

Sans titre 4.jpg

Sous le répertoire PUBLIC, on trouve le controleur angularJS core.js , et la vue principale index.html :

Sans titre 6

 

Le code :



Package.json, c’est ce qui permet d’installer les dépendances une fois qu’on la créé on lance une commande npm install dans le répertoire de l’app, et cela installe automatiquemeent toutes les dépendances, un peu comme bower :

{
"name" : "node-todo",
"version" : "0.0.0",
"description" : "Simple todo application.",
"main" : "server.js",
"author" : "Scotch",
"dependencies" : {
"body-parser" : "^1.4.3",
"express" : "^4.13.4",
"method-override": "^2.1.3",
"mongoose" : "^4.4.12",
"morgan" : "^1.1.1"
}
}

Server.js permet de configurer

. Les dépendences et libs annexes
. moongose qui se connecte à mongodb
. l’écoute du serveur http et sur quel port
. L’api qui gére les données sur mongoDb en fonction du nom du modèle de données

// server.js

    // set up ========================
    var express  = require('express');
    var app      = express();                               // create our app w/ express
    var mongoose = require('mongoose');                     // mongoose for mongodb
    var morgan = require('morgan');             			// log requests to the console (express4)
    var bodyParser = require('body-parser');    			// pull information from HTML POST (express4)
    var methodOverride = require('method-override'); 		// simulate DELETE and PUT (express4)

    // configuration =================

    mongoose.connect('mongodb://localhost/myapp');     // connect to mongoDB database on modulus.io

    app.use(express.static(__dirname + '/public'));                 // set the static files location /public/img will be /img for users
    app.use(morgan('dev'));                                         // log every request to the console
    app.use(bodyParser.urlencoded({'extended':'true'}));            // parse application/x-www-form-urlencoded
    app.use(bodyParser.json());                                     // parse application/json
    app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
    app.use(methodOverride());

    // Le serveur va se mettre à écouter avec cette commande (Taper node server.js dans la ligne de commande windows, sous le bon répertoire) ======================================
    app.listen(8080);
    console.log("L app écoute sur le port 8080 dans les navigateurs");
	
	
	
	 // definire le modèle de données qui s'apelle todo qui veut dire "chose à faire" =================
    var Todo = mongoose.model('Todo', {
        text : String
    });
	

	// routes ======================================================================
	
	// application -------------------------------------------------------------
    app.get('*', function(req, res) {
        res.sendfile('./public/index.html'); //Charge la seule vue, c est angular qui s occupe du routing en front end
    });
	
    // api ---------------------------------------------------------------------
    // obtenir tous les todo
    app.get('/api/todos', function(req, res) {

        // utiliser moongoose pour obtenir tous les todo dans la database
        Todo.find(function(err, todos) {

            // if there is an error retrieving, send the error. nothing after res.send(err) will execute
            if (err)
                res.send(err)

            res.json(todos); // Retourne tous les todo au format json
        });
    });

    // Créer un todo et retourner tous les todo après création
    app.post('/api/todos', function(req, res) {

        // create a todo, information comes from AJAX request from Angular
        Todo.create({
            text : req.body.text,
            done : false
        }, function(err, todo) {
            if (err)
                res.send(err);

            // get and return all the todos after you create another
            Todo.find(function(err, todos) {
                if (err)
                    res.send(err)
                res.json(todos);
            });
        });

    });

    // supprimer un todo
    app.delete('/api/todos/:todo_id', function(req, res) {
        Todo.remove({
            _id : req.params.todo_id
        }, function(err, todo) {
            if (err)
                res.send(err);

            // get and return all the todos after you create another
            Todo.find(function(err, todos) {
                if (err)
                    res.send(err)
                res.json(todos);
            });
        });
    });

	
	   

Core.js qui est le controleur de index.html :

// public/core.js
var scotchTodo = angular.module('scotchTodo', []);

function mainController($scope, $http) {
    $scope.formData = {};

    // Quand on exécute la page, montrer toutes les choses à faire
    $http.get('/api/todos')
        .success(function(data) {
            $scope.todos = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });

    // Quand on soumets le formulaire ajouter, transmettre la chose à faire à l'api node
    $scope.createTodo = function() {
        $http.post('/api/todos', $scope.formData)
            .success(function(data) {
                $scope.formData = {}; // Supprimer le contenu du formulaire pour que l'utilisateur puisse en utiliser un autre.
                $scope.todos = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

    // Supprimer une chose à faire après l'avoir vérifié.
    $scope.deleteTodo = function(id) {
        $http.delete('/api/todos/' + id)
            .success(function(data) {
                $scope.todos = data;
                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };

}

Index.html qui est la vue principale:

<!-- index.html -->
<!doctype html>

<!-- ASSIGNER LE MODULE ANGULAR  -->
<html ng-app="scotchTodo">
<head>
    <!-- META -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"><!-- OptimizeR la vue mobile -->

    <title>Node/Angular Todo App</title>

    <!-- LIBS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- charger la lib bootrsap -->
    <style>
        html                    { overflow-y:scroll; }
        body                    { padding-top:50px; }
        #todo-list              { margin-bottom:30px; }
    </style>

    <!-- LIBS -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
    <script src="core.js"></script>

</head>
<!--  EXECUTER LE CONTROLLER AND OBTENIR TOUTES LES CHOSES A FAIRE -->
<body ng-controller="mainController">
    <div class="container">

        <!-- HEADER ET COMPTE DE CHOSES A FAIRE -->
        <div class="jumbotron text-center">
            <h1>J'ai plein de trucs à faire <span class="label label-info">{{ todos.length }}</span></h1>
        </div>

        <!-- LISTE DE CHOSES A FAIRE -->
        <div id="todo-list" class="row">
            <div class="col-sm-4 col-sm-offset-4">

                <!-- LOOPER SUR LES  TODOS IN $scope.todos -->
                <div class="checkbox" ng-repeat="todo in todos">
                    <label>
                        <input type="checkbox" ng-click="deleteTodo(todo._id)"> {{ todo.text }}
                    </label>
                </div>

            </div>
        </div>

        <!-- FORM POUR CREER UNE CHOSE A FAIRE -->
        <div id="todo-form" class="row">
            <div class="col-sm-8 col-sm-offset-2 text-center">
                <form>
                    <div class="form-group">

                        <!-- BIND THIS VALUE TO formData.text IN ANGULAR -->
                        <input type="text" class="form-control input-lg text-center" placeholder="Je veux un toutou" ng-model="formData.text">
                    </div>

                    <!-- createToDo() WILL CREATE NEW TODOS -->
                    <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Ajouter</button>
                </form>
            </div>
        </div>

    </div>

</body>
</html>
Publicités

#todo-list