DokuWiki bwnjsejs

bwnjsejs:adding_partials

Anonymous (anonymous@undisclosed.example.com) — 2016-05-08T17:05:10+00:00

<- Using templatesUsing locals and conditional templates -> Partials default.ejs <% include partials/head.ejs %>

<%= title %>

<%= content %>

/partials/head.ejs <%= title %>

bwnjsejs:adding_speakers_to_the_homepage

Anonymous (anonymous@undisclosed.example.com) — 2016-06-13T11:44:55+00:00

<- Creating additional routesFinishing our speakers' routes and views -> router.get('/', function(req, res) { var mes_donnees = []; mes_donnees = appdata.some.data; res.render('index', { title: 'Home', data = mes_donnees; }); });

bwnjsejs:adding_static_content

Anonymous (anonymous@undisclosed.example.com) — 2016-06-12T17:04:55+00:00

<- Creating our header templateImporting our data -> -> /views/partial/content/ (peut être un bloc article quelquonque) <% include partials/template/ %>

bwnjsejs:building_a_hello_express_application

Anonymous (anonymous@undisclosed.example.com) — 2016-05-08T14:58:24+00:00

<- Installing Express.jsCreating routes -> var express = require('express'); var app = express(); app.get('/', function(req, res) { res.send('

😝

Hello !

') }) var server = app.listen(3000, function() { console.log('Listening on port 3000.'); }) ->

bwnjsejs:building_a_hello_node.js_application

Anonymous (anonymous@undisclosed.example.com) — 2016-05-08T13:34:12+00:00

<- Installing Node.jsGetting to know the node package manager -> * build-in modules * modules installés // on importe le module http var http = require('http'); // on créé le serveur // + on passe en argument une fonction / fonction anonyme comme callback pour les requêtes // avec elle-même comme argument request et response var serveur = http.createServer(function(request, response) { // contenu du callback // un serveur envoie un header console.log("Requête"); response.writeHead…

bwnjsejs:creating_additional_routes

Anonymous (anonymous@undisclosed.example.com) — 2016-06-12T18:40:04+00:00

<- Passing custom data through routesAdding speakers to the homepage -> -> routes/index.js

bwnjsejs:creating_our_header_template

Anonymous (anonymous@undisclosed.example.com) — 2016-06-12T16:59:40+00:00

<- Preparing our site structureAdding static content -> ...

bwnjsejs:creating_routes

Anonymous (anonymous@undisclosed.example.com) — 2016-05-08T15:23:50+00:00

<- Building a Hello Express applicationUsing templates -> var express = require('express'); var app = express(); app.get('/', function(req, res) { res.send('

😝

Hello !

') }) app.get('/fr', function(req, res) { res.send('

😝

Bonjour !

') }) app.get('/who/:name?', function(req, res) { var name = req.params.name; res.send('

😝

Hello ' + name + ' !

') }) app.get('/who/:name?/:title', function(req, res) { var name = req.params.name; var title = re…

bwnjsejs:finishing_our_speakers_routes_and_views

Anonymous (anonymous@undisclosed.example.com) — 2016-06-13T11:56:56+00:00

<- Adding speakers to the homepagePublishing our application -> ...

bwnjsejs:getting_to_know_the_node_package_manager

Anonymous (anonymous@undisclosed.example.com) — 2016-05-08T14:04:23+00:00

<- Building a Hello Node.js applicationWhat is Express.js -> Node Packet Manager -> npmjs.com init npm init // aide à la création du fichier JSON package.json name: nom de l'application version: description: entry point: l'application runnée par défaut test command: git repository: keywords: author: license:

bwnjsejs:importing_our_data

Anonymous (anonymous@undisclosed.example.com) — 2016-06-12T18:04:44+00:00

<- Adding static contentUsing JavaScript loops -> Merger views et données. Importer du JSON dans une variable : var data = require('/path/to/data.json'); // ou app.locals.appdata = require('/path/to/data.json'); <%= appdata.my.data.from.json %>

bwnjsejs:index

Anonymous (anonymous@undisclosed.example.com) — 2016-05-07T21:01:29+00:00

Building a Website with Node.js and Express.js - Introduction * Welcome * What you should know * Using the exercise files - Getting Started with Node.js * What is Node.js * Installing Node.js * Building a Hello Node.js application * Getting to know the node package manager - Using Express.js * What is Express.js * Installing Express.js * Building a Hello Express application * Creating routes * Using templates * Adding partials * Using locals and conditional temp…

bwnjsejs:installing_express.js

Anonymous (anonymous@undisclosed.example.com) — 2016-05-08T14:25:13+00:00

<- What is Express.jsBuilding a Hello Express application -> Installer express.js Installer globalement et localement. npm install -g express express --version npm install express --save

bwnjsejs:installing_node.js

Anonymous (anonymous@undisclosed.example.com) — 2016-05-08T13:12:44+00:00

<- What is Node.jsBuilding a Hello Node.js application -> Tester sa présence : node --version os x -> nodejs.org linux voir installer_nodejs_sous_linux

bwnjsejs:modularizing_our_routes

Anonymous (anonymous@undisclosed.example.com) — 2016-05-08T20:28:57+00:00

<- Using locals and conditional templatesUsing the Express Generator -> index.js var express = require('express'); var app = express(); var routes = require('./routes'); app.set('view engine', 'ejs'); app.locals.pagetitle = 'Awesome Website'; app.get('/', routes.index); app.get('/about', routes.about); // si on a autre chose app.get('*', function (req, res) { console.log('Page inconnue demandée'); res.render('default', { title: '😭', content: '😭😭😭' }); }); var server = app.listen(3000,…

bwnjsejs:next_steps

Anonymous (anonymous@undisclosed.example.com) — 2016-06-13T12:36:02+00:00

<- Publishing our application -> Node for front-end developers -> O'Reilly Node.js in action -> Manning Publication co

bwnjsejs:passing_custom_data_through_routes

Anonymous (anonymous@undisclosed.example.com) — 2016-06-12T18:26:39+00:00

<- Using JavaScript loopsCreating additional routes -> app.locals(.appdata) non disponible dans routes/ //routes/index.js (...) var appdata = require('path/to/data.json'); (html) <% if (some.data.length > 0 { %> <% for (i=0; i

some.data[i] <% } %> <% } %>

bwnjsejs:preparing_our_site_structure

Anonymous (anonymous@undisclosed.example.com) — 2016-06-12T16:48:03+00:00

<- Understanding our dataCreating our header template -> /views/partial/content/ /template/head.ejs header.ejs footer.ejs jsdefault.ejs // index.ejs (...) <% include partials/template/head.ejs %> (...)

bwnjsejs:publishing_our_application

Anonymous (anonymous@undisclosed.example.com) — 2016-06-13T12:33:26+00:00

<- Finishing our speakers' routes and viewsNext steps -> -> heroku.com -> possibilité de créer le dépôt git sur heroku.com et de faire une copie locale -> Procfile // commande pour heroku web: node bin/www git init git add. git commit -m “message” heroku login keroku git:remote -a

bwnjsejs:understanding_our_data

Anonymous (anonymous@undisclosed.example.com) — 2016-06-12T16:30:43+00:00

<- Working with real assetsPreparing our site structure -> ->

bwnjsejs:using_javascript_loops

Anonymous (anonymous@undisclosed.example.com) — 2016-06-12T18:16:43+00:00

<- Importing our dataPassing custom data through routes -> <% appdata.some.data.forEach(function(item) { %>

<% item.name %>

<% }); %>

bwnjsejs:using_locals_and_conditional_templates

Anonymous (anonymous@undisclosed.example.com) — 2016-05-08T17:59:09+00:00

<- Adding partialsModularizing our routes -> Locals : informations que l'on veut retrouver dans toutes les pages. index.js var express = require('express'); var app = express(); app.set('view engine', 'ejs'); app.locals.pagetitle = "Awesome Website"; app.get('/', function(req, res) { console.log('/ requested'); res.render('default', { title: 'Hello', content: 'Heyyy salut-donc !', users: ['Mireille', 'José', 'Marcel', 'Odette', 'Lucien', 'Félicienne'] }); }) // si on a autre chose app…

bwnjsejs:using_templates

Anonymous (anonymous@undisclosed.example.com) — 2016-05-08T16:03:13+00:00

<- Creating routesAdding partials -> Templating Par défaut jade. On utilisera ici EJS. npm install ejs --save Par défaut les templates sont à mettre dans un dossier views. Si on omet le tag = -> <%= js %> on peut écrire du javascript normal. index.js var express = require('express'); var app = express(); app.set('view engine', 'ejs'); // si par exemple dossier vues au lieu de views // app.set('views', __dirname + '/vues'); app.get('/', function(req, res) { console.log('/ requested');…

bwnjsejs:using_the_express_generator

Anonymous (anonymous@undisclosed.example.com) — 2016-06-12T16:09:47+00:00

<- Modularizing our routesWorking with real assets -> * s'assurer qu'on est dans le bon dossier et que le générateur express est installé * -> sudo npm install -g express-generator * express -e * la dernière commande donne des instructions pour installer les dépendances et lancer l'application :

bwnjsejs:what_is_express.js

Anonymous (anonymous@undisclosed.example.com) — 2016-05-08T14:12:13+00:00

<- Getting to know the node package managerInstalling Express.js -> Qu'est-ce qu'express ? * un framework Node.js * fournit une structure à Node.js * grâce à un langage de templating (templating language/engine) * jade (défaut) * EJS (utilisé ici) * fourni un mécanisme de routage * ce qui est utilisé pour les single page applications

bwnjsejs:what_is_node.js

Anonymous (anonymous@undisclosed.example.com) — 2016-05-08T13:04:06+00:00

<- Using the exercise filesInstalling Node.js -> Features clés de nodejs * event driven * non-blocking * handles two-way connections * really good at real-time applications Conséquence du non-blocking : peut gérer de nombreuses connexions simultanées. Très bien pour des applis ou le serveur à besoin d'envoyer des données au client.

bwnjsejs:working_with_real_assets

Anonymous (anonymous@undisclosed.example.com) — 2016-06-12T16:24:34+00:00

<- Using the Express GeneratorUnderstanding our data -> ...