Tutorial Angular Js Openwebinars

Tutorial de
Presentacin
Desde
OpenWebinars te presentamos este prctico Tutorial de iniciacin de AngularJS, el
Framework Javascript impulsado por Google.
Aprenders de forma profesional a realizar aplicaciones web con JavaScript gracias a
nuestro curso de AngularJS y TypeScript. Nuestros profesores te ensean desde cero
TypeScript para usarlo en el desarrollo de aplicaciones AngularJS. Conseguirs entender
cules son las buenas prcticas y los errores a evitar. Regstrate ahora y comienza a
obtener estos potentes conocimientos, el conocimiento que todo desarrollador actual
desea.
Si quieres convertirte en un desarrollador profesional inscribete en nuestro
Curso Online de
AngularJS y Typescript
. Nuestro experto te ensears las mejores prcticas y trucos para
sacarle el mximo partido a esta tecnologa.
Aprende ms con el Curso Online de AngularJS y TypeScript
ndice Tutorial AngularJS

Introduccin
AngularJS en HTML
Qu es AngularJS?
Expresiones en AngularJS
Directivas de AngularJS
Enlace de Datos en AngularJS
Expresiones de AngularJS
Nmeros de AngularJS
Strings (Cadenas de texto) en AngularJS
Arrays en AngularJS
Objetos en AngularJS
Enlazado de Datos
Repitiendo Elementos HTML
Resumen
Directiva ng-app
Directiva ng-init
Directiva ng-model
Directiva ng-repeat
Controladores en AngularJS
Propiedades del Controlador

Mtodos del Controlador
Controladores en ficheros externos
Otro Ejemplo de Controlador AngularJS
Filtros
Aadir Filtros a Expresiones
Aadiendo Filtros a Directivas
Filtrando la entrada de datos
El DOM HTML
La directiva ng-disabled
La directiva ng-show
Eventos
La Directiva ng-click
Ocultando elementos HTML
Mdulos
Ejemplo de Mdulo en AngularJS
Los Controladores ensucian el mbito Global de JavaScript
Mdulos de AngularJS
Definicin de los Mdulos
Ficheros de una Aplicacin AngularJS
Introduccin
AngularJS es un framework de JavaScript. Es una librera escrita en JavaScript y puede ser
agregada a una pgina HTML con una etiqueta
<script>
. AngularJS extiende atributos
HTML con directivas, y une datos al HTML con expresiones.
Es una buena idea colocar los scripts en la parte inferior del elemento
<body>
, justo antes
de la etiqueta
</body>
. Esto mejora la carga de la pgina, ya que la carga de HTML no est
bloqueado por los scripts de carga.
<
script
src
=
"//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"
></
script
>
AngularJS en HTML
AngularJS extiende HTML con
ng-directives(Directivas de AngularJS), y enlaza datos a
HTML con expresiones {
{}}
: Ejemplo
<
div
ng-app
=
""
>
<
p
>Mi primera expresion: {{ 5 + 5 }}</
p
>
</
div
>
<
script
src
=
></
script
>
Explicacin del ejemplo: AngularJS se inicia automticamente cuando la pgina ha

cargado. La directiva
ng-apple dice a AngularJS que el elemento
<div>es el "propietario"
de una aplicacin AngularJS. Las llaves
{{ }}definen una expresin AngularJS. La
expresin 5
+ 5
se evala como
10
.
Si eliminas la directiva
ng-app
, el HTML mostrar la expresin tal como es, sin resolver.
Qu es AngularJS?
AngularJS hace que sea fcil de desarrollar aplicaciones web modernas de una sola
pgina (ZEPA).
AngularJS integra datos de aplicacin a elementos HTML.
AngularJS puede clonar y repetir elementos HTML.
AngularJS puede ocultar y mostrar elementos HTML.
AngularJS puede aadir cdigo "detrs" de los elementos HTML.
AngularJS admite la validacin de entrada.
Expresiones en AngularJS
Las expresiones en AngularJS se escriben dentro de llaves dobles: {
{expresin}}
.
Las expresiones en AngularJS enlazan datos a elementos HTML.

