Node.js
Node.js (express.js) avec angular.js Exemple de code

Introduction

Créer notre projet

Nous sommes prêts à y aller, nous courons à nouveau depuis la console:

mkdir our_project
cd our_project

Maintenant, nous sommes à l'endroit où notre code va vivre. Pour créer l'archive principale de notre projet, vous pouvez exécuter

Ok, mais comment créer le projet squelette express?

C'est simple:

npm install -g express express-generator

Les distributions Linux et Mac doivent utiliser sudo pour l'installer car elles sont installées dans le répertoire nodejs accessible uniquement par l'utilisateur root . Si tout se passe bien, nous pouvons enfin créer le squelette de l’application express.

express

Cette commande créera dans notre dossier une application d’exemple express. La structure est la suivante:

bin/
public/
routes/
views/
app.js
package.json

Maintenant, si vous lancez npm start an go sur http: // localhost: 3000, nous verrons l’application express opérationnelle, nous avons généré une application express sans trop de problèmes, mais comment peut-on mélanger avec AngularJS? .

Comment s'exprimer fonctionne, brièvement?

Express est un framework construit sur Nodejs , vous pouvez voir la documentation officielle sur le site Express . Mais pour notre propos, nous devons savoir qu'Express est le responsable lorsque nous tapons, par exemple, http: // localhost: 3000 / home pour rendre la page d'accueil de notre application. Depuis l'application créée récemment, nous pouvons vérifier:

FILE: routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

Ce que ce code nous dit, c'est que lorsque l'utilisateur accède à http: // localhost: 3000, il doit afficher la vue d' index et transmettre un JSON avec une propriété title et une valeur Express. Mais lorsque nous vérifions le répertoire des vues et ouvrons index.jade, nous pouvons voir ceci:

extends layout
block content
    h1= title
    p Welcome to #{title}

Ceci est une autre fonctionnalité Express puissante, les moteurs de template , ils vous permettent de rendre du contenu dans la page en lui passant des variables ou d’hériter d’un autre modèle pour que vos pages soient plus compactes et plus compréhensibles par les autres. L'extension du fichier est .jade pour autant que je sache que Jade a changé le nom de Pug , essentiellement le même moteur de template mais avec quelques mises à jour et modifications de base.

Installation de Pug et mise à jour du moteur de modèle Express.

Ok, pour commencer à utiliser Pug comme moteur de modèle de notre projet, nous devons exécuter:

npm install --save pug

Cela va installer Pug comme une dépendance de notre projet et l'enregistrer dans package.json . Pour l'utiliser, il faut modifier le fichier app.js :

var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

Et remplacez le moteur de ligne de visée par pug et c'est tout. Nous pouvons relancer notre projet avec npm start et nous verrons que tout fonctionne bien.

Comment AngularJS s'intègre-t-il dans tout cela?

AngularJS est un framework Javascript MVW (Model-View-Whatever) principalement utilisé pour créer une installation SPA (Simple Page Application) assez simple, vous pouvez aller sur le site AngularJS et télécharger la dernière version qui est la v1.6.4 .

Après avoir téléchargé AngularJS quand devrait copier le fichier dans notre dossier public / javascripts à l' intérieur de notre projet, une petite explication, c'est le dossier qui sert les ressources statiques de notre site, images, css, fichiers javacript, etc. Bien sûr, cela est configurable via le fichier app.js , mais nous allons rester simple. Maintenant, nous créons un fichier nommé ng-app.js , le fichier dans lequel notre application vivra, dans notre dossier public javascripts, là où vit AngularJS. Pour que AngularJS soit opérationnel, nous devons modifier le contenu de views / layout.pug comme suit:

doctype html
html(ng-app='first-app')
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body(ng-controller='indexController')
    block content

  script(type='text-javascript', src='javascripts/angular.min.js')
  script(type='text-javascript', src='javascripts/ng-app.js')

Que faisons-nous ici? Eh bien, nous incluons le noyau AngularJS et notre fichier récemment créé ng-app.js . Lorsque le modèle sera rendu, il ajoutera AngularJS, notera l'utilisation de la directive ng-app , cela dit AngularJS que c'est le nom de notre application et qu'elle devrait s'y tenir.
Ainsi, le contenu de notre ng-app.js sera:

angular.module('first-app', [])
       .controller('indexController', ['$scope', indexController]);

function indexController($scope) {
    $scope.name = 'sigfried';
}

Nous utilisons la fonctionnalité AngularJS la plus simple ici, la liaison de données bidirectionnelle , ce qui nous permet de rafraîchir instantanément le contenu de notre vue et de notre contrôleur. C'est une explication très simple, mais vous pouvez faire une recherche dans Google ou StackOverflow pour voir comment ça marche vraiment

Donc, nous avons les blocs de base de notre application AngularJS, mais il y a quelque chose que nous devons faire, nous devons mettre à jour notre page index.pug pour voir les modifications de notre application angulaire, faisons-le:

extends layout
block content
  div(ng-controller='indexController')
    h1= title
    p Welcome {{name}}
    input(type='text' ng-model='name')

Ici, nous ne faisons que lier l'entrée à notre nom de propriété défini dans la portée AngularJS de notre contrôleur:

$scope.name = 'sigfried';

Le but de ceci est que chaque fois que nous changeons le texte dans l'entrée le paragraphe ci-dessus le mettra à jour dans le {{name}}, cela s'appelle l' interpolation , encore une autre fonction AngularJS pour rendre notre contenu dans le template.

Donc, tout est paramétré, nous pouvons maintenant lancer npm start sur http: // localhost: 3000 et voir notre application express au service de la page et AngularJS gérant le front-end de l'application.