Angular.js: Primeros pasos

Primeros Pasos

Lo primero que nos hace falta como en todo proyecto web es un buen editor de código. Yo recomiendo Sublime Text o Brackets, pero bien podrías utilizar el bloc de notas o el vim si eres un poco masoquista.

El siguiente paso es descargar Angular.js o en nuestro caso enlazar Angular.js con nuestro documento Web. Para ello debemos ir a la web de Angular y hacer click en Download.

Descarga de AngularJS
Descarga de AngularJS

Yo copiaré el enlace del CDN: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js

Ahora lo colocaremos como un script en nuestro documento html, es decir:

<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Primeros Pasos AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
</head>
<body>
<h1>Primersos pasos AngularJS</h1>
</body>
</html>

Nótese que es importante colocar ng-app en la etiqueta html para que AngularJS reconozca nuestra web como una aplicación de AngularJS.

 

Expresiones

 

Podemos utilizar expresiones que serán interpretadas como código javascript utilizando {{ }}, por ejemplo podemos hacer cálculos dentro de un elemento párrafo de html así:

 

<h1>Primersos pasos AngularJS</h1>
<p> {{ (400 * 2) + 35  }}

 

Estas expresiones se ejecutarán en tiempo real en el navegador del cliente así que no notará que están ahí.

Usando filtros

 

Dentro de las expresiones podemos agregar filtros para modificar los valores, por ejemplo si quisiéramos decir que el valor anterior son euros:

 

<p> {{ (400 * 2) + 35  | currency:”€” }}

 

También podemos modificar una cadena de texto simple con uppercase o lowercase, el siguiente ejemplo pasa toda la cadena “esta es una cadena en mayúscula” en letras mayúsculas:

 

<p> {{ ‘Esta es una cadena en mayúscula’ | uppercase }} </p>

 

Directivas

 

Las directivas nos sirven para modificar nuestro documento web. Ya hemos usado una directiva sin saberlo al poner:

<html ng-app>

Esta es la directiva más común dentro de AngularJS. Además existen otras muchas directivas que podemos anidar sin problemas, por ejemplo:

 

<!doctype html>
<html ng-app>
   <head>
       <meta charset="utf-8">
       <title>Primeros Pasos AngularJS</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
   </head>
   <body ng-controller="control-1">
        <h1>Primersos pasos AngularJS</h1>
        <div ng-show="true">
           Directiva dentro de otra directiva
       </div>
        <button ng-click="accionBoton()" ng-show="false">
           Esto es un botón
       </button>
    </body>
</html>

 

Las directivas son atributos con valores que la librería interpretará mas adelante en tiempo de ejecución.

Si queremos que nuestra web cumpla con las normas de la W3C Angular dispone de un mecanismo para poder pasar estos test, se trata de incluir la palabra data- dentro de cada directiva, por ejemplo:

 

<!doctype html>
<html data-ng-app>
   <head>
       <meta charset="utf-8">
       <title>Primeros Pasos AngularJS</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
   </head>
   <body data-ng-controller="control-1">
        <h1>Primersos pasos AngularJS</h1>
        <div data-ng-show="true">
           Directiva dentro de otra directiva
       </div>
        <button data-ng-click="accionBoton()" ng-show="false">
           Esto es un botón
       </button>
    </body>
</html>

 

Tanto si los pones como si no tu aplicación será la misma de cara a AngularJS.

 

Data Binding

 

Podemos enlazar elementos de datos en un mismo documento a modo de variables, por ejemplo:

 

<!doctype html>
<html ng-app>
   <head>
       <meta charset="utf-8">
       <title>Primeros Pasos AngularJS</title>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
   </head>
   <body>
        <h1>AngularJS</h1>
        <p>
           Data Binding en AngularJS
       </p>
        <input type="text" ng-model="campo" >
       <p>
       El texto introducido en el input es:
       <h2>{{ campo }} </h2>
       </p>
     </body>
</html>

 

Con la directiva ng-model=”campo” hemos enlazado el valor del input con el de la variable campo, que podemos usar más tarde como vemos en el ejemplo, el resultado es esto:

Ejemplo Data binding
Ejemplo Data binding

 

Anuncios

Symfony: Introducción

symfony_black_01

¿Qué es?

Symfony es un framework de PHP, pero no queda ahi la cosa, según al web de Symfony es un conjunto de componentes de PHP reutilizables además de ser un framework para crear aplicaciones, es una filosofía de trabajo marcando una serie de reglas en el flujo de creación de aplicaciones. También es una comunidad cada día mas amplia que ofrece cada vez más posibilidades de comunicación y de intercambio de conocimientos.

