Archivo de la etiqueta: angularjs

Angular Logo

$Http & $q AngularJs

Es poco probable encontrar hoy dia una aplicación web hecha en cualquier framework que no realice alguna petición ajax, debido a esto y al gran uso de AngularJS este tutorial sera de estos 2 AngluarJS service $http y $q.

$http

Servicio que nos proporciona todo un set de metodos para realiza nuestras peticiones xhr de la forma es que mejor nos guste y cumpla con los requerimentos de nuestras apies.

Realizar un request con angular es tan facil como:

var config = {};
$http.get('http://localhost/api/test', config)
     .then(function(response){ console.log('request exitosa.') }, 
           function(response){ console.log('error'); });

Sigue leyendo

Visualizador MongoDB (Proyecto)

MongoDB como base de datos se ha estado convirtiendo en algo muy común hoy dia, la mescla con la misma con nodejs al parecer ha caído en gracia a la comunidad de desarrolladores y no solo nodejs sino cualquier otra tecnologia muchos desarrolladores han comenzado a usarla mucho y probar con ella.

MongoDB una base de datos no relacional (nosql) donde no tienes un esquema fijo para almacenar tus datos parece ser un mundo lleno de fantasias, hasta el punto donde tu proyecto pasa a producción y te cansas de estar usando su shell (Que es muy poderoso) para cualquier minima cosa, incluso solo ver un documento y en acciones es un poco difícil leerlo.
Sigue leyendo

Angular Logo

Service & Factory Angular

Como todo proyecto organizado no podemos tener toda la logica y/o funcionalidades core en controladores y mucho menos en vistas, AngularJs tiene el concepto de Servicio esto lo implementan de 2 formas, Service y Factory, ambos podrian ser usados del la misma manera pero es bueno tener en cuenta como funcionan para así sacarles el mas provecho.

Antes de hablar de service y demás cosas es bueno saber que AngularJS maneja el concepto/funcionalidad de inyección de dependencia (dependency injection), Angular utiliza esto a la hora de requerir cierto componente desde cualquier parte de la aplicación este es inyectado a nuestro controlador (Digamos). Este concepto lo usamos desde el principio, un ves decimos en nuestro controlador:
Sigue leyendo

Angular Logo

Compartir data entre controladores AngularJS

Algo que sucede bastante mientras se esta usando AngularJS es querer que 2 controladores interactuen con la misma data, esto se puede hacer de varias maneras, o con un servicio o una factoría (La verdad es la misma forma de hacer digamos).

Ejemplo:

Digamos que tenemos un template con su app test con 2 controladores main y main2 y ambos estan pintando la variable service.message.

HTML

<div ng-app='test'>
    
    <div ng-controller='main'>
        
        {{ service.message }}
        
    </div>
    
    <div ng-controller='main2'>
        
        <p>{{ service.message }}</p>
        
        <input type="text" ng-model='service.message'/>
    </div>
    
</div>

JavaScript

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

    app.controller('main',function($scope,ServiceTest,serviceFactory){
        $scope.service = ServiceTest.data;
    })
    
    app.controller('main2',function($scope,ServiceTest,serviceFactory,){
        $scope.service = ServiceTest.data;
    })
    
    app.service('ServiceTest',function(){
        this.data = {
            message : "From service init"
        }
    })

    app.factory('serviceFactory',function(){
    
        return {
            message:"nice"
        } 
    });

Para ambas formas funcionara de la misma manera, una vez inyectemos el service o la factoría tendremos la referencia de la misma variable y si cambiamos el valor de dicha variable sera reflejado en ambos lugares por que es la misma referencia.

Referencia

Codigo completo

Angular Logo

Angular 101

Angular es un framework en hecho en javascript utilizado mayormente para “Single page apps” y en estos últimos dias muy usado para realizar aplicación web mobile y aplicaciones híbridas mobiles. Entre sus principales características se encuentra que implementa el patron mvvm lo cual le permite tener alto control de la data que se maneja en sus modelos y sus vistas teniendo tambien otra característica importante y es el “two way binding” que le permite al desarrollador cambiar su modelo tanto desde la vista como desde los controladores. Una ultima característica para muchos es que este framework es mantenido por Google (El cual no asegura que habra soporte para este por un buen rato).
Sigue leyendo