Introduccion a Angular.JS

Christian Gill / @gillchristian

Contenido

  1. Intro
  2. Patron MVW
  3. Data binding
  4. Modulos
  5. Componentes del framework
  6. Dependency Injection
  7. Ejemplos practicos
  8. Recursos

Model View Que?

 

Modelo

Contenido, informacion (server, DB)

Vista

Interface donde se presenta la informacion (modelo)

Whatever

Relaciona o une el modelo con la vista

  • Controller
  • ViewModel
  • Presenter

Lo que sea significa "lo que sea que te funcione mejor".

- Igor Minar, Angular team

Data binding

Data-binding es la sincronización automática de datos entre los componentes del modelo y la vista.

Módulos

  • Un modulo define una aplicaccion.
  • Contiene las diferentes partes de la aplicacion (controller, directives, services, etc.), estas partes no pueden ser definidas fuera de un modulo.

Creacion vs Referencia

// --- app.js ---
(function(){
  angular.module('appModule', []); // creacion
})();

// --- app.controller.js ---
(function(){
  angular.module('appModule'); // referencia
})();


// --- evitar ---

// --- app.js ---
var app = angular.module('appModule', []); // creacion

// --- app.controller.js ---
app.module('appModule'); // referencia

Run Config

  • Config: configurar los providers antes de que sean creados.
  • Run: el código que debe ejecutar para poner en marcha la aplicación. Ejecuta después de que todos los servicios se han configurado y el inyector se ha creado.

Orden de ejecucion

  1. config()
  2. run()
  3. controller()

Services:

  • ​Provider
  • Service
  • Factory
  • Constant
  • Value

Componentes

Objectos especializados:

  • Creados via Factory
    • Animation
    • Directive
    • Filter
  • Creados via Constructor
    • Controller

Controller

Es definido por un constructor y usado para aumentar el Scope:

 

  • Set up del stado inicial del $scope
  • Darle nuevo comportamiento al $scope

Es un service construido por una funcion que puede recibir como parametros a otros services, las instancias de este service son el objeto que la funcion devuelve.

 

Uso:

  • Manejo de la logica de la applicacion
  • Comunicacion entre Controllers

Factory

Permiten expandir el DOM agregando nuevas funcionalidades.

 

Todo el manejo del DOM deberia hacerce en las directives.

Directives

Inyeccion de dependencias

Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies.

 

El objeto recibe las dependencias, en lugar de crearlas. Se trata de la eliminación de las dependencias no modificables (hardcodeadas), por lo que es posible cambiarlas cuando sea necesario.

  1. Creación separada del consumo.
  2. Sólo es necesario saber como usar la dependencia.
  3. Permiter cambiarlas facilmente cuando se necesita.
  4. Desarrollo concurrente/independiente de la dependencia y la entidad dependiente.
  5. Permitir la inyección mocks para testeo.

Por que?

Se puede usar tanto al definir componentes como en los bloques run y config de un modulo.

Donde?

Services, directives, filters, y animations: se les inyecta services y values.

angular.module('myModule', [])
.factory('serviceId', ['depService', function(depService) {
  // ...
}])
.directive('directiveName', ['depService', function(depService) {
  // ...
}])
.filter('filterName', ['depService', function(depService) {
  // ...
}]);

Controllers, se les inyecta services y values.

someModule.controller('MyController', ['$scope', 'dep1', 'dep2', 
    function($scope, dep1, dep2) {
      ...
      $scope.aMethod = function() {
        ...
      }
      ...
    }]);

Al metodo run se le inyecta services, values y constants. Pero no providers.

Al metodo config se le inyecta providers y constants. Pero no services ni values.

angular.module('myModule', [])
.config(['depProvider', function(depProvider) {
  // ...
}])
.run(['depService', function(depService) {
  // ...
}]);

Modulos como contenedor de dependencias

angular.module('myModule', ['myModule.services', 'myModule.controllers']);

angular.module('myModule.services', [])
  .services('productsService', productsService);


angular.module('myModule.controllers', ['productsService'])
  .controller('ProductController' ['productsService',
    function(productsService) {

    }
  ]);

Ejemplo: CRUD simple

Recursos

Angular JS

By Christian Gill

Angular JS

Introduccion a Angular.JS

  • 1,690