Post on 28-Nov-2018
Lo básico de Angularjs
ISIS2603
Departamento de Sistemas y Computación
Universidad de los Andes
1
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co
Javascript Libraries
2
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co
Javascript Frameworks
3
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 4
internet
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 5
internet
Request
Response
API
Rest
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 6
Request
Response
API
Rest MockControllerViews
Html5
Javascript Angular
internet
Elementos claves de Angular
Extiende HTML con nuevos elementos de
marcado, atributos
El desarrollador entiende su aplicación en los
templates html
Encadena los datos (data binding) de la vista
con el modelo en el controlador
Utiliza Inyección de dependencias
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 7
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 8
Concept Description
Template HTML with additional markup
Directives extend HTML with custom attributes and elements
Model the data shown to the user in the view and with which the user
interacts
Scope context where the model is stored so that controllers, directives and
expressions can access it
Expressions access variables and functions from the scope
Compiler parses the template and instantiates directives and expressions
Filter formats the value of an expression for display to the user
View what the user sees (the DOM)
Data Binding sync data between the model and the view
Controller the business logic behind views
Dependency Injection Creates and wires objects and functions
Injector dependency injection container
Module a container for the different parts of an app including controllers,
services, filters, directives which configures the Injector
Service reusable business logic independent of views
Tomado de: https://docs.angularjs.org/guide/concepts
Ejemplo 1
Tomado de
https://docs.angularjs.org/guide/concepts
En plunker:
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 9
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 10
<div >
<b>Invoice:</b>
<div> Quantity: : <input type="number" min="0" > </div>
<div> Costs: </div> <input type="number" min="0" >
<div> <b>Total:</b> </div>
</div>
HTML
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 11
Angular Template (HTML con Angular markups)
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div> Quantity: <input type="number" min="0" ng-model="qty">
</div>
<div> Costs: <input type="number" min="0" ng-model="cost">
</div>
<div> <b>Total:</b> {{qty * cost | currency}} </div>
</div>
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 12
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div> Quantity: <input type="number" min="0" ng-model="qty">
</div>
<div> Costs: <input type="number" min="0" ng-model="cost">
</div>
<div> <b>Total:</b> {{qty * cost | currency}} </div>
</div>
Angular Template (HTML con marcadores Angular)
ng-app
ng-init
input ng-model
{{ }}
Nuevos
elementos del
marcado
Expresiones y filtros
Directives
Las directivas son marcadores en un
elemento DOM (como un atributo, nombre
del elemento, comentario o clase CSS)
El compilador de HTML de Angular:
Asocia con el elemento DOM un comportamiento
especifico, o puede,
Transformar el elemento DOM y sus hijos.
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 13
Directives: Ejemplo
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 14
<input type="number" min="0" ng-model="qty">
El elemento <input> corresponde (matches) con la directiva ngModel
“HTML input element control. When used
together with ngModel, it provides data-
binding, input state control, and validation.”
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 15
https://docs.angularjs.org/api
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 16
Invoice:
Quantity:
Costs:
Total: $2.00
12
<!doctype html>
<html lang="en">
<head> <meta charset="UTF-8">
<title>Example - example-guide-concepts-1-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
</head>
<body >
<div ng-app ng-init="qty=1;cost=2">
<b>Invoice:</b>
<div> Quantity: <input type="number" min="0" ng-model="qty"> </div>
<div> Costs: <input type="number" min="0" ng-model="cost"> </div>
<div> <b>Total:</b> {{qty * cost | currency}} </div>
</div>
</body>
</html>
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 17
ng-model="qty"
ng-model="cost"
Las variables definidas utilizando ng-model en el template, se transforman en
nodos DOM. Además, quedan creadas en una zona lógica de Angular llamada el
scope
Angular se ocupa de establecer un link entre las variables del DOM y el scope,
de tal forma que cuando se actualicen sus valores en un lado, se actualizará
automáticamente en el otro.
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 18
Angular
“compiler”
template viewTomado de:
https://docs.angularjs.org/guide/databinding
Ejemplo 2
Tomado de:
http://jsfiddle.net/slav123/75m7e/3/
En plunker:
Template
Parte 1
Completo
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 19
Ejemplo 2: El template
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 20
Ejemplo 2: El template
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 21
Ejemplo 2: Parte 1
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 22
Ejemplo 2: Parte 1
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 23
Ejemplo 2: Parte 1
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 24
Ejemplo 2: Completo
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 25
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 26
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 27
Aplicaciones en Angular
Una aplicación es un conjunto de módulos
Cada módulo debe ocuparse de un conjunto
cohesivo de elementos para manipular un
concepto lógico del dominio del problema.
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 28
Aplicaciones en Angular: Ejemplo
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 29
Módulo
principal
mainAPP
app.js
<<dependency>>
tpl.html
ctl.js
srv.js
<<dependency>>
Módulo
book
Módulo
author
tpl.html
ctl.js
srv.js
Modules
Un Module en Angular contiene un conjunto
de directivas, servicios, fábricas, constantes,
controladores…
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 30
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 31
Imagen tomada de: http://conceptf1.blogspot.com.co/2014/05/learning-angularjs-part5.html
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 32
Ejemplo básico de una aplicación tomado de:
http://www.w3schools.com/angular/angular_application.asp
http://plnkr.co/edit/uiCcNJQw9r4N9KaThyEv?p=info
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 33
1. Escribir en el área de texto
2. Borrar el área de texto
3. Desplegar cuantos caracteres quedan disponibles
4. Al Salvar, indicar que no se puede salvar.
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 34
Esta aplicación tiene un único módulo.
El módulo tiene un controlador.
El template asocia la aplicación e indica el controlador que va a utilizar (en
este caso solo hay uno).
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 35
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 36
Cómo se declara un módulo
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 37
// declare a module
var myAppModule = angular.module('myApp', []);
Nombre del módulo
Dependencias del módulo. En este ejemplo
no tiene dependencias pero los [] no se
pueden omitir. Si se omiten significa que
estoy “cargando “ el modulo y no
declarándolo.
Cómo registro cosas en un módulo
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 38
// declare a module
var myAppModule = angular.module('myApp', []);
// in this example we will create a greeting filter
myAppModule.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});
Se está registrando en el módulo una función filtro que se
llama greet.
La función recibe un argumento (name) y devuelve un
“Hello” seguido del valor que contenga el argumento
Cómo registro cosas en un módulo
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 39
// declare a module
var myAppModule = angular.module('myApp', []);
// in this example we will create a greeting filter
myAppModule.filter('greet', function() {
return function(name) {
return 'Hello, ' + name + '!';
};
});
<div ng-app="myApp">
<div>
{{ 'World' | greet }}
</div>
</div>
Cómo registro cosas en un módulo
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 40
// declare a module
angular.module('myModule', []).
value('a', 123).
factory('a', function() { … }).
directive('directiveName', ...).
filter('filterName', ...);
controler(‘controllerName', ...);
Controladores
Cuando se necesita manipulaciones más
complejas se desarrollan en un controlador
Cada controlador se asocia con un elemento
del DOM
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 41
En el ejemplo anterior se requiere que los costos puedan ser
dados en 3 monedas distintas y que el total sea dado para cada
una de las monedas
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 42
Un controlador en javascript es una función constructora utilizada para aumentar el
scope de Angular
Cuando se amarra un controlador a un nodo del DOM , Angular instancia el objeto
controlador usando la función con la que se definió.
Un Controlador sirve para:
• Inicializar el estado de scope
• Adicionar comportamiento al objeto scope (en el siguiente ejemplo this y scope es
lo mismo)
43
angular.module('invoice1', [])
.controller('InvoiceController', function() {
this.qty = 1;
this.cost = 2;
this.inCurr = 'EUR';
this.currencies = ['USD', 'EUR', 'CNY'];
this.usdToForeignRates = { USD: 1, EUR: 0.74, CNY: 6.09 };
this.total = function total(outCurr) {
return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr);
};
this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
return amount * this.usdToForeignRates[outCurr] / this.usdToForeignRates[inCurr];
};
this.pay = function pay() {
window.alert("Thanks!");
};
});
Definición del controlador
'InvoiceController',
Dentro de la definición del
módulo
'invoice1',
El controlador se registró
dentro del módulo
44
function fInvoiceController() {
this.qty = 1;
this.cost = 2;
this.inCurr = 'EUR';
this.currencies = ['USD', 'EUR', 'CNY'];
this.usdToForeignRates = { USD: 1, EUR: 0.74, CNY: 6.09 };
this.total = function total(outCurr) {
return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr);
};
this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) {
return amount * this.usdToForeignRates[outCurr] /
this.usdToForeignRates[inCurr];
};
this.pay = function pay() {
window.alert("Thanks!");
};
}
angular.module('invoice1', [])
.controller('InvoiceController',fInvoiceController);
Se está definiendo en el scope
4 nuevos atributos y 3
métodos
45
<div ng-app="invoice1" ng-controller="InvoiceController as invoice"><b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
</div>
<div>
Costs: <input type="number" min="0" ng-model="invoice.cost" required >
<select ng-model="invoice.inCurr">
<option ng-repeat="c in invoice.currencies">{{c}}</option></select>
</div>
<div>
<b>Total:</b>
<span ng-repeat="c in invoice.currencies">
{{invoice.total(c) | currency:c}}</span>
<button class="btn" ng-click="invoice.pay()">Pay</button></div>
</div>
Los nuevos atributos y
métodos se pueden utilizar
desde el template que declara
el controles
46
<div ng-app="invoice1" ng-controller="InvoiceController as invoice"><b>Invoice:</b>
<div>
Quantity: <input type="number" min="0" ng-model="invoice.qty" required >
</div>
<div>
Costs: <input type="number" min="0" ng-model="invoice.cost" required >
<select ng-model="invoice.inCurr">
<option ng-repeat="c in invoice.currencies">{{c}}</option></select>
</div>
<div>
<b>Total:</b>
<span ng-repeat="c in invoice.currencies">
{{invoice.total(c) | currency:c}}</span>
<button class="btn" ng-click="invoice.pay()">Pay</button></div>
</div>
Los nuevos atributos y
métodos se pueden utilizar
desde el template que declara
el controles
47
Más sobre los módulos
En un módulo se puede definir varios tipos
de elementos:
Dependencias con otros módulos
Configuraciones
Constantes
Rutas
Controladores
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 50
Más sobre los módulos
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 51
Angularjs en ejecución
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 52
Estructura de los proyectos en
Angularjs (Vista de desarrollo Referencias:
http://entwicklertagebuch.com/blog/2013/10/how-
to-structure-large-angularjs-applications/
https://www.safaribooksonline.com/blog/2014/03/2
7/13-step-guide-angularjs-modularization/
Material preparado por Rubby Casallas
rcasalla@uniandes.edu.co 53