-
Notifications
You must be signed in to change notification settings - Fork 13
/
AngularJS.txt
122 lines (91 loc) · 3.54 KB
/
AngularJS.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
======================
Guía de AngulaJS by dM
======================
Teoría y desarrollo: @telecristy de codejobs
==================
¿Qué es AngularJS?
==================
AngularJS es un framework de JavaScript de lado cliente que nos sirve para
agregar interactividad a nuestro HTML. Si bien, AngularJS es desarrollado por
la empresa Google.
===================================================================
¿Cómo le decimos a nuestro HTML cuando disparar nuestro JavaScript?
===================================================================
En AngularJS usamos Directivas (directives) las cuales son una marca sobre
nuestras etiquetas HTML que le dicen a Angular que ejecute o haga referencia a
algún código de JavaScript.
Las directivas en Angular unen el comportamiento de nuestro HTML con el código
JavaScript. Un ejemplo de directiva seria:
<body ng-controller="tienda">
</body>
En este ejemplo vamos a desarrollar una aplicación con AngularJS llamada
"tienda".
Si bien, lo primero que tenemos que hacer para comenzar a desarrollar nuestra
aplicación es descargar AngularJS de la página oficial.
https://angularjs.org/
Como segundo paso vamos a incluir AngularJS a nuestro HTML de la siguiente
manera, yo por ejemplo coloque AngularJS dentro de una carpeta
llamada "lib" (librerías):
<script type="text/javascript" src="lib/angular.min.js"></script>
</body>
</html>
Ahora bien, el siguiente componente que necesitamos conocer sobre AngularJS son
los Módulos.
===============================
¿Qué es un módulo en AngularJS?
===============================
Aquí escribimos piezas de nuestra aplicación Angular. Encapsulamos código en
los módulos, entonces esto hace que nuestro código sea mantenible, mas testeable
y que tenga una mejor lectura.
En un modulo también definimos las dependencias de nuestra aplicación, por
ejemplo un módulo puede depender de otros 2 módulos.
Para crear nuestro primer módulo, lo primero que tenemos que hacer es crear un
archivo llamado "app.js" y escribimos:
var app = angular.module('tienda', []);
Te explico otro ejemplo: Declaramos una variable, dentro de esa variable hacemos
referencia a AngularJS posteriormente le decimos que vamos a crear un modulo
(.module) entre paréntesis va el nombre de la aplicación por
ejemplo; ‘tiendaCodejobs’ y por ultimo entre corchetes pondremos algunas otras
librerías de las que dependa nuestra aplicación.
Ahora bien, para hacer uso de "app.js" vamos a mandarlo llamar en nuestro HTML
de la siguiente manera:
<script type="text/javascript" src="app.js"></script>
Y en nuestro HTML declararemos una directiva llamada ng-app="tienda" de la
siguiente manera:
<!DOCTYPE html>
<html ng-app="tienda">
Esta directiva crea la aplicación angular y ejecuta ese modulo "tienda" cuando
se lee el documento.
======================================
¿Qué son las expresiones en AngularJS?
======================================
Las expresiones en AngularJS nos permiten insertar valores dinámicos en nuestro
HTML. Por ejemplo:
<p>
Tengo {{20 + 6}} años
</p>
En el navegador me mostrara: Tengo 26 años
<p>
{{"Hola" + "¿Como estas?"}}
</p>
En el navegador me mostrara: Hola ¿Cómo estas?
<!DOCTYPE html>
<html ng-app="tienda">
<head>
<title>Ejemplo de Angular</title>
<meta charset="UTF-8">
<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<p>
<b>
{{"Nombre - " + "Edad"}}
</b>
</p>
<p>
Yolanda - {{20 + 6}} <br />
María - {{20 + 3}}
</p>
</body>
</html>