AngularJS mostrar el resultado de las expresiones exactamente donde se escribi
la expresin.
Las expresiones en AngularJS se parecen mucho a las expresiones de JavaScript.
Las expresiones en AngularJS pueden contener literales, operadores y variables (al
igual JavaScript).
Ejemplo:
{{nombre +
""+ apellido}}
Las directivas en AngularJS son atributos HTML con el prefijo
ng
. La directiva
ng-app
inicializa una aplicacin AngularJS. La directiva
ng-initinicializa datos de AngularJS.
Ejemplo:
<
div
ng-app
=
""
ng-init
=
"nombre='Paco'"
>
<
p
>El nombre es: {{ nombre }}</
p
>
</
div
>
Si queremos que el cdigo sea HTML5 Vlido podemos usar tambin:

<
div
data-ng-app
=
""
data-ng-init
=
"nombre='Paco'"
>
<
p
>El nombre es: {{ nombre }}</
p
>
</
div
>
HTML5 permite atributos extendidos (hechos por ti), a partir de

data-
. Los atributos de
AngularJS comienzan con
ng-
, pero tambin se puede usar
data-ng-
, para hacer que su
pgina est validada con HTML5.
Enlace de Datos en AngularJS

La expresin {{ nombre }}, en el ejemplo de arriba, es una expresin de enlace de datos de
AngularJS. El enlace de datos en AngularJS, sincroniza las expresiones de AngularJS con
datos de AngularJS. Si no te gusta que la expresin {{ nombre }} sea visible al comienzo,
puedes usar la directiva n
g-bind
en su lugar:
<
div
ng-app
=
""
ng-init
=
"nombre='Paco'"
>
<
p
>El nombre es: <
span
ng-bind
=
"nombre"
></
span
></
p
>
</
div
>
<
title
>Title</
title
>
<
style
>
body{
width
:
500px
;}</
style
>
<
script
type
=
"application/javascript"
>
function
$init
()
{
return
true
;}
</
script
>
<
p
checked
=
""
class
=
"title"
id
=
"title"
>Title</
p
>

</
div
>

g-bind
:
<
p
>Las fruta es <
span
ng-bind
=
"frutas[2]"
></
span
></
p
>

Objetos en AngularJS
Al igual que en Javascript, en AngularJS accedemos a las propiedades de los objetos
usando el operador . (punto). Ejemplo:
<
div
ng-app
=
""
ng-init
=
"coche={marca:'Renault',modelo:'Megane Coupe'}"
>
<
p
>La marca del coche es {{ coche.marca }}</
p
>

</
div
>
Usando
ng-bind
:
<
div
ng-app
=
""
ng-init
=
"coche={marca:'Renault',modelo:'Megane Coupe'}"
>
<
p
>La marca del coche es <
span
ng-bind
=
"coche.marca"
></
span
></
p
>

</
div
>
Las directivas son atributos que extienden a los ya existentes en HTML y comienzan con el
prefijo
ng-
. La directiva
ng-appinicializa una nueva aplicacin de AngularJS. La directiva
ng-initinicializa datos de la aplicacin. Las directiva
ng-modelenlaza datos de la
aplicacin a elementos HTML. En el siguiente ejemplo podrs ver el uso de las tres
directivas:
<
div
ng-app
=
""
ng-init
=
"nombre='Paco'"
>
<
p
>Nombre: <
input
type
=
"text"
ng-model
=
"nombre"
></
p
>
<
p
>Has escrito: {{ nombre }}</
p
>
</
div
>
Explicacin del ejemplo: Si en el

inputcambias el nombre de la persona, en cualquier lugar
que tengamos la expresin
{{nombre}}veremos el dato modificarse al instante, esto se
produce gracias a que el dato nombre est enlazado con el
inputgracias a la directiva
ng-model
. La directiva
ng-app le dice a AngularJS que el elemento
</div> es el
"propietario" de la aplicacin AngularJS
Una pgina web puede contener varias aplicaciones AngularJS, corriendo en diferentes
elementos.
Enlazado de Datos
La expresin
{{nombre}}
, en el ejemplo de arriba, es una expresin de enlazado de datos
de AngularJS. El enlazado de datos en AngularJS, sincroniza las expresiones de AngularJS
con datos de AngularJS.
{{nombre}}est sincronizado con
ng-model="nombre"
. En el
siguiente ejemplo dos campos de texto estn sincronizados con dos directivas n
g-model
:
<
div
ng-app
=
""
ng-init
=
>
Cantidad: <
input
type
=
"number"
ng-model
=
"cantidad"
>
Costo:
<
input
type
=
"number"
ng-model
=
"precio"
>
Precio total: {{ quantity * price }}
</
div
>
Por ahora estamos usando

