Agradecer a las personas que han credo estos recursos.
- Tutoriales Scotch.io
- W3Schools
- Cursos Thinkster
- Tutorials Point
- Video Tutorial de Codedamn (coleccion de videos)
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 |
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