Instalar Angular Cli

 

He aquí los pasos para configurar Node e instalar Angular Cli.

1. Abrir Chrome, dar F12 para abrir consola.

2. En la consola escribir:

btoa('ID:PASSWD');

3. Copiar la cadena resultante (sin comillas).

4. Abrir una terminal (CMD, etc.) e ingresar los siguientes comandos:

npm config set progress true
npm config set registry http://url_nexus
npm config set strict-ssl false
npm config set always-auth true
npm config set _auth CADENA_RESULTANTE

5. Teclear el siguiente comando para instalar Angular Cli.

npm install -g @angular/cli

Nota: en caso de no tener chrome usar el servicio de https://www.base64encode.net/javascript-btoa

Ionic framework

Ionic es un framework que permite crear aplicaciones móviles híbridas. Éstas aplicaciones son las que emplean tecnologías como HTML, CSS y Javascript. Una aplicación móvil híbrida se despliega dentro de un contenedor como Cordova. Contrario a las aplicaciones nativas no emplea ninún lenguaje propio del dispositivo.

Instalando Ionic Framework

$ npm i -g ionic

Comprobamos su instalación:

$ ionic --version

Creando una aplicación.

Creamos una aplicación en blanco.

$ ionic start miApp blank --type=angular

Nos ubicamos en la carpeta creada.

$ cd miApp 

 Arrancamos el servidor:

$ ionic serve

Se abrirá el navegador en la dirección http://localhost:8100

Creamos una página.

$ ionic generate page pagina-uno

Ahora editamos home.page.html y agregamos un botón.

<div class="ion-padding">
    <p>Está la página de inicio.</p>
    <ion-button class="primary"  (click)="launchPaginaUnoPage()" >Ir a la página uno</ion-button>
  </div>

Editamos home.page.ts añadiendo un método para lanzar la página pagina-uno.

import { Component } from '@angular/core';
import { NavController } from '@ionic/angular';
import { PaginaUnoPage } from '../pagina-uno/pagina-uno.page';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(public navCtrl: NavController,
   private router: Router) {}

  launchPaginaUnoPage(){
   console.log('Voy a la página uno')
   this.router.navigate(['/pagina-uno'])
  }

}

Agregamos un bóton de regreso a home en pagina-uno.page.html

<div class="ion-padding">
    <p>Está es nuestra primera página.</p>
    <ion-button class="primary" (click)="launchHomePage()" >Ir a home</ion-button >
  </div>

Creamos el método para regresar a home en pagina-uno.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-pagina-uno',
  templateUrl: './pagina-uno.page.html',
  styleUrls: ['./pagina-uno.page.scss'],
})
export class PaginaUnoPage implements OnInit {

  constructor(private router:Router) { }

  ngOnInit() {
  }

  public launchHomePage():void{
    console.log('De regreso a home');
   this.router.navigate([''])
  }


}

Arrancamos el servidor.

$ ionic serve

Observamos el resultado:

Damos click en Ir a la página uno.

 Tenemos hecha nuestra primera aplicación con Ionic.

AngularJS: Directivas y expresiones

En este post hablaremos de directivas en AngularJS. Pero antes que nada debemos instalar un sencillo y muy útil servidor:

$ npm install -g http-server 

Para ponerlo activo tecleamos desde una terminal:

$ http-server carpetaProyecto/

Abrimos nuestro navegador en http://localhost:8080/ para cerrar tecleamos en la terminal Ctrl + C.

Como vimos en el anterior post AngularJS posee etiquetas especiales llamadas directivas.Éstas directivas son atributos que se agregan a los elementos HTML, por lo regular comienzan con ng-.

Directivas comunes:

• ng-app: para especificar una aplicación.
• ng-controller: para especificar un controlador.
• ng-model: asocia el valor de una variable con el elemento HTML.
• ng-click: para soltar o ejecutar un evento.
• ng-bind: para enlazar un valor del scope con un elemento HTML sin necesidad de {{ }}

Ejemplo. Creamos un módulo y un controlador.

app.js

/*Módulo 'miApp'*/
var app = angular.module('miApp', []);

/*Controlador 'miControlador'*/
app.controller('miControlador', function($scope) {});

En HTML:

view.html

<!-- Definimos la app -->
<html ng-app='miApp'>

