Pero bueno el objetivo de este tutorial es introducirte a como funciona Angular Js y sirve a alguien con un nivel principiante, para esto primero crearemos una pagina simple a la que llamaremos Index.html, usando el siguiente codigo:
<!DOCTYPE html> <head> <title>Aprendiendo AngularJS</title> </head> <body> </body> </html>
Luego de que tenemos nuestra pagina, nos dirigiremos a la pagina de AngularJs https://angularjs.org/, dando clic en el boton "Download" obtendremos el mas reciente CDN, o podemos usar el siguiente: https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js
Con esta direccion CDN, actualizaremos nuestra pagina web, de la siguiente forma:
<!DOCTYPE html> <head> <title>Aprendiendo AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> </head> <body> <div id='content'></div> </body> </html>
Ahora que ya tenemos nuestra pagina web, le vamos a decir que es una aplicacion de AngularJS, y es bastante simple, solo añadiendo la directiva:
ng-app='MiAppTutorial' al content DIV.
Y luego que controlador vamos a usar, con la directiva:
ng-controller='ControladorMain'
<!DOCTYPE html> <head> <title>Aprendiendo AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> </head> <body> <div id='content' ng-app='MiAppTutorial' ng-controller='ControladorMain'></div> </body> </html>
Con esto estamos diciendo que cualquier cosa en el DIV 'content', sera controlado con nuestro 'ControladorMain', pero falta la definicion de nuestro controlador, y para ello haremos lo siguiente:
En el mismo directorio de nuestro index.html, crearemos un archivo o modulo al que llamaremos app.js, y añadiremos el siguiente codigo:
var app = angular.module('MiAppTutorial',[]);
Lo que hace este modulo es definir la aplicacion, y asignarlo a la variable app a la que podemos hacer uso luego. Todos los controles de la aplicacion deberian pertenecer a un modulo. Los modulos lo que hacen es mantener tu aplicacion mas organizada y mantienen el namespace global limpio.Creamos el controlador en el siguiente archivo "controladormain.js", y agregamos lo siguiente:
app.controller("ControladorMain", function($scope){ });
Esto lo que esta haciendo es asignar el 'Controlador Main' a la app "MiAppTutorial". El controlador podria haber sido hecho en el mismo archivo, pero es una buena practica, mantenerlo en archivos diferentes, solo tengamos en cuenta el app.js, debe ser incluido antes de controladormain.js
Y nuestro html, quedaria del siguiente modo:
<!DOCTYPE html> <head> <title>Aprendiendo AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <script src="controladormain.js" type="text/javascript"></script> </head> <body> <div id='content' ng-app='MiAppTutorial' ng-controller='ControladorMain'></div> </body> </html>
Ahora si, ya tenemos lista nuestra aplicacion Angular JS, ahora sigamos el tutorial, revisando que mas podemos hacer con Angular.
Revisando el Scope:
En el archivo controladormain.js, deben haber notado la variable $scope, que añadimos como parametro de la funcion controlador, es aqui donde asignaremos todas nuestras variables de controlador, que estaran disponibles en el DIV 'content' de nuestra pagina index.html. Declaremos una variable en nuestro controlador para entender su funcionamiento:
app.controller("ControladorMain", function($scope){ $scope.ejemplo = "Un ejemplo de como scope funciona!"; });
Aqui solo hemos creado una variable string a la que vamos a acceder en nuestro html del siguiente modo:
<!DOCTYPE html> <head> <title>Aprendiendo AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <script src="controladormain.js" type="text/javascript"></script> </head> <body> <div id='content' ng-app='MiAppTutorial' ng-controller='ControladorMain'> {{ejemplo}} </div> </body> </html>
Como ven en el html anterior, nosotros envolvemos nuestra variable ejemplo con "{{}}" , asi AngularJs sabe que es una expresion y que debe hacer algo con eso.
Si vemos nuestra pagina en el explorador veremos lo siguiente:
Con esto deberiamos entender como funciona una variable scope, tambien deberiamos entender que esta variable solo estara disponible en nuestro DIV 'content', ya que ahi es donde hemos asignado nuestro controlador, y no la podremos accesar de cualquier otra parte a menos que el mismo controlador este definido.
Entendiendo el Binding:
Data Binding, es un tema muy amplio en AngularJS, el objetivo de este tutorial es solo mostrarte, algunas partes importantes para asegurarnos que entiendas las posibilidades.
Asi que para comenzar en nuestro controlador definiremos lo siguiente:
app.controller("ControladorMain", function($scope){ $scope.valorInput = ""; });
Y añadamos este código en nuestro html:
<!DOCTYPE html> <head> <title>Aprendiendo AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <script src="controladormain.js" type="text/javascript"></script> </head> <body> <div id='content' ng-app='MiAppTutorial' ng-controller='ControladorMain'> <input type='text' ng-model='valorInput' /> {{valorInput}} </div> </body> </html>
Revisemos el codigo anterior, en el controladormain.js, solo hemos añadido una variable llamada 'valorInput'. Ahora en nuestro html, hemos creado una caja de texto y hemos añadido la directiva:
ng-model='valorInput'
Esta directiva lo que hace es hacer un enlace del valor de un control HTML, a los datos de la aplicacion, en este caso la variable 'valorInput'. En la linea siguiente, lo unico que estamos haciendo es mostrar lo que se encuentra actualmente en la variable en mencion.
Ahora intentemos con otro ejemplo, pongamos este codigo en nuestro controladormain.js:
app.controller("ControladorMain", function($scope){ $scope.paisSeleccion = 0; $scope.ciudadSeleccion = null; $scope.paises = [ { id: 0, pais: 'Ecuador', ciudades: [ 'Guayaquil', 'Quito', 'Cuenca', 'Manta' ] }, { id: 1, pais: 'Peru', ciudades: [ 'Lima', 'Trujillo', 'Ica', 'Cusco' ] }, { id: 2, pais: 'Colombia', ciudades: [ 'Bogota', 'Cali', 'Medellin', 'Cartagena' ] }, { id: 3, pais: 'USA', ciudades: [ 'Miami', 'New York', 'Dallas' ] } ]; });
Lo que hemos hecho aqui es simplemente definir 3 variables scope: 'paisSeleccion', que va a tener el pais que seleccionemos, 'ciudadSeleccion' que va a tener el string de la ciudad que seleccionemos y por ultimo 'paises' que es un arreglo de paises con sus propias ciudades.
Lo que vamos a hacer es crear dos combos, para permitir la seleccion de un pais y que se enlacen con las ciudades del arreglo, y ademas vamos a hacer una tabla que muestre la info que hemos definido. En nuestro html hagamos lo siguiente:
<!DOCTYPE html> <head> <title>Aprendiendo AngularJS</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <script src="controladormain.js" type="text/javascript"></script> </head> <body> <div id='content' ng-app='MiAppTutorial' ng-controller='ControladorMain'> <select ng-model='paisSeleccion' ng-options='obj.pais for obj in paises'></select> <select ng-model='ciudadSeleccion'> <option ng-repeat='label in paises[paisSeleccion.id].ciudades'>{{label}}</option> </select> <br> <br> <table border = 1> <tr ng-repeat="x in paises"> <td>{{ x.pais }}</td> <td><table> <tr ng-repeat= "y in paises[x.id].ciudades"> <td> {{y}} </td> </tr></table> </td> </tr> </table> </div> </body> </html>
Revisemos el codigo, primero tenemos un select, con la directiva ng-options, que lo que hace es permitirnos popular nuestro select con el arreglo paises, para nuestro segundo select lo hemos populado de una manera diferente con la directiva ng-repeat, ng-repeat simplemente te permite replicar cualquier elemento HTML basado en un arreglo o en un set de objetos, luego he usado {{label}} para traer el valor que he definido en el ng-repeat.
Como vemos en la tabla que tenemos a continuacion tambien he usado la opcion ng-repeat para crear una tabla de paises con sus ciudades asociadas y como les dije anteriormente puede ser usado en cualquier control HTML.
Al final deberiamos tener algo como lo siguiente:
Y con esto terminariamos la primera parte de esta introduccion a AngularJS, espero que les sirva y nos vemos en la segunda parte.
Algunos links de interes:
Acerca de AngularJs, conceptos y demas clic aqui!
Acerca de todaaaaas las directivas de AngularJS clic aqui!
Comentarios
Publicar un comentario