How to deal with node and angular path behind of apache proxy

Escrito por aserrano. Posteado en Angular JS, Desarrollo, ExpressJS, Javascript, Node

I was setting up a server with apache and node.
Apache will redirect all requests from /api to node where an angular app should be work.

I was searching for a solution of this problem but I didn’t find it the right one.

Maybe this is not the better solution ever but It’s working for me.

The first step is prepare Apache to deal with proxy…like this.

Redirect /api /api/
 
            ProxyPass http://localhost:3100/
            ProxyPassReverse http://localhost:3100/

Apache will remove the “/api/” before requesting a page to the node server.

Como hacer dos listas ordenables, arrastrables y tirables con jquery y javascrip

Escrito por aserrano. Posteado en Javascript

Hacer esto con Jquery es bastante sencillo.

Primero haremos dos listas donde queremos tener los datos a ordenar y cuyos datos queramos pasar de una columna a otra

A estas listas desde jquery haremos que puedan ser contenedores "droppable", es decir, capaces de aceptar un drop

Asimismo las haremos "sortable", es decir que se puedan ordenar.

Ahora necesitamos los elementos "draggable" que serán los elementos <li>

Aquí el código y más abajo un ejemplo funcional:

 <script>
    $( function() {
        $(".dragli").draggable({
          appendTo : "body",
          revert : "invalid",
          helper : "original",
          start: function(event, ui) {
 
          }
          });
 
        $( "#droppable ul,#droppable2 ul" ).droppable({
            accept: ".dragli",
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            drop: function( event, ui ) {
              //$( this ).find( ".placeholder" ).remove();
              $( "<li class='dragli'></li>" ).text( ui.draggable.text() ).appendTo( this );
              ui.draggable.remove();
              }   
        }).sortable({
          items: "li:not(.placeholder)",
          sort: function() {
            $( this ).removeClass( "ui-state-default" );
          }
        });
        $("#droppable,#droppable2" ).droppable({
          accept: ".dragli",
            drop: function( event, ui ) {
              $( "<li class='dragli'></li>" ).text( ui.draggable.text() ).appendTo( $( this ).find( ".placeholder" ) );
              ui.draggable.remove();
              }
         });  
    });
  </script>

Código html:

<style>li.dragli {
  background: #B7D6E7;
  list-style-type: none;
  margin: 0 0;
  padding: 5px 5px;
  border: 1px solid black;
  border-color: #006600;
 
}
</style>
<div id="droppable" class="ui-widget-header" style="width: 300px; height:200px;background: #a0a0a0;" >
  <ul class="col-sort"><li class="placeholder">Arrastra tus listas aquí</li>
<li class="dragli">otra lista</li>
</ul>
  </div>
 
  <div id="droppable2" style="width: 300px; height:200px;background: #FFa0a0;" >
  <ul class="col-sort">
   <li class="placeholder">Arrastra tus listas aquí</li>
   <li class="dragli">hola</li>
   <li class="dragli">adios</li>
   <li class="dragli">pasa con tu rollo</li>
  </ul>
  </div>
  • Arrastra tus listas aquí
  • otra lista
  • Arrastra tus listas aquí
  • hola
  • adios
  • pasa con tu rollo

Nota legal

(C) Antonio Serrano 2012