Informatica Dantesca: agosto 2016

1. Enlaces de interés.

Agradecer a las personas que han credo estos recursos.

2. Depuración de errores.

Cuando algun ejemplo no funciona bien, sobre la página abierta en Chrome se aprieta el boton derecho y se selecciona inspeccionar. Aparece los detalles de errores y tambien se pueden cambiar variables como document.location.hash para provar como funciona el ng-route

Imagen de la inspeccion

La explicación de los errores para ángular se hacen mediante una refencia a una url de angular que es muy explícita.

3. Introducción

ng-app: Para crear una nueva aplicacion. Esta es la aplicación clásica de ejemplo.

ng-model: Establece una variable i le establece un "bind" o acople. Esta variable (en el ejemplo antrior "nombre"se puede mostrar con {{nombre}}. Ojo esta directiva solo funciona en elementos HTML de enttrada de datos tipo input, texarea etc. No funciona en divs con contenteditable=true !!

ng-class:Establece una clase CSS a un apartado como el <div>, pero con la ventaja que esta clase se puede asignar dinámicamente y se ven los cambios al instante.

ng-bind: es equivalente a {{}} cuando hace referencia a una variable. Pero {{}} va más alla.

{{expresión}}: Sirve para indicar expresiones, pudiendo utilizar variables junto con operadores ej: {{1+2}}

<!DOCTYPE html>
<html lang="en-US">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <body>

        <div ng-app="">
            <p>Name : <input type="text" ng-model="nombre"></p>
            <h1>Hello {{nombre}}</h1>
        </div>

    </body>
</html>

ng-init: Inicializa una variabe ej: <div ng-init="mivariable='hola'> {{mivariable}} </div>

ng-repeat: para repetir elementos de un array ej: <p ng-repeat="x in aArray"> x.name </p>

ng-controller: Se debe definir dentro de un objeto application referenciado en el ng-app. Como su nombre indica es el controlador dentor del esquema MVC (modelo-vista-controlador). Veamos un ejemplo:
var application=angular.module('app01', []);
application.controller('crtl01',function($scope){
$scope.myFavLang='None';
});

ng-include: Incluye un fichero (ojo: no funciona abriendo con file://. Funciona con protocolo http y similares. Por tanto debe probarse abriendo un servidor http) ej: ng-include="'file01.html'". Tener presente que requiere comillas dobles seguidas de comillas simples !!

ng-route: Para enrutar.
Ojo: cuando definamos un controlador, necesita la dependencia "ngRoute" en la creación de la aplicación.
Ojo: Requiere que se adjunte su referencia
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>

filter: ej {{name | upercase }} Para filtrar el contenido

Las variables:
$route
$routeProvider

y las palabras:
template (tiene preferencia a templateUrl)
templateUrl
redirectTo

se utilizan en una aplicación en la función config:

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

app.config(function($routeProvider) {
$routeProvider
.when("/", {
template="Welcome user"
})
.when("/bis", {
templateUrl="welcomeagain.html"
})
.otherwise({
redirectTo="/"
})
});

http service: lo utilizamos en un controlador de la siguiente manera:
var app=angular.module('myApp',[]);

app.controller('myHttpCrtl',function($scope, $http) {
$http.get("http://127.0.0.1/AngularJS/data.json")
.success( funtion (respose){
$scope.persons=response.records;
});
});

para ver como varia nuestras variables se utiizan trucos como este
$scope.watch('myVariable',function(newValue, oldValue) {
console.log(oldValue);
console.log(newValue);
});

Para actualizar variables
$scope.digest(

Ver eventos que hay que meterle el digest
document.querySelector('myInput').addEventListener('click', function(){
$scope.myValue='el que sea';

service
factory
provider

Informatica Dantesca

Páginas

miércoles, 31 de agosto de 2016

HTML5 stuff

jueves, 25 de agosto de 2016

Chuletario de Angularjs

viernes, 12 de agosto de 2016

Desarrollando en Web. Enlaces interesantes (1)

AngularJS