ng-initpara inicializar nuestros datos. Esto no es muy comn.
Aprenders a inicializar datos de la manera correcta cuando hablemos de los
controladores.
Repitiendo Elementos HTML

La directiva
ng-repeat
se encarga de repetir un elemento HTML:
<
div
ng-app
=
""
ng-init
=
"frutas=['Manzana','Fresa','Banana']"
>
<
ul
>
<
li
ng-repeat
=
"f in frutas"
>
{{ f }}
</
li
>
</
ul
>
<
div
>
</
div
></
div
>
Como puedes ver, la directiva

ng-repeat es usada con Arrays. El cdigo de arriba
provocar que el elemento
li se repita tantas veces como frutas hay en el array, la salida
ser as:
<
div
ng-app
=
""
ng-init
=
"frutas=['Manzana','Fresa','Banana']"
>
<
ul
>
<
li
>Manzana</
li
>
<
li
>Fresa</
li
>
<
li
>Banana</
li
>
</
ul
>
<
div
>
</
div
></
div
>
Tambin podemos usar la directiva

ng-repeatcon arrays de objetos y expresiones ms
complejas. Ejemplo:
<
div
ng-app
=
""
ng-init
=
"coches=[
{marca:'Audi',color:'azul'},
{marca:'Ferrari',color:'rojo'},
{marca:'Mercedes',color:'negro'}]"
>
<
ul
>
<
li
ng-repeat
=
"c in coches"
>
{{ c.marca + ', ' + c.color }}
</
li
>
</
ul
>
</
div
>
El resultado del cdigo anterior es:

<
ul
>
<
li
>Audi, azul</
li
>
<
li
>Ferrari, rojo</
li
>
<
li
>Mercedes, negro</
li
>
</
ul
>
AngularJS es perfecto para aplicaciones CRUD (Create Read Update Delete). Slo tienes
que pensar como si esos objetos fuesen registros de una base de datos.
Resumen
Directiva ng-app
La directiva
ng-appdefine el elemento raz de una aplicacin AngularJS. La directiva
ng-appinicializar y arrancar automticamente la aplicacin AngularJS una vez la pgina
ha cargado. Ms tarde aprenders como
ng-app puede tener un valor (como
ng-app="miModulo"
), para conectar mdulos de cdigo.
Directiva ng-init
La directiva
ng-initdefine los valores iniciales de los datos de una aplicacin AngularJS.
Como anteriormente he comentado, normalmente, no se debe usar
ng-init
. Usaremos un
controlador o un mdulo en lugar de esto. Lo aprenders ms adelante.
Directiva ng-model
La directiva
ng-modelenlaza elemento HTML con datos de la aplicacin AngularJS. La
directiva n
g-model
tambin nos ofrece las siguientes funcionalidades:
Provee validacin de tipos de los datos de la aplicacin ( nmero, email, requerido).
Provee de estado a los datos de la apicacin (invalid, dirty, touched, error).
Provee de clases CSS a los elementos HTML.
Enlaza elementos HTML a formularios.
Directiva ng-repeat
La directiva
ng-repeatclona elementos HTML por cada elemento dentro de una coleccin
(array).
Controladores en AngularJS
Las aplicaciones AngularJS son controladas por los controladores. Un controlador no es
ms que un objeto JavaScript, que se crea con el constructor de objetos de JavaScript. El
mbito de la aplicacin est definido por
$scopey se corresponde con el elemento HTML
asociado a la aplicacin. Ejemplo:
<
div
ng-app
=
""
ng-controller
=
"cochesController"
>
Marca: <
input
type
=
"text"
ng-model
=
"coche.marca"
><
br
>
Modelo: <
input
type
=
"text"
ng-model
=
"coche.modelo"
><
br
>
<
br
>
El Coche es: {{coche.marca + " " + coche.modelo}}
</
div
>
<
script
>
function
cochesController
($scope)
{
$scope.coche = {
marca:
"Audi"
,
modelo:
"A5"
};
}
</
script
>
Explicacin de la aplicacin: La aplicacin AngularJS est definida por la directiva

