Tutorial Angular Js Openwebinars PDF

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 . Esto mejora la carga de la pgina, ya que la carga de HTML no est
</body>
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 , el HTML mostrar la expresin tal como es, sin resolver.
ng-app
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 , pero tambin se puede usar
ng- 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
>
Aqu tienes el mismo ejemplo usando n :

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 se encarga de repetir un elemento HTML:
ng-repeat

<
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-modeltambin 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 Descripcin
currency Da formato de moneda a un nmero.
filter Selecciona un subconjunto de elementos de un array.
lowercase Da formato a una cadena convirtindola en minsculas.
orderBy Ordena un array segn una expresin
uppercase 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 convierte una cadena en maysculas: Ejemplo:
uppercase
<
div
ng-app
=
""
ng-controller
=
"personaController"
>
<
p
>El nombre es {{ persona.nombre | uppercase }}</
p
>
</
div
>
El filtro l convierte una cadena de texto a minsculas: Ejemplo:

owercase
<
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 oculta o muestra un elemento HTML. Ejemplo:
ng-show
<
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 define un evento click de AngularJS. Ejemplo:
ng-click
<
div
ng-app
=
""
ng-controller
=
"miController"
>
<
button
ng-click
=
"count = count + 1"
>Haz click!</
button
>
<
p
>{{ count }}</
p
>
</
div
>
Ocultando elementos HTML

La directiva define la visibilidad de una aplicacin.
ng-show
El valor n (valor booleano) hace que el elemento sea visible.

g-show="true"
El valor n (valor booleano) hace que el elemento sea invisible.

g-show="false"

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 . La funcin mostrarocultar()
false
cambiar los valores de
mivariableentre trueo . De esta manera mostraremos u
false
ocultaremos el elemento prrafo pcon 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
>
<
divng-app
=
"miAplicacion"
ng-controller
=
"miControlador"
>
</
div>
<
scriptsrc
=
></
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 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial Angular Js Openwebinars PDF

Cargado por

Copyright:

Formatos disponibles

Tutorial de

Aprenders de forma profesional a realizar aplicaciones web con JavaScript gracias a

Si quieres convertirte en un desarrollador profesional inscribete en nuestro

Aprende ms con el Curso Online de AngularJS y TypeScript

Enlace de Datos en AngularJS

Strings (Cadenas de texto) en AngularJS

Repitiendo Elementos HTML

Aprende ms con el Curso Online de AngularJS y TypeScript

Mtodos del Controlador

Controladores en ficheros externos

Otro Ejemplo de Controlador AngularJS

Aadir Filtros a Expresiones

Aadiendo Filtros a Directivas

Filtrando la entrada de datos

Ocultando elementos HTML

Ejemplo de Mdulo en AngularJS

Los Controladores ensucian el mbito Global de JavaScript

Definicin de los Mdulos

Ficheros de una Aplicacin AngularJS

Aprende ms con el Curso Online de AngularJS y TypeScript

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

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

<div ng-app="" ng-init="nombre='Paco';apellidos='Garca Fernndez'">

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

Tambin podemos usar la directiva

Aprende ms con el Curso Online de AngularJS y TypeScript

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.

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

Mtodos del Controlador

Aprende ms con el Curso Online de AngularJS y TypeScript

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

El filtro l convierte una cadena de texto a minsculas: Ejemplo:

Aadiendo Filtros a Directivas

Aprende ms con el Curso Online de AngularJS y TypeScript

Aprende ms con el Curso Online de AngularJS y TypeScript

Ocultando elementos HTML

El valor n (valor booleano) hace que el elemento sea visible.

El valor n (valor booleano) hace que el elemento sea invisible.

Aprende ms con el Curso Online de AngularJS y TypeScript

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

Con el uso de mdulos mantenemos nuestro cdigo limpio y bien organizado.

A continuacin te pongo un ejemplo de aplicacin AngularJS que usa mdulos.

Aprende ms con el Curso Online de AngularJS y TypeScript

Los Controladores ensucian el mbito Global de JavaScript