lo básico de javascript - uniandesisis2603/dokuwiki/lib/... · lo básico de angularjs isis2603...
TRANSCRIPT
![Page 1: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/1.jpg)
Lo básico de Angularjs
ISIS2603
Departamento de Sistemas y Computación
Universidad de los Andes
1
Material preparado por Rubby Casallas
![Page 6: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/6.jpg)
Material preparado por Rubby Casallas
Request
Response
API
Rest MockControllerViews
Html5
Javascript Angular
internet
![Page 7: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/7.jpg)
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
![Page 8: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/8.jpg)
Material preparado por Rubby Casallas
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
![Page 9: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/9.jpg)
Ejemplo 1
Tomado de
https://docs.angularjs.org/guide/concepts
En plunker:
Material preparado por Rubby Casallas
![Page 10: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/10.jpg)
Material preparado por Rubby Casallas
<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
![Page 11: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/11.jpg)
Material preparado por Rubby Casallas
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>
![Page 12: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/12.jpg)
Material preparado por Rubby Casallas
<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
![Page 13: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/13.jpg)
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
![Page 14: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/14.jpg)
Directives: Ejemplo
Material preparado por Rubby Casallas
<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.”
![Page 16: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/16.jpg)
Material preparado por Rubby Casallas
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>
![Page 17: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/17.jpg)
Material preparado por Rubby Casallas
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.
![Page 18: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/18.jpg)
Material preparado por Rubby Casallas
Angular
“compiler”
template viewTomado de:
https://docs.angularjs.org/guide/databinding
![Page 19: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/19.jpg)
Ejemplo 2
Tomado de:
http://jsfiddle.net/slav123/75m7e/3/
En plunker:
Template
Parte 1
Completo
Material preparado por Rubby Casallas
![Page 28: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/28.jpg)
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
![Page 29: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/29.jpg)
Aplicaciones en Angular: Ejemplo
Material preparado por Rubby Casallas
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
![Page 30: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/30.jpg)
Modules
Un Module en Angular contiene un conjunto
de directivas, servicios, fábricas, constantes,
controladores…
Material preparado por Rubby Casallas
![Page 31: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/31.jpg)
Material preparado por Rubby Casallas
Imagen tomada de: http://conceptf1.blogspot.com.co/2014/05/learning-angularjs-part5.html
![Page 32: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/32.jpg)
Material preparado por Rubby Casallas
Ejemplo básico de una aplicación tomado de:
http://www.w3schools.com/angular/angular_application.asp
http://plnkr.co/edit/uiCcNJQw9r4N9KaThyEv?p=info
![Page 33: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/33.jpg)
Material preparado por Rubby Casallas
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.
![Page 34: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/34.jpg)
Material preparado por Rubby Casallas
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).
![Page 37: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/37.jpg)
Cómo se declara un módulo
Material preparado por Rubby Casallas
// 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.
![Page 38: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/38.jpg)
Cómo registro cosas en un módulo
Material preparado por Rubby Casallas
// 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
![Page 39: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/39.jpg)
Cómo registro cosas en un módulo
Material preparado por Rubby Casallas
// 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>
![Page 40: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/40.jpg)
Cómo registro cosas en un módulo
Material preparado por Rubby Casallas
// declare a module
angular.module('myModule', []).
value('a', 123).
factory('a', function() { … }).
directive('directiveName', ...).
filter('filterName', ...);
controler(‘controllerName', ...);
![Page 41: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/41.jpg)
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
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
![Page 42: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/42.jpg)
Material preparado por Rubby Casallas
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)
![Page 43: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/43.jpg)
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
![Page 44: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/44.jpg)
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
![Page 45: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/45.jpg)
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
![Page 46: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/46.jpg)
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
![Page 47: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/47.jpg)
47
![Page 48: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/48.jpg)
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
![Page 51: Lo básico de Javascript - Uniandesisis2603/dokuwiki/lib/... · Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes 1 Material preparado](https://reader031.vdocuments.pub/reader031/viewer/2022021910/5bfdea7e09d3f219518c0959/html5/thumbnails/51.jpg)
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