Tutoriales Angular (Autoguardado)

Tutorial 1:
https://www.youtube.com/watch?v=bLx80N9k-8A
<!DOCTYPE HTML>
<html lang="en" ng-app>
<head>
<title>Primera aplicacion Angularjs</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<script type="text/javascript" src="js/angular.min.js"></script>
<head>
<body>
<h1>Hola, {{name}}</h1>
<input type="text" ng-model="name">
</body>
</html>
Resultado:
Tutorial 2:
https://www.youtube.com/watch?v=0mW8jRXUhT8
Establecer un comentario por defecto:

<!DOCTYPE HTML>
<html lang="en" ng-app>
<head>
<head>
<body>
<h1>Hola, {{name || 'Hola chicos' }}</h1>
<input type="text" ng-model="name">
</body>
</html>
Resultado:
Si escribo algo empieza a cambiar:
Otro ejercicio:
otra forma de llamar al angular:
Tercer tutorial:
Codigo del Index:
<!DOCTYPE HTML>
<html lang="en" ng-app = "MyFirstApp">
<head>
<meta charset="utf-8">

<script src="controller.js"></script>
<head>
<body ng-controller = "FirstController">
{{"Hola"+ nombre}}
</body>
</html>
Codigo controller:
var app = angular.module("MyFirstApp", []);
app.controller("FirstController",function($scope){
$scope.nombre = "CF";
});
Resultado tuto 3:
Fuente:
https://www.youtube.com/watch?v=VrbDYpAj4Gw&list=PL5436F268E4A02940&index=3
Tutorial 4:
4.- Curso AngularJS - Módulos
https://www.youtube.com/watch?v=V_1PL0n2mxw&list=PL5436F268E4A02940&index=4
Ngresource conexión con una API de twitter o Facebook en la primera línea vemos un solo modulo
Llamarmas modulos:
La otra forma de llamar al módulo:
El resultado es igual:
5.- Curso AngularJS - Two way data binding y ng model
https://www.youtube.com/watch?v=9Xef6l04vVI&list=PL5436F268E4A02940&index=5
Arreglo a uno de los atributos de scope:

Codigo Index:
<!DOCTYPE html>
<html ng-app = "MyFirstApp">
<head>
<meta charset="utf-8">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<script src="controller.js"></script>
</head>
<body ng-controller = "FirstController">
<input type="text" ng-model="nuevoComentario.comentario"><br>
<input type="text" ng-model="nuevoComentario.username"><br>
<button ng-click="agregarComentario()">Agregar comentario</button>
<h3>Comentarios</h3>
<ul>
<li ng-repeat="Comentario in comentario">
{{comentario.comentario}} - <strong>{{comentario.username}}</strong>
</li>
</ul>
</body>
</html>
Codigo controller:
angular.module("MyFirstApp", [])
.controller("FirstController",function($scope){
$scope.nombre = "Hola Fer";
$scope.nuevoComentario = {};
$scope.comentarios = [
comentario: "Buen tutorial",
username: "codigo facilito"
},
comentario: "Malisimo el tutorial",
username: "otro_usuario"
];
$scope.agregarComentario = function(){
$scope.comentarios.push($scope.nuevoComentario);
$scope.nuevoComentario = {};
});
Cargar el servidor de angular:
Errores
Elementos que conforman Angular
Sección 2, clase 13
COMPONENTES
Un componente al final va a controlar un trozo de pantalla o de la vista.
Todo lo que se puede ver en pantalla es controlado y gestionado por este tipo de elementos.
La lógica de un componente dentro una clase en Angular 2 es que da soporte a una

vista interactuando con ella a través de un API con propiedades y métodos.
El componente hace de mediador entre la vista a través de la plantilla y

la lógica de la app donde se incluirá el modelo de datos, es decir una especie de controlador.
PLANTILLAS
Las plantillas van a definir la vista de los componentes.
Son htmls y tienen sintaxis especial de Angular. Trabajando con el databinding y las directivas.
DECORADORES Y METADATOS
Con los decoradores(patrón de diseño) vamos a configurar dinamicamente atributos/metadatos de las clases y
componentes.
Los metadatos van a describir a las clases pero también describen relaciones, por ejemplo si tenemos un componente y
una plantilla el metadato se va a encargar de decirle a Angular que ese componente y esa plantilla van juntos, entre otras
muchas cosas.
SERVICIOS
Son clases con un objetivo claro, facilita la reutilización, son un tipo de componente dentro de la arquitectura de
Angular 2 y mediante la inyección de dependencias los podemos usar en otros componentes principales digamos.
PROVIDERS
Son servicios que nos proveen de datos o funcionalidades mediante sus métodos. Existen providers/servicios
propios de Angular o creados por nosotros mismos.
DIRECTIVAS
Son funcionalidades aplicables al DOM y a los elementos HTML en las plantillas de un componente. Por ejemplo una
directiva puede servir para controlar que un div se muestre o no o recorrer un array en la vista (directivas estructurales,
estructuras condicionales y de control) o incluso también puede servir para darle una un estilo u otro a un elemento del
HTML o también para interactuar con el modelo de datos del componente.
Básicamente son nuevos atributos para aplicarle a cualquier cosa en nuestra plantilla/vista.
Tienes más información sobre la arquitectura de Angular 4 en la documentación
ofical:https://angular.io/docs/ts/latest/guide/architecture.html
No te preocupes, esto son simplemente conceptos con los que iremos trabajando en el curso, los iremos viendo
poco a poco y aprenderemos a usarlos dentro de Angular 4 para realmente entender para que sirven, su objetivo
y como se usan.
Nos vemos en la siguiente clase :D

7
Error en angular
E

Tutoriales Angular (Autoguardado)

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutoriales Angular (Autoguardado)

Cargado por

Copyright:

Formatos disponibles

Tutorial 1:

<html lang="en" ng-app>

<title>Primera aplicacion Angularjs</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

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

Establecer un comentario por defecto:

<html lang="en" ng-app>

<title>Primera aplicacion Angularjs</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<h1>Hola, {{name || 'Hola chicos' }}</h1>

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

<script type="text/javascript" src="js/angular.min.js"></script>

<html lang="en" ng-app = "MyFirstApp">

<title>Primera aplicacion Angularjs</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<body ng-controller = "FirstController">

Arreglo a uno de los atributos de scope:

<html ng-app = "MyFirstApp">

<title>Primera aplicacion Angularjs</title>

<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<script type="text/javascript" src="js/angular.min.js"></script>

<body ng-controller = "FirstController">

<input type="text" ng-model="nuevoComentario.comentario"><br>

<input type="text" ng-model="nuevoComentario.username"><br>

<button ng-click="agregarComentario()">Agregar comentario</button>

<li ng-repeat="Comentario in comentario">

$scope.nombre = "Hola Fer";

comentario: "Buen tutorial",

username: "codigo facilito"

comentario: "Malisimo el tutorial",

Un componente al final va a controlar un trozo de pantalla o de la vista.

La lógica de un componente dentro una clase en Angular 2 es que da soporte a una

El componente hace de mediador entre la vista a través de la plantilla y

Las plantillas van a definir la vista de los componentes.

Nos vemos en la siguiente clase :D

También podría gustarte