ng-app
.
La aplicacin corre dentro de elemento
<div>
. La directiva
ng-controllerindica el
nombre del objeto correspondiente al controlador. La funcin
cocheControlleres el
constructor estndar del objeto JavaScript. El objeto controlador tiene una propiedad:
$scope.coche
. El objeto coche tiene dos propiedades: marca y modelo. La directiva
ng-model enlaza los campos
<input/> a las propiedades del controlador (marca y
modelo).
Propiedades del Controlador

En el ejemplo de arriba te he mostrado un objeto controlador con dos propiedades, marca y
modelo. Un controlador tambin puede tener funciones como propiedades del controlador.
Ejemplo:
<
div
ng-app
=
""
ng-controller
=
"cocheController"
>
Marca: <
input
type
=
"text"
ng-model
=
"coche.marca"
><
br
>
Modelo: <
input
type
=
"text"
ng-model
=
"coche.modelo"
><
br
>
<
br
>
El coche es: {{coche.nombreCompleto()}}
</
div
>
<
script
>
function
cocheController
($scope)
{
$scope.coche = {
marca:
"Audi"
,
modelo:
"A3"
,
nombreCompleto:
function
()
{
varx;
x = $scope.coche;
returnx.marca +
" "+ x.modelo;

}
};
}
</
script
>
Mtodos del Controlador

Un controlador tambin puede tener mtodos. Ejemplo
<
div
ng-app
=
""
ng-controller
=
"cocheController"
>
Marca: <
input
type
=
"text"
ng-model
=
"coche.marca"
><
br
>
Modelo: <
input
type
=
"text"
ng-model
=
"coche.modelo"
><
br
>
<
br
>
El coche es: {{ nombreCompletoDelCoche() }}
</
div
>
<
script
>
function
personController
($scope)
{
$scope.coche = {
marca:
"Audi"
,
modelo:
"A3"
,
};
$scope.nombreCompletoDelCoche =
function
()
{
varx;
x = $scope.coche;
returnx.marca +
" "+ x.modelo;

};
}
</
script
>
Controladores en ficheros externos

En aplicaciones ms grandes, es habitual tener los controladores en ficheros JavaScript
externos. Solo debes copiar el cdigo entre las etiquetas
<script>en un fichero externo
llamadococheController.js
. Ejemplo:
<
div
ng-app
=
""
ng-controller
=
"cocheController"
>
Marca: <
input
type
=
"text"
ng-model
=
"coche.marca"
><
br
>
Modelo: <
input
type
=
"text"
ng-model
=
"coche.modelo"
><
br
>
<
br
>
El Coche es: {{coche.marca + " " + coche.modelo}}
</
div
>
<
script
src
=
"cocheController.js"
></
script
>
Otro Ejemplo de Controlador AngularJS

En el siguiente ejemplo crearemos un nuevo fichero para nuestro controlador: Controlador:
function
alumnosController
($scope)
{
$scope.alumnos = [
{nombre:
'Paco'
,pais:
'Espaa'
},
{nombre:
'Manuel'
,pais:
'Chile'
},
{nombre:
'Laura'
,pais:
'Argentina'
}
];
}
Y ahora usamos el controlador en nuestra aplicacin AngularJS:

<
div
ng-app
=
""
ng-controller
=
"alumnosController"
>
<
ul
>
<
li
ng-repeat
=
"alumno in alumnos"
>
{{ alumno.nombre + ', ' + alumno.pais }}
</
li
>
</
ul
>
</
div
>
<
script
src
=
"alumnosController.js"
></
script
>
Filtros
Los filtros se pueden agregar a las expresiones y a las directivas mediante un carcter de
barra vertical |
. Los filtros de AngularJS se usan para transformar datos.
Filtro
currency
filter
lowercase
orderBy
uppercase
Descripcin
Da formato de moneda a un nmero.
Selecciona un subconjunto de elementos de un array.
Da formato a una cadena convirtindola en minsculas.
Ordena un array segn una expresin
Da formato a una cadena convirtindola en maysculas.
Aadir Filtros a Expresiones

