Scribd
Cargar
169 vistas

Tutoriales Angular (Autoguardado)

Este documento contiene una serie de tutoriales sobre AngularJS. Explica cómo crear una primera aplicación Angular con enlaces de datos y cómo establecer valores predeterminados. También muestra cómo crear módulos, utilizar ng-repeat para mostrar comentarios de un array, y agregar comentarios mediante una función. El documento proporciona código de ejemplo para ilustrar los conceptos cubiertos en los tutoriales.

Cargado por

fernandavr777
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
169 vistas

Tutoriales Angular (Autoguardado)

Este documento contiene una serie de tutoriales sobre AngularJS. Explica cómo crear una primera aplicación Angular con enlaces de datos y cómo establecer valores predeterminados. También muestra cómo crear módulos, utilizar ng-repeat para mostrar comentarios de un array, y agregar comentarios mediante una función. El documento proporciona código de ejemplo para ilustrar los conceptos cubiertos en los tutoriales.

Cargado por

fernandavr777
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 42

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>

<title>Primera aplicacion Angularjs</title>

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

<head>
<body>

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

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

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

</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">

<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>

<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">

<title>Primera aplicacion Angularjs</title>

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


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

<script type="text/javascript" src="js/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

También podría gustarte