Sirve para crear aplicaciones aunque podemos usarlo para crear cualquier web compleja que se te ocurra, desde back-ends simples para aplicaciones móviles hasta aplicaciones webs muy complejas. Está basado en el MVC aunque no estamos restringidos a él.

¿Qué no es?

No es un gestor de contenidos que me da el trabajo hecho, aunque sí que facilita la manera de crear pero no es un gestor de contenido como WordPress o Drupal. Tampoco es sólo un sistema para hacer webs simples “tradicionales”.

¿Cómo funciona?

Flujo de trabajo de Symfony
Flujo de trabajo de Symfony

Atendiendo a su funcionamiento, Symfony es un sistema que recupera mediante HTTP una serie de Request y que devuelve una serie de Responses. Tendremos una serie de rutas por las que nos envían información, tenemos una aplicación principal o Front controller que será el que reciba la información y a través de su controlador va a devolver una serie de respuestas.

¿Por qué usar Symfony?

Porque es de código abierto. Por su flexibilidad tenemos un framework que podemos utilizar para prácticamente todo. Además está muy bien estructurado y es muy abierto de modo que podemos hacer muchos módulos independientes para reutilizar el código en varios proyectos.

Gracias a que Symfony tiene una gran comunidad de desarrolladores hay muchos componentes de terceras partes que nos facilitarán mucho la tarea a realizar. También Symfony tiene un buen rendimiento con nuestras aplicaciones y por último es un framework muy bien documentado tanto en inglés como en castellano.

¿Qué nos ofrece?

Ofrece PHP reutilizable en otros proyectos, no sólos de Symfony sino utilizable en otros proyectos distintos gracias a su estructura de clases. Estos bundles reutilizables nos facilitaran mucho el desarrollo de aplicaciones a largo plazo. También recordemos que existe una separación siguiente el patrón de MVC.

Tendremos un sistema de comandos que simplifican el comando que nos permitirán automatizar tareas. Por último, Symfony también está planteado para que se pueda reutilizar en todo tipo de aplicaciones, entre ellas para usarlo como Back-ends en sistemas de dispositivos móviles.

¿Qué necesitamos para comenzar con Symfony?

Por su puesto, deberías conocer las bases de PHP, HTML y CSS. Necesitaremos también un editor de código para poder desarrollar y un servidor de pruebas para trabajar en local como Xampp, Wamp por ejemplo.

 

Angular.js: Introducción

¿Qué es Angujar.js?

Es en esencia un framework estructural. Nos permite generar las bases fundamentales de una aplicación Web. Ha sido creado por Google con lo cual tenemos garantizado un código en constante evolución. Está basado en JavaScript uno de los lenguajes mas sencillos y usados de Internet.

El objetivo fundamental de Angujar.js es crear aplicaciones web dinámicas, enfocándose en la optimización y en la sencillez del uso para los desarrolladores. Una aplicación web puede tener las siguientes capas:

Caso de uso de una aplicación Web
Caso de uso de una aplicación Web
  • Elementos gráficos: Los usuarios pueden interactuar y ver la información en ella.
  • Lógica y datos: Realizamos todos los procesos que genera nuestra aplicación.
  • Conexión a datos externos: Donde almacenamos la información (resultados) de nuestra aplicación.

Antiguamente debíamos utilizar distintas tecnologías para poder crear una aplicación de este tipo. Con Angular.js podemos integrar todo el desarrollo en un sólo framework.

Arquitectura de Angular.js

Angular.js sigue el patrón de diseño básico de Modelo-Vista-Controlador (MVC), es decir todos los elementos en Angular están separados por capas: los datos, la capa de presentación y finalmente los controladores. Otra característica de Angular.js son las directivas HTML, permitiéndonos incluir código avanzado dentro de nuestro código HTML de manera fácil e intuitiva. También contamos con inyección de dependencias posibilitando tener una aplicación modular y con acceso a servicios que mejoran la escalabilidad de la aplicación.

Características principales de Angular.js

La popularidad de este framework hacen posible que sea sencillo encontrar materiales, recursos y desarrolladores ante posibles dudas y problemas. Angular no genera componentes gráficos o CSS, de modo que no estamos enmarcados en una línea gráfica específica con lo cual conseguimos un framework muy ligero y eficiente con la posibilidad de usarlo para desarrollar aplicaciones para dispositivos móviles.

Por último, y una parte muy interesante de Angular es la posibilidad de coexistir con otros frameworks como jQuery. En el próximo post comenzaremos con la toma de contacto de este framework.