Un filtro se puede aadir a una expresin con un carcter de barra vertical | y un filtro.
(Durante los siguientes dos ejemplos vamos a utilizar el controlador Persona del
captulo
anterior
) El filtro
uppercase
convierte una cadena en maysculas: Ejemplo:
<
div
ng-app
=
""
ng-controller
=
"personaController"
>
<
p
>El nombre es {{ persona.nombre | uppercase }}</
p
>
</
div
>
El filtro l
owercase
convierte una cadena de texto a minsculas: Ejemplo:
<
div
ng-app
=
""
ng-controller
=
"facturaController"
>
<
input
type
=
"number"
ng-model
=
"cantidad"
>
<
input
type
=
"number"
ng-model
=
"precio"
>
<
p
>Total = {{ (cantidad * precio) | currency }}</
p
>
</
div
>
Aadiendo Filtros a Directivas

Un filtro se puede aadir a una directiva con un carcter de barra vertical | y un filtro. El
filtro
orderBy/
ordena un array segn una expresin dada: Ejemplo:
<
div
ng-app
=
""
ng-controller
=
"alumnosController"
>
<
ul
>
<
li
ng-repeat
=
"alumno in alumnos | orderBy:'pais'"
>
{{ alumno.nombre + ', ' + alumno.pais }}
</
li
>
</
ul
>
<
div
>
</
div
></
div
>
Filtrando la entrada de datos

Un filtro de entrada se puede aadir a una directiva con un carcter de barra vertical |y el
filtro seguido de dos puntos y el nombre del modelo. El filtro filtro selecciona un
subconjunto de un array. Ejemplo:
<
div
ng-app
=
""
ng-controller
=
"alumnosController"
>
<
p
><
input
type
=
"text"
ng-model
=
"nombre"
></
p
>
<
ul
>
<
li
ng-repeat
=
"alumno in alumnos | filter:nombre | orderBy:'pais'"
>
{{ (alumno.nombre | uppercase) + ', ' + alumno.pais }}
</
li
>
</
ul
>
</
div
>
El DOM HTML
AngularJS tiene sus propios atributos en HTML que actan como directivas. A continuacin
veremos algunas directivas que manejan objetos del DOM HTML.
La directiva ng-disabled
La directiva
ng-disabledenlaza datos de la aplicacin directamente al atributo HTML
deshabilitado. Ejemplo:
<
div
ng-app
=
""
>
<
p
>
<
button
ng-disabled
=
"misDatos"
>Haz Click!</
button
>
</
p
>
<
p
>
<
input
type
=
"checkbox"
ng-model
=
"misDatos"
>Botn
</
p
>
</
div
>
Explicacin: La directiva
ng-disabledenlaza el dato "misDatos" al atributo HTML disabled.
La directiva
ng-modelenlaza "misDatos" al contenido (valor) del input de tipo checkbox
HTML.
La directiva ng-show
La directiva
ng-show
oculta o muestra un elemento HTML. Ejemplo:
<
div
ng-app
=
""
>
<
p
ng-show
=
"true"
>Soy visible.</
p
>
<
p
ng-show
=
"false"
>Soy invisible.</
p
>
</
div
>
Tambin puedes hacer uso de una expresin que se evala a verdadero o falso (como por
ejemplo
ng-show="puntos < 10"
), para ocultar y mostrar elementos HTML. En el
siguiente artculo veremos los Eventos. Suscrbete para recibirlo en tu email tan pronto
como se publique.
Eventos
AngularJS tiene sus propias directivas de eventos HTML.
La Directiva ng-click
La directiva
ng-click
define un evento click de AngularJS. Ejemplo:
<
div
ng-app
=
""
ng-controller
=
"miController"
>
<
button
ng-click
=
"count = count + 1"
>Haz click!</
button
>
<
p
>{{ count }}</
p
>
</
div
>
Ocultando elementos HTML

La directiva
ng-show
define la visibilidad de una aplicacin.
El valor n
g-show="true"
(valor booleano) hace que el elemento sea visible.
El valor n
g-show="false"
(valor booleano) hace que el elemento sea invisible.
Ejemplo:
<
div
ng-app
=
""
ng-controller
=
"cocheController"
>
<
button
ng-click
=
"mostrarocultar()"
>Mostrar/Ocultar</
button
>
<
p
id
=
"coche"
ng-show
=
"mivariable"
>
Marca: <
input
type
=
"text"
ng-model
=
"coche.marca"
><
br
>
Modelo: <
input
type
=
"text"
ng-model
=
"coche.modelo"
><
br
>
<
br
>
El Coche es un {{coche.marca+ " " + coche.modelo}}
</
p
>
</
div
>
<
script
>
function
cocheController
($scope)
{
$scope.coche= {
marca:
"Audi"
,
modelo:
"A5"
};
$scope.mivariable=
true
;
$scope.mostrarocultar=
function
()
{
$scope.mivariable= !$scope.mivariable;
};
}
</
script
>
Explicacin de la Aplicacin: La aplicacin tiene una nueva propiedad por defecto

mivariable:$scope.mivariable= true; La directiva
ng-show usa la variable
mivariableque tendr un valor booleano:
trueo
false
. La funcin mostrarocultar()
cambiar los valores de
mivariableentre
trueo
false
. De esta manera mostraremos u
ocultaremos el elemento prrafo p
con id c
oche
.
Mdulos
Tus aplicaciones en AngularJS estarn compuestas por mdulos. Todos los controladores
de AngularJS deben pertenecer a un mdulo.
Con el uso de mdulos mantenemos nuestro cdigo limpio y bien organizado.
A continuacin te pongo un ejemplo de aplicacin AngularJS que usa mdulos.
Ejemplo de Mdulo en AngularJS

En este ejemplo, "miAplicacion.js" contiene un mdulo de definicin de la aplicacin
"miAplicacion", "miControlador.js" contiene un controlador:
<
div
ng-app
=
"miAplicacion"
ng-controller
=
"miControlador"
>
{{ nombre + " " + apellidos}}
</
div
>
<
script
src
=
></
script
>
<
script
src
=
"miAplicacion.js"
></
script
>
<
script
src
=
"miControlador.js"
></
script
>
Los Controladores ensucian el mbito Global de JavaScript

En todos los ejemplos que hemos ido viendo, a lo largo de los artculos sobre AngularJS,
hemos usado f
unciones Globales. Esto no esta bien.
Las variables globales y las funciones globales no se deben usar en las aplicaciones de
AngularJS, ya que podrn ser sobrescritos o eliminados por otros scripts.
Para corregir este problema, en AngularJS, hacemos uso de los mdulos.
Aqu tienes un ejemplo usando mdulos y sin usar mdulos.
Mdulos de AngularJS
Usando un controlador simple:
<!DOCTYPE html>
<
html
>
<
body
>
<
div
ng-app
=
""
ng-controller
=
"miControlador"
>
{{ nombre + " " + apellidos }}
</
div
>
<
script
>
function
miControlador
($scope)
{
$scope.nombre =
"Mario"
;
$scope.apellidos =
"Flores"
;
}
</
script
>
<
script
src
=
></
script
>
</
body
>
</
html
>
Usando un controlador perteneciente a un mdulo:

<!DOCTYPE html>
<
html
>
<
head
>
<
script
src
=
></
script
>
</
head
>
<
body
>
<
div
ng-app
=
"miAplicacion"
ng-controller
=
"miControlador"
>
</
div
>
<
script
>
varapp = angular.module(
"miAplicacion"
, []);
app.controller(
"miControlador"
,
function
($scope)
{
$scope.nombre =
"Mario"
;
$scope.apellidos =
"Flores"
;
});
</
script
>
</
body
>
</
html
>
*Podrs notar que en la segunda versin con mdulos hemos cargado AngularJS en la
seccin <head>.
Definicin de los Mdulos

Un consejo recomendado para las aplicaciones web, es colocar todos los script al final del
documento HTML antes de cerrar la etiqueta <body>.
Esto provoca la pgina cargue mucho ms rpido, ya que la carga del HTML no estar
bloqueada por la carga de los scripts.
En muchas aplicaciones de AngularJS vers que la librera Angular es cargada en la seccin
<head> de la web (como en el ejemplo anterior).
En el ejemplo anterior, AngularJS es cargado en la seccin <head>, lo hacemos as porque
la llamada a angular.module slo puede hacerse despus de que haya cargado la librera
Angular.
Como podrs pensar, otra solucin completamente vlida, es cargar la librera de AngularJS
en el <body>, antes de nuestros scripts de AngularJS.
Ejemplo:
<!DOCTYPE html>
<
html
>
<
body
>
<
div
ng-app
=
"miAplicacion"
ng-controller
=
"miControlador"
>
</
div
>
<
script
src
=
></
script
>
<
script
>
varapp = angular.module(
"miAplicacion"
, []);
app.controller(
"miControlador"
,
function
($scope)
{
$scope.nombre =
"Mario"
;
$scope.apellidos =
"Flores"
;
});
</
script
>
</
body
>
</
html
>
Ficheros de una Aplicacin AngularJS

Ahora que ya sabes que son los mdulos, y como funcionan, es hora de construir tus
propios ficheros que compondrn tu aplicacin AngularJS.
Tu aplicacin debe tener al menos un archivo para el mdulo y otro archivo por cada
controlador.
Primero creamos el script para el mdulo, lo llamaremos "miAplicacion.js":
var app = angular.
module
(
"myApp"
, []);
Luego creamos los controladores. En este caso "miControlador.js":

app.controller(
"miControlador"
,
function
($scope)
{
$scope.nombre=
"Mario"
;
$scope.apellidos=
"Flores"
;
});
Por ltimo, editamos la pgina HTML para cargar estos archivos:

<!DOCTYPE html>
<
html
>
<
body
>
<
div
ng-app
=
"myApp"
ng-controller
=
"myCtrl"
>
{{ firstName + " " + lastName }}
</
div
>
<
script
src
=
></
script
>
<
script
src
=
"myApp.js"
></
script
>
<
script
src
=
"myCtrl.js"
></
script
>
</
body
>
</
html
>

Tutorial Angular Js Openwebinars

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tutorial Angular Js Openwebinars

Uploaded by

Copyright:

Available Formats

Tutorial de

Aprende ms con el Curso Online de AngularJS y TypeScript

ndice Tutorial AngularJS

Aprende ms con el Curso Online de AngularJS y TypeScript

Propiedades del Controlador

Aprende ms con el Curso Online de AngularJS y TypeScript

Explicacin del ejemplo: AngularJS se inicia automticamente cuando la pgina ha

Las expresiones en AngularJS enlazan datos a elementos HTML.

Si queremos que el cdigo sea HTML5 Vlido podemos usar tambin:

HTML5 permite atributos extendidos (hechos por ti), a partir de

Enlace de Datos en AngularJS

Aprende ms con el Curso Online de AngularJS y TypeScript

Aqu tienes el mismo ejemplo usando n

Strings (Cadenas de texto) en AngularJS

Aprende ms con el Curso Online de AngularJS y TypeScript

Aqu tienes el mismo ejemplo usando n

Aqu tienes el mismo ejemplo usando n

Aprende ms con el Curso Online de AngularJS y TypeScript

Explicacin del ejemplo: Si en el

Por ahora estamos usando

Repitiendo Elementos HTML

Aprende ms con el Curso Online de AngularJS y TypeScript

Como puedes ver, la directiva

Tambin podemos usar la directiva

Aprende ms con el Curso Online de AngularJS y TypeScript

El resultado del cdigo anterior es:

Aprende ms con el Curso Online de AngularJS y TypeScript

Explicacin de la aplicacin: La aplicacin AngularJS est definida por la directiva

Aprende ms con el Curso Online de AngularJS y TypeScript

Propiedades del Controlador

" "+ x.modelo;

Mtodos del Controlador

" "+ x.modelo;

Aprende ms con el Curso Online de AngularJS y TypeScript

Controladores en ficheros externos

Otro Ejemplo de Controlador AngularJS

Y ahora usamos el controlador en nuestra aplicacin AngularJS:

Aprende ms con el Curso Online de AngularJS y TypeScript

Aadir Filtros a Expresiones

Aadiendo Filtros a Directivas

Aprende ms con el Curso Online de AngularJS y TypeScript

Filtrando la entrada de datos

Aprende ms con el Curso Online de AngularJS y TypeScript

Ocultando elementos HTML

Aprende ms con el Curso Online de AngularJS y TypeScript

Explicacin de la Aplicacin: La aplicacin tiene una nueva propiedad por defecto

Aprende ms con el Curso Online de AngularJS y TypeScript

Ejemplo de Mdulo en AngularJS

Los Controladores ensucian el mbito Global de JavaScript

Usando un controlador perteneciente a un mdulo:

Definicin de los Mdulos

Aprende ms con el Curso Online de AngularJS y TypeScript

Ficheros de una Aplicacin AngularJS

Luego creamos los controladores. En este caso "miControlador.js":

Por ltimo, editamos la pgina HTML para cargar estos archivos:

Aprende ms con el Curso Online de AngularJS y TypeScript

Aprende ms con el Curso Online de AngularJS y TypeScript

You might also like