jueves, 25 de agosto de 2016

Chuletario de Angularjs

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

No hay comentarios :

Publicar un comentario