jueves, 25 de junio de 2020

Paquete angular

Paquete angular

Sirve para desarrollar aplicaciones front-end con nodeJS.

Instalamos el paquete browserify:

npm install –g browserify

Instalamos la librería de angular
npm install angular

 Insertamos el siguiente codigo en el package.json:
"scripts": {
    "browser": " browserify miScript.js -o         viewsfiles/javascripts/ miSriptNavegador.js"

}

Creamos un archivo llamado miScript.js:
 
var angular = require('angular');
(function () {
      var app = angular.module('prueba', []);
      app.controller('controlador', function () {
           this.listaNombres =['juan','pedro','luis','maria'];
           this.getMostrar = function () {
                return true;
               };
          });
})();



Ejecutamos el comando siguiente para adaptar el modulo a nodeJS:
npm run browser

Creamos un archivo llamado index.html:
 
<html ng-app="prueba">
<head>
    <meta http-equiv="Content-type" content="text/html">
    <title>Ejemplo angular</title>
    <script src="./viewsfiles/javascripts/miSriptNavegador.js"></script>
</head>
<body>
    <div ng-controller="controlador as c">
        <div ng-show="c.getMostrar()">
            <div ng-repeat="dato in c.listaNombres">
               {{dato}}
            </div>
        </div>
    </div>
</body>


Tenemos:
  • miSriptNavegador.js es el que importamos en el html.
  • ng-app donde podemos el nombre del modulo (prueba)
  • ng-controler donde ponemos el nombre del controlador y lo renombramos como c.
  • ng-show nos muestra el div si se cumple la condición de mostrar.
  • ng-repeat nos muestra los datos de la lista de nombres.




No hay comentarios:

Publicar un comentario