sábado, 9 de septiembre de 2017

node js,EXPRESSJS, USANDO PARTIALS Y ROUTES

Node.js® es un entorno de ejecución para JavaScript construido con el motor de JavaScript V8 de Chrome. Node.js usa un modelo de operaciones E/S sin bloqueo y orientado a eventos, que lo hace liviano y eficiente. El ecosistema de paquetes de Node.js, npm, es el ecosistema mas grande de librerías de código abierto en el mundo.


Viene con NPM, que nos permite instalar dependencias o instalar la aplicación de node js mismo,  al utilizar por ejemplo los comandos,  npm install heroku,   o por ejemplo npm install dentro del proyecto para instalar las dependencias,  otro ejemplo seria npm install express, que nos permite instalar un framework para crear aplicaciones web con un look and feel muy interesante, tambien se usa node js para instalar aplicaciones angular por ejemplo angular cli, 


también esta el archivo js,  donde podemos crear variables para todo el proyecto, generar la vista, el controlador y el modelo, 

así como generar rutas por ejemplo las rutas nos ayudan a dirección-ar al cliente para paginas que no existen y te da una pagina de error, 

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);

/// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

/// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});




module.exports = app;


como ejecutarlo?, es muy sencilllo

PS C:\node\rouxmeet> npm install
npm notice created a lockfile as package-lock.json. You should commit this file.
added 55 packages in 4.09s
PS C:\node\rouxmeet> npm start

> rouxmeet@0.0.0 start C:\node\rouxmeet
> node ./bin/www

GET / 200 14.990 ms - 207
GET /stylesheets/style.css 200 4.542 ms - 111





walmart y paypal usan node js 

















Otra parte importante es que puedes generar PARTIALS

POR EJEMPLO
EN EL ARCHIVO INDEX.EJS  ESTA HACIENDO REFERENCIAS A LOS PARTIALS QUE ES EL HEADER.EJS, FOOTER.EJS, Y MAS, QUE NOS AYUDAR A IR MANEJANDO EL CODIGO PARA DESACOPLARLO Y SEA MAS SENCILLO DE GENERAR ACTUALIZACIONES 


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');



<!DOCTYPE html>
<html>
  <head><% include partials/template/head.ejs %></head>
  <body>
    <% include partials/template/header.ejs %>
    <section class="layout">
      <div class="primary">
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, repellat, sequi, provident, numquam eum ipsam tempora nesciunt laborum suscipit ab quod iure asperiores ipsum excepturi blanditiis quibusdam corrupti aut fugiat!</div>
      </div><!-- primary -->
      <aside class="secondary">
        <div>Deleniti, quibusdam, soluta corrupti minima nisi adipisci ut sapiente praesentium delectus blanditiis ullam modi consequatur inventore consectetur a eius sed autem fugiat obcaecati impedit enim tempora ipsum officia provident iure.</div>
      </aside><!-- secondary -->
    </section><!-- layout -->
    <% include partials/template/footer.ejs %>
    <% include partials/template/jsdefaults.ejs %>
  </body>
</html>






¿Desea terminar el trabajo por lotes (S/N)? s
PS C:\node\rouxmeet> npm install
npm WARN deprecated static-favicon@1.0.2: use serve-favicon module
npm notice created a lockfile as package-lock.json. You should commit this file.
added 24 packages, removed 30 packages and updated 9 packages in 4.29s
PS C:\node\rouxmeet>
PS C:\node\rouxmeet> npm start

> rouxmeet@0.0.1 start C:\node\rouxmeet
> node ./bin/www

GET / 200 13ms - 207b
GET /stylesheets/style.css 200 17ms - 8.48kb
¿Desea terminar el trabajo por lotes (S/N)? s
PS C:\node\rouxmeet> npm start

> rouxmeet@0.0.1 start C:\node\rouxmeet
> node ./bin/www

GET / 304 11ms
GET /stylesheets/style.css 304 4ms
¿Desea terminar el trabajo por lotes (S/N)? s
PS C:\node\rouxmeet> npm start

> rouxmeet@0.0.1 start C:\node\rouxmeet
> node ./bin/www

GET / 200 60ms - 1.11kb
GET /stylesheets/style.css 200 13ms - 8.48kb
GET /javascripts/script.js 200 27ms - 2.54kb

******************************************++


AHORA, VEMOS EL ARCHIVO HEADERS.EJS

<header>
  <div class="hero">
    <section class="layout">
      <div class="branding">
        <a href="/">
          <img src="/images/misc/rouxacademymeetups.svg" alt="Roux Academy Logo">
        </a>
      </div><!-- branding -->
    </section><!-- layout -->
  </div><!-- hero -->

  <div class="navigation">
    <section class="layout">
      <ul class="nav">
        <li><a href="/"><i class="icon-home"></i> Home</a></li>
        <li><a href="/speakers"><i class="icon-user"></i> Speakers</a></li>
      </ul><!-- nav -->
    </section><!-- layout -->
  </div><!-- navigation -->

</header>














No hay comentarios:

Publicar un comentario

Blogger Widgets