Angular JS PDF

Angular
Conocimientos
básicos requeridos
mucho javascript
¿Qué es angular?
Un framework front-end
divide la vista utilizando un patron

del tipo MVVM que es una variante del MVC
¿Beneficios?
Separar el backend del front-end
Modularizar el trabajo de front-end

no necesariamente implica menos código
pero si mucho más orden
Otras ventajas
En angular existen las directivas
Así como en rails para todo existe una gema

en angular para casi todo existe una directiva
Es lo mismo Angular
que Jquery
No, no tienen nada que ver, se pueden
ocupar en conjunto, pero son cosas distintas
Aviso importante
cuidado con la documentación
va a partir en todo caso con
Versión actual de angular: 1.4.3

las versiones no son completamente retrocompatibles.
en nuestro html, cargamos
angular, y cargamos nuestro
modulo principal
<script src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.4.3/angular.min.js"></script>
<script src="app.js"></script>
Creamos el modulo
principal, lo llamaremos app
angular.module('app', []);
Agregamos la directiva de ng-
app, que sirve para cargar el
modulo app
<html ng-app=“app”>
todo el html dentro de ng-app

es una aplicación angular.
podemos cargar ng-
app en otra etiqueta
<div ng-app=“app”>
solo el div respectivo es una aplicación

angular
Ahora probemos que
funciona
<div class="container">
<h1>{{"hola" + " mundo"}}</h1>
</div>
Los controllers
A diferencia de rails, los controllers de angular
son gorditos, y los modelos delgados.
Los controllers manejan la lógica del negocio, los

modelos son simplemente las propiedades
definidas dentro del controller
Creando nuestro
primer controller
en el archivo app.js
var app = angular.module('app', []);

app.controller('PhotoController', ['$scope', function ($scope) {
$scope.saludar = "Hola mundo";
}]);
en este caso nuestro modelo

tendría el campo saludar
Utilizando el primer
controller
en el index
<body ng-app="app">
<div class="container" ng-controller="PhotoController">
<h1>{{saludar}}</h1>
</div>
</body>
Incrementando y
mostrando
en el index
<body ng-app="app">
<div class="container" ng-controller="PhotoController" ng-init="a = 1">
<h1>{{a}}</h1>
<input type="button" value="incrementar" ng-click="a = a + 1">
</div>
</body>
Delegando la lógica la
controller
el ng-init es simplemente un valor inicial, lo
sacamos del html y lo ponemos en el controller
<body ng-app="app">
<h1>{{a}}</h1>
<input type="button" value="incrementar" ng-click="a = a + 1">
</div>
</body>
controller
el ng-click ahora llamará a un método en el controller
<body ng-app="app">
<h1>{{a}}</h1>
<input type="button" value="incrementar" ng-click=“incrementar()”>
</div>
</body>
controller
y el controller finalmente queda:

$scope.a = 1
$scope.incrementar = function(){
$scope.a = $scope.a + 1
}
}]);
Colecciones de datos
Eventualmente vamos a querer mostrar muchas
fotos, o muchos elementos, por ejemplo para hacer
el index de cualquier recurso, para eso ocuparemos
colecciones de datos.

$scope.items = [1,2,3,4,5]
}]);
<body ng-app="app">
<h3 ng-repeat="item in items">{{item}}</h2>
</div>
</body>
Un index no contiene un
array simple, tiene hashes
En una aplicación rest el index es un array con
hashs, donde cada elemento sería una foto en el caso del
recurso de fotos
Para probarlo vamos a cargar un par de fotos de gatos

$scope.photos = [{photo:"https://placekitten.com/g/200/300"}, {photo:"http
placekitten.com/g/500/300"}]
}]);
<body ng-app="app">
<div ng-repeat="cat_picture in photos">
<img ng-src="{{cat_picture.photo}}">
</div>
</body>
Consumiendo una
API
Creando una aplicación para transformar
bitcoins a dólares
Dos cosas que nos
falta aprender
ng-model
Ng-model
permite mapear datos de la vista al modelo
o sea si en la vista tenemos:
<input type="text" ng-model="bitcoins">
en el controller respectivo tenemos
$scope.bitcoins
$http
$http es una dependencia que nos permite hacer llamados
ajax a un servicio web
es muy parecido al método $.ajax de jQuery
$http(options)
.success(function(data){
console.log($scope.bitcoins)
$scope.results = data
$scope.price = data.amount
console.log(data);
})
Como es una dependencia,
tenemos que injectarla.

app.controller('BitController', ['$scope', '$http', function ($scope, $http) {
}]);
$http recibe opciones
dentro de un hash
options = {
url: "https://montanaflynn-bitcoin-exchange-
rate.p.mashape.com/prices/buy",
method: 'GET',
headers: {
‘X-Mashape-Key’:
‘yvU0GDeVzomshLIpyOJyuOq7BQxbp1k6xcGjsnerwWf9tuSg
D9',
"Accept": “text/plain"
},
params: {
qty: '5',
}
};
Hacemos el llamado
http
$http(options)
.success(function(data){
console.log($scope.bitcoins)
$scope.results = data
$scope.price = data.amount
console.log(data);
})
.error(function(data){
console.log("error")
})
y listo, el proyecto se puede clonar
de
https://github.com/DesafioLatam/ng-bitcoin-transformer

Angular JS PDF

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Angular JS PDF

Caricato da

Copyright:

Formati disponibili

Angular

divide la vista utilizando un patron

Modularizar el trabajo de front-end

Así como en rails para todo existe una gema

Versión actual de angular: 1.4.3

todo el html dentro de ng-app

solo el div respectivo es una aplicación

Los controllers manejan la lógica del negocio, los

var app = angular.module('app', []);

en este caso nuestro modelo

var app = angular.module('app', []);

var app = angular.module('app', []);

Para probarlo vamos a cargar un par de fotos de gatos

o sea si en la vista tenemos:

<input type="text" ng-model="bitcoins">

en el controller respectivo tenemos

var app = angular.module('app', []);

Potrebbero piacerti anche