Lo básico de Angularjs

Transcripción

1 Lo básico de Angularjs ISIS2603 Departamento de Sistemas y Computación Universidad de los Andes rcasalla@uniandes.edu.co 1

2 Javascript Libraries 2

3 Javascript Frameworks 3

4 internet 4

5 Request Response internet API Rest 5

6 Views Html5 Controller Request Response API Rest Mock internet Javascript Angular 6

7 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 7

8 Concept Template Directives Model Scope Expressions Compiler Filter View Data Binding Controller Dependency Injection Injector Module Service Description HTML with additional markup extend HTML with custom attributes and elements the data shown to the user in the view and with which the user interacts context where the model is stored so that controllers, directives and expressions can access it access variables and functions from the scope parses the template and instantiates directives and expressions formats the value of an expression for display to the user what the user sees (the DOM) sync data between the model and the view the business logic behind views Creates and wires objects and functions dependency injection container a container for the different parts of an app including controllers, services, filters, directives which configures the Injector reusable business logic independent of views Tomado de: rcasalla@uniandes.edu.co 8

9 Ejemplo 1 Tomado de En plunker: rcasalla@uniandes.edu.co 9

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 rcasalla@uniandes.edu.co 10

11 <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 Angular markups) rcasalla@uniandes.edu.co 11

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> Nuevos elementos del marcado ng-app ng-init input ng-model {{ }} Expresiones y filtros </div> Angular Template (HTML con marcadores Angular) rcasalla@uniandes.edu.co 12

13 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. rcasalla@uniandes.edu.co 13

14 Directives: Ejemplo <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 databinding, input state control, and validation. 14

15 15

16 <!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> Invoice: Quantity: Costs: Total: $ rcasalla@uniandes.edu.co 16

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. rcasalla@uniandes.edu.co 17

18 Tomado de: template Angular compiler view 18

19 Ejemplo 2 Tomado de: En plunker: Template Parte 1 Completo rcasalla@uniandes.edu.co 19

20 Ejemplo 2: El template 20

21 Ejemplo 2: El template 21

22 Ejemplo 2: Parte 1 rcasalla@uniandes.edu.co 22

25 Ejemplo 2: Completo 25

26 26

27 27

28 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. 28

29 Aplicaciones en Angular: Ejemplo Módulo book Módulo principal mainapp <<dependency>> tpl.html ctl.js srv.js <<dependency>> Módulo author app.js tpl.html ctl.js srv.js 29

30 Modules Un Module en Angular contiene un conjunto de directivas, servicios, fábricas, constantes, controladores 30

31 Imagen tomada de: 31

32 Ejemplo básico de una aplicación tomado de:

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. 33

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). rcasalla@uniandes.edu.co 34

35 35

36 36

37 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. rcasalla@uniandes.edu.co 37

38 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 rcasalla@uniandes.edu.co 38 Hello seguido del valor que contenga el argumento

39 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 + '!'; }; }); <div ng-app="myapp"> <div> {{ 'World' greet }} </div> </div> rcasalla@uniandes.edu.co 39

40 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',...); rcasalla@uniandes.edu.co 40

41 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 rcasalla@uniandes.edu.co 41

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) rcasalla@uniandes.edu.co 42

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) { }; this.pay = function pay() { }; return amount * this.usdtoforeignrates[outcurr] / this.usdtoforeignrates[incurr]; 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 43

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.pay = function pay() { }; window.alert("thanks!"); this.usdtoforeignrates[incurr]; Se está definiendo en el scope 4 nuevos atributos y 3 métodos angular.module('invoice1', []).controller('invoicecontroller',finvoicecontroller); 44

45 Los nuevos atributos y métodos se pueden utilizar desde el template que declara el controles <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> 45

46 Los nuevos atributos y métodos se pueden utilizar desde el template que declara el controles <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> 46

47 47

48 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 50

49 Más sobre los módulos 51

50 Angularjs en ejecución 52

51 Estructura de los proyectos en Angularjs (Vista de desarrollo Referencias: 7/13-step-guide-angularjs-modularization/ 53