<!-- Definimos el controlador -->
<body ng-controller='miControlador'>
   <!-- contenido -->
</body>

¿Cómo defino las expresiones?
Existen dos formas para definir una expresión.

 Primera forma:

{{ expresion }}

Segunda forma:

ng-bind="expresion".

Ejemplo. Algunas expresiones:

{{ 34 + 32 }}

{{ cadena }}

{{ edad>18? "Eres mayor de edad" : "Eres menor de edad" }}

Ejemplo. Una página simple usando AngularJS.

<html ng-app="miApp">

<script src="js/angular.min.js"></script>


<body ng-controller="miControlador">
<h1>{{ titulo }}</h1>

<script>
/*Módulo 'miApp'*/
var app = angular.module('miApp', []);

/*Controlador 'miControlador'*/
app.controller('miControlador', function($scope) {
 
 //$scope es la variable principal
 $scope.titulo ="Codemonkey Junior";

});

</script>

</body>
</html>

Es todo por hoy.

What is AngularJS ? ... What do you eat this with?

AngularJS es un framework pensado para crear aplicaciones SPA (aplicaciones de una sola página).  Se puede combinar con NodeJS, MongoDB y Express JS. Formando así el MEAN (MongoDB + Express JS + Angular + Node JS).

 ¿Por qué usarlo?

• Es bueno usarlo en desarrollos web dinámicos pues ofrece herramientas para el acceso a los datos y no sólo de manipulación del DOM de la página.
• Emplea el Modelo Vista Vista-Modelo.
• Mejora el rendimiento y las pruebas.
• ¿Necesito saber DOM, Javascript, jQuery? Mejor enfócate  en el rendimiento de la aplicación.
• Etc.

¿En serio no necesito saber Javascript y/o jQuery?

Sí, debes tener bases de Javascript y no, no es necesario saber jQuery. AngularJS se enfoca más en el rendimiento y las pruebas y no se preocupa mucho por la manipulación del DOM.

¿Cómo trabaja AngularJS?

AngularJS permite ampliar el vocabulario HTML, pues el HTML puro es insuficiente para ofrecer contenido dinámico.

Modelo + Plantilla   ------- { AngularJS } -----  HTML

Algunos conceptos de AngularJS. 

Directiva: son atributos que se agregan a los elementos HTML, por lo regular comienzan con ng-.
Módulo: podemos verlo como un paquete en java.
Controlador: es el nombre de una función que se ejecuta cuando se carga el código html que tiene la directiva ng-controller.
$scope: es la variable de AngularJS donde se guarda toda la información de Javascript de la página.
Angular sólo muestra en el HTML mediante {{ }} el valor de las variables definidas en $scope, no de todas las variables.
$rootScope: es el scope del que heredan los demás scopes, una variable o función agregada a él es accesible por todos los controladores.

Directivas. 
ng-model: asocia el valor de una variable con el elemento HTML.
ng-show: permite que un elemento de la página se haga visible.
ng-repeat: hace un ciclo sobre un objeto.
ng-bind: enlaza un valor del scope con un elemento html sin necesidad de {{ }}

Módulos. 
Un módulo como un paquete en Java, aquí se agregarán artefactos que podemos usar en otros lados.

Los Artefactos que pueden ir dentro de un módulo son:

• Controladores. 
• Directivas. 
• Filtros. 
• Constantes. 
• Config. 
• Run. 
• Etc. 

Un módulo puede depender de otros, para eso se usan los corchetes [].

Servicio $http.
Un servicio no tiene relación directa con la página, más bien, es un objeto Javascript que nos permite obtener información. El servicio $http nos permite hacer peticiones AJAX a un servidor. Ejemplo, ocuparlo para hacer peticiones Webservices enviándole algunos parámetros y obteniendo los datos solicitados. Un Webservice podría hacer la función de controlador (hablando en términos de Java).

Servicio $routeProvider.
El servicio tiene dos métodos:

1. when: Asocia una ruta con una página HTML. 
2. otherwise: Indica a qué ruta debemos redirigirnos cuando hay una ruta desconocida. 

El código de la página se agregará dónde coloquemos el siguiente elemento. El servicio $location ayuda a definir el path al que queremos ir. Para que funcione, se debe agregar a nuestro módulo el módulo ng-route con su respectivo archivo js.