Lo básico de Angularjs
ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes
Material preparado por Rubby Casallas
[email protected]
1
Javascript Libraries
Material preparado por Rubby Casallas
[email protected]
2
Javascript Frameworks
Material preparado por Rubby Casallas
[email protected]
3
internet
Material preparado por Rubby Casallas
[email protected]
4
Request internet
API Rest
Response
Material preparado por Rubby Casallas
[email protected]
5
Request Views Html5
Controller Response
API Rest
Mock
internet
Javascript Angular Material preparado por Rubby Casallas
[email protected]
6
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
[email protected]
7
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 Material preparado por Rubby Casallas
[email protected]
8
Ejemplo 1
Tomado de https://docs.angularjs.org/guide/concepts
En plunker:
Material preparado por Rubby Casallas
[email protected]
9
Invoice:
Quantity: :
Costs:
Total:
HTML
Material preparado por Rubby Casallas
[email protected]
10
Invoice:
Quantity:
Costs:
Total: {{qty * cost | currency}}
Angular Template (HTML con Angular markups)
Material preparado por Rubby Casallas
[email protected]
11
Invoice:
Quantity:
Nuevos elementos del marcado ng-app ng-init
input ng-model
Costs:
{{ }}
Expresiones y filtros
Total: {{qty * cost | currency}}
Angular Template (HTML con marcadores Angular)
Material preparado por Rubby Casallas
[email protected]
12
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
[email protected]
13
Directives: Ejemplo
El elemento corresponde (matches) con la directiva ngModel
“HTML input element control. When used together with ngModel, it provides databinding, input state control, and validation.”
Material preparado por Rubby Casallas
[email protected]
14
https://docs.angularjs.org/api
Material preparado por Rubby Casallas
[email protected]
15
<meta charset="UTF-8"> Example - example-guide-concepts-1-production <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js">
Invoice:
Quantity:
Costs:
Total: {{qty * cost | currency}}
Invoice: Quantity: 1 2 Costs: Total: $2.00 Material preparado por Rubby Casallas
[email protected]
16
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
[email protected]
17
Tomado de: https://docs.angularjs.org/guide/databinding
template
Material preparado por Rubby Casallas
[email protected]
Angular “compiler”
view
18
Ejemplo 2
Tomado de:
http://jsfiddle.net/slav123/75m7e/3/
En plunker:
Template Parte 1 Completo Material preparado por Rubby Casallas
[email protected]
19
Ejemplo 2: El template
Material preparado por Rubby Casallas
[email protected]
20
Ejemplo 2: El template
Material preparado por Rubby Casallas
[email protected]
21
Ejemplo 2: Parte 1
Material preparado por Rubby Casallas
[email protected]
22
Ejemplo 2: Parte 1
Material preparado por Rubby Casallas
[email protected]
23
Ejemplo 2: Parte 1
Material preparado por Rubby Casallas
[email protected]
24
Ejemplo 2: Completo
Material preparado por Rubby Casallas
[email protected]
25
Material preparado por Rubby Casallas
[email protected]
26
Material preparado por Rubby Casallas
[email protected]
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
[email protected]
28
Modules
Un Module en Angular contiene un conjunto de directivas, servicios, fábricas, constantes, controladores…
Material preparado por Rubby Casallas
[email protected]
29
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
[email protected]
30
1. 2. 3. 4.
Escribir en el área de texto Borrar el área de texto Desplegar cuantos caracteres quedan disponibles Al Salvar, indicar que no se puede salvar.
Material preparado por Rubby Casallas
[email protected]
31
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
[email protected]
32
Material preparado por Rubby Casallas
[email protected]
33
Material preparado por Rubby Casallas
[email protected]
34
Cómo se declara un módulo // 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.
Material preparado por Rubby Casallas
[email protected]
35
Cómo registro cosas en un módulo // 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 Material preparado por Rubby Casallas “Hello” seguido del valor que contenga el argumento 36
[email protected]
Cómo registro cosas en un módulo // 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 + '!'; }; });
{{ 'World' | greet }}
Material preparado por Rubby Casallas
[email protected]
37
Cómo registro cosas en un módulo // declare a module
angular.module('myModule', []). value('a', 123). factory('a', function() { … }). directive('directiveName', ...). filter('filterName', ...); controler(‘controllerName', ...);
Material preparado por Rubby Casallas
[email protected]
38
Controladores
Cuando se necesita manipulaciones más complejas se desarrollan en un controlador Cada controlador se asocia con un elemento del DOM
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
[email protected]
39
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)
Material preparado por Rubby Casallas
[email protected]
40
Definición del controlador 'InvoiceController', angular.module('invoice1', []) .controller('InvoiceController', function() {
Dentro de la definición del módulo
this.qty = 1;
'invoice1',
this.cost = 2; this.inCurr = 'EUR';
this.currencies = ['USD', 'EUR', 'CNY']; this.usdToForeignRates = { USD: 1, EUR: 0.74, CNY: 6.09 };
El controlador se registró dentro del módulo
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!"); };
});
41
function fInvoiceController() { this.qty = 1;
Se está definiendo en el scope 4 nuevos atributos y 3 métodos
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);
42
Los nuevos atributos y métodos se pueden utilizar desde el template que declara el controles
Invoice:
Quantity:
Costs: {{c}}
Total:
{{invoice.total(c) | currency:c}} Pay
43
Los nuevos atributos y métodos se pueden utilizar desde el template que declara el controles
Invoice:
Quantity:
Costs: {{c}}
Total:
{{invoice.total(c) | currency:c}} Pay
44
45
