Integrantes:

Jose Aguilar Quesada

  Kevin Hernández Rostrán

  Julián Méndez Oconitrillo

  Jasson Moya Álvarez

 AngularJS es un framework MVC de JavaScript para el Desarrollo Web Front End que permite crear aplicaciones SPA (Single-Page Applications).

Instalación de dependencias locales

Instalación de dependencias locales

Node.js

  1. Descargar el instalador de Node.js.
  2. Correr el instalador.
  3. Aceptar los términos de instalación.
  4. Reiniciar la computadora.

GIT

  1. Descargar el instalador de Git.
  2. Correr el instalador.
  3. Aceptar los términos de instalación.
  4. Importante (para usuarios de windows) a la hora de configurar las variables de entorno elegir la segunda opción (run git from the windows command prompt).

Instalación de dependencias locales

Bower

  1. Iniciar Node.js command prompt.
  2. Ingresar el comando  npm install
  3. Ejecutar el comando npm install -g bower

AngularJS

  1. Cambiar la dirección del command prompt a la carpeta del proyecto con el comando cd seguido de la dirección del proyecto
  2. Ejecutar el comando bower install angular
  3. Todas las dependencias instaladas se encuentran dentro de la carpeta bower_components

Bootstrap (opcional)

  1. Dentro de la carpeta del proyecto en Node.js command prompt ejecutar el comando bower install bootstrap 

Instalación de dependencias locales

NPM Local-Web-Server

  1. Iniciar Node.js command prompt.
  2. Ejecutar el comando npm install -g local-web-server
  3. Dentro de la carpeta del proyecto ejecutar el comando ws --p 9000

Comando web Server

Definir puerto

Número del puerto

Plantilla básica de AngularJS

En un archivo llamado index.html ingresar el código del siguiente link:

•AngularJS Template con dependencias locales

•AngularJS Template con CDN 

Módulos

Módulos

  • Son contenedores de diferentes partes de la aplicación.
  • Sirven para desacoplar el código.
  • Pueden agrupar elementos con las mismas características, funcionalidad, por componente reusable…
  • Se declaran de la siguiente manera:
var app = angular.module('Nombre_del_modulo', []);

Dependencias

  • Es la forma en que a una clase se le suministra un objeto para que utilice sus métodos.
  • Pueden ser funcionalidades que el mismo AngularJS nos brinda o alguna funcionalidad que nosotros mismos desarrollemos.
  • Se utilizan de la siguiente manera:
var app = angular.module('Nombre_del_modulo', ['ngRoute','miDependencia1','miDependencia2']);

Declaración o “enlace” en el HTML de la dependencias

Para asociar el módulo declarado a nuestra vista, solo basta con usar la directiva ng-app de la siguiente manera:

<!DOCTYPE html>
<html ng-app="Nombre_del_Modulo">
    <head>
        <title>Introducción a Angular</title>
        <!-- ==========Bootstrap========== -->
        <!-- Compilación minimizada del CSS de Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <!-- Script de Bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <!-- jQuery (necesario para Script de Bootstrap) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <!-- ==========Angular========== -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    </head>
    <body>
    </body>
</html>

Controladores

Controladores

  • Son objetos que permiten desarrollar la lógica de la aplicación, enlaza el ámbito ( $scope ), con la vista y permite tener un control total de los datos.
  • Los controladores se enlazan a la vista ( html ) mediante la directive ng-controller.
  • Todo controlador tiene un $scope o ámbito asociado inicialmente.
  • Se declara de la siguiente manera:
var app = angular.module('Nombre_del_modulo', []);
app.controller('mainController', ['$scope', function($scope){
    //contenido
}]);

Declaración o “enlace” en el HTML de los controladores

  • Se debe usar la directiva ng-controller para asociar el controlador a la vista.
  • El controlador debe ir en la etiqueta de contenido que se desea trabajar.
<body>
    <div ng-controller="mainController">
        <h1>Ejemplo AngularJS para IC-4301</h1>
    </div>
</body>

Declaración de contenido en el $scope

  • Desde el ámbito donde trabaja el controlador, se tiene un $scope que  permite tener el control total de los datos.
  • A continuación un ejemplo de como se declara un dato dentro del $scope  y como se muestran los datos en la vista. 
<body>
    <div ng-controller="mainController">
        <h1>Datos almacenados en el scope: {{datos}}</h1>
    </div>
</body>

app.controller('mainController', ['$scope', function($scope){
    $scope.datos = "Contenido de $scope.datos";
}]);

Ejemplo de Controlador

Se encuentra dentro del repositorio AngularJS-IC4301, en la carpeta Ejemplo.

Directivas

  • Son objetos que introducen nuevas sintaxis, o marcadores de determinado DOM para agregarle comportamientos y/o elementos.
  • Algunas de las directivas más comunes de AngularJS son ng-model , ng-repeat , ng-show , que ya vimos en el ejemplo Preguntas. Cada una añade una funcionalidad extra a los elementos del DOM.
  • Las predeterminadas, se utilizan de la siguiente manera:

Directivas

<button ng-click="responder()">Responder</button>
  • Al usar la directiva ng-click estamos agregando la diciendo qué función deberá llamarse al hacer click sobre ese espacio.
  • ng-repeat: Repite el contenido del tag con respecto a los elementos de una lista. Es especialmente útil al obtener información cuya extensión se desconoce.
  • ng-click: Define la función a ejecutar declarada en el scope, en el instante en que se da click en el elemento o tag en que se usa.
  • ng-init: Se llama  en el cuerpo o el contenedor  principal de la vista, es el encargado de ejecutar una determinada función en el momento en que se carga la página.
  • ng-show: Esta funcionalidad se coloca en cualquiera de los elementos visibles del html y responde a una función que indica si muestra el elemento (true) o lo esconde (false).

Aplicación de directivas

En el ejemplo de Preguntas, se podían ver ejemplos de directivas:

  • AngularJS permite declarar nuevas directivas para utilizarlas en las aplicaciones. En combinación con los controladores y servicios, permite cambiar por completo los elementos de una página, o agregar/quitar a los ya definidos, como se ha mostrado anteriormente. 

Directivas personalizadas

En el ejemplo de Preguntas, se podían ver ejemplos de directivas:

  • Es posible declararlo de 4 maneras:
  • Nuevo elemento HTML (<date-picker></date-picker>).
  • Un atributo de un elemento (<input type="text" date-picker/>).
  • Una clase (<input type="text" class="date-picker"/>).
  • Un comentario (<!--directive:date-picker-->).
  • La siguiente directiva agrega un tag con “Hello World!” a la página

Directivas personalizadas

  • Nótese como lo que se agregará a la página se define en un atributo de tipo template. Es posible asignar a ese atributo una página con formato pagina.tmp.html para organizar distintas páginas en carpetas. 

var app = angular.module('myApp', []);

app.directive('helloWorld',function(){
    return {
        restrict: 'AE', // E = Elemento, A = Atributo, C = Clase, M = Comentario
        replace: true,
        template: ''
    };
});
  • Como hemos visto, AngularJS explícitamente utiliza el patrón MVC para trabajar las aplicaciones: Se utilizan controles para adjuntar las vistas (intefaces) con los modelos (lógica).

AngularJS utiliza Patrones de Desarrollo de Software

  • En conjunto, la programación usando AngularJS involucra otros patrones de programación como fábricas, estrategias, singletons, entre otros.  

Servicios

Servicios

  • Los servicios en AngularJS se usan para crear modelos de la información que luego se implementarán en las vistas.
  • Los servicios son singleton, por lo que si se utilizan en otros controladores, se estará utilizando la misma instancia para todos.
  • La información guardada en un servicio abarca cualquier función o dato que se quiera.
  • Se inyectan en un controlador de la siguiente manera: 
app.controller('pruebaServicioCtrl', ['$scope', 'servicioProvider', function($scope, servicioProvider) {
    $scope.DatosDelServicio = servicioProvider.datosServicio;
}]);

Servicio:Provider

  • Es el más complicado.
  • Requiere un método especial llamado $get para poder inyectarlo en un controlador. Este método de hecho, es lo único que se va a inyectar. El resto del código solamente va a estar disponible dentro del servicio mismo.
  • Su característica principal es el poder configurarlo. Esto sirve prioritariamente para cambiar variables o funciones que estén dentro del método $get.
  • El provider también puede inyectar desde su constructor, pero solamente otros providers, y constantes. Para el resto, se podría usar el método $get, teniendo en cuenta que éste no puede inyectar otros providers. 

Ejemplo Provider

•Es importante notar que en la configuración, el parámetro debe tener el nombre del servicio más la palabra Provider 

app.provider('servicioProv', function() {
  var paraConfigurar = "Por configurar";
  return {
    setVariable: function(newVal) {
      paraConfigurar = newVal;
    },
    $get: function() {
      function getVariable() {
        return paraConfigurar;
      }
      return {
        OtraVariable: "Esta se puede acceder sin función de por medio",
        getVariable: getVariable //Acceso a la función
      };
    }
  };
});
app.config(function(servicioProvProvider) {
  fooProvider.setPrivate('New value from config');
});

Servicio:Factory

  • Es mucho más simple que el provider.
  • Su uso es más natural, ya que solamente guarda información que se inyectará en los controladores.
  • Internamente, el factory es un provider que tiene solamente la función $get, por lo que no se puede configurar.
  • El Factory puede almacenar de todo, menos providers.
  • Puede ser inyectado en cualquier lado, menos en constructores de providers, y en funciones de configuración.

Ejemplo de Factory

Se tiene la misma función que antes, pero en un factory.

También, se pueden hacer factories que reciban un parámetro.

app.factory('servicioFact', function() {
  var variableCualquiera = "Variable";
  function getVariable() {
    return variableCualquiera;
  }

  return {
    OtraVariable: "Esta se puede acceder sin función de por medio",
    getVariable: getVariable //Acceso a la función
  };
});

app.factory('servicioFact2', function(parametro) {
  return parametro / 10;
});

Servicio: Value

  • Se utiliza cuando se quiere solamente almacenar un valor u objeto.
  • Es muy simple, y por debajo, es un Factory.
  • Aplican las mismas reglas de inyección que el Factory: No se puede inyectar en un constructor de provider, ni en una configuración. 
app.value('servicioVal', 'Esta es una cadena que se retornará cuando se llame al servicio en el controler');

Ejemplo de value

Servicio: Service

  • Muy parecido al Factory, con la diferencia de que el Factory usa una función que se llama cuando se crea, o sea, tiene un “return algo”. En cambio, el service crea una instancia de sí misma y la devuelve. 
  • Por debajo, el service es un Factory que devuelve una llamada a una función externa. 

 

Ejemplo de Service

Se tiene la misma función que antes, pero en un service.

Lo que realmente se está haciendo por dentro del ejemplo de arriba.

Otra forma de usar el service.

app.service('servicioServ', function() {
  var variableCualquiera = "Variable";
  this.OtraVariable = "Esta se puede acceder sin función de por medio";
  this.getVariable = function() {
    return variableCualquiera;
  };
});

app.factory('servicioFact', function() {
  return new funcionParaService();
});

function funcionParaService() {
  var variableCualquiera = "Variable";
  this.OtraVariable = "Esta se puede acceder sin función de por medio";
  this.getVariable = function() {
    return variableCualquiera;
  };
}

app.service('servicioServ2', funcionParaService);

Servicio: Constant

Trabaja parecido al servicio Value, con la diferencia de que se puede inyectar en cualquier lado, lo cual incluye constructores de provider y funciones de configuración. 

Ejemplo de constant

app.constant('servicioConst', {
  variable1: true,
  variable2: "Default config2"
  variable3: 45;
});

Esas variables podrían ser cambiadas en un config.

 

Alejos, L. F. (5 de Enero de 2015). Frontend Labs. Obtenido de http://frontendlabs.io/2264--modulos-y-controladores-en-angularjs

Google ©2010-2015. (s.f.). AngularJS. Obtenido de https://angularjs.org/

Hooks, J. (s.f.). Egghead. Obtenido de https://egghead.io/articles/an-introduction-to-the-angularjs-directive-part-1

israel965. (4 de Julio de 2013). Unodepiedra. Obtenido de http://uno-de-piera.com/consumir-datos-con-factorias-y-servicios-en-angularjs/

Joyent, Inc. (s.f.). NodeJS. Obtenido de https://nodejs.org/

Marín, A. V. (24 de Abril de 2014). Alvaro Veliz. Obtenido de http://alvaroveliz.cl/blog/tutorial-de-angularjs-3

Otto, M., & jacob. (s.f.). Bootstrap. Obtenido de http://getbootstrap.com/

Panda, S. (14 de Enero de 2014). sitepoint. Obtenido de http://www.sitepoint.com/practical-guide-angularjs-directives/

Rodriguez, J. (12 de Agosto de 2013). Angular-Tips. Obtenido de http://www.angular-tips.com/blog/2013/08/understanding-service-types/

Software Freedom Conservancy. (s.f.). GIT. Obtenido de http://git-scm.com/

Twitter Team. (s.f.). Bower. Obtenido de http://bower.io/

 

Referencias

Made